티스토리 뷰

이 라이브러리를 사용하지 마시고 공개된 com.android.support.design을 사용하세요



안녕하세요

이글에서는 몇달전에 공개된 Android L의 Floating Action Button을 구현해보도록 하겠습니다

다른 프로젝트에 몇가지 소스만 넣어주면 바로 구현이 가능합니다




Floating Action Button란?

말그대로 떠다니는 버튼입니다

(네이버에서도 이런 버튼이 생긴 업데이트가 있었는대 비슷해 보이지는 않나요는 기분탓)


아래 Demo 스크린샷을 확인해 보시면 어떤 기능인지 아실겁니다





시작하기전에

이 글에 사용된 FloatingActionButton은 필자가 입맛대로 수정하고 기능을 추가/개선한 버전입니다

기본 베이스는 https://github.com/makovkastar/FloatingActionButton 입니다

위에서 받은 베이스에 https://github.com/FaizMalkani/FloatingActionButton 의 일부를 참조했습니다

http://forum.xda-developers.com/tools/programming/library-floating-action-button-android-t2804145을 참고했습니다


기존에는 ListView만 지원했지만 제가 ScrollView까지 지원하도록 기능을 추가했습니다

그러나 ScrollView의경우 버그가 존재합니다

- 스크롤을 빠르게 위로 올리면 버튼이 사라짐

- 스크롤을 빠르게 내리면 버튼이 생김 (이 현상은 나중에 맨 아래로 내렸을때 그냥 버튼이 보이도록 수정할까도 생각중입니다, 그냥 보이는게 더 자연스러운거 같아서요)




라이브러리 다운로드

위에서 말씀드린대로 이글에서 사용할 FloatingActionButton은 필자가 수정한 파일입니다

아래 박스에서 라이브러리 겸 예제 프로젝트를 다운로드 해주세요


v1.0 2014-09-07



FloatingActionButton.zip



압축을 풀으신다음 아래 목록의 파일들을 버튼을 추가하고자 하는 프로젝트에 추가하세요


- src/whdghks913/tistory/floatingactionbutton 폴더 전체

- res/drawable-(모든폴더) 속 각각의 shadow.png

- res/values/attrs.xml : <declare-styleable name="FloatingActionButton">부분

- res/values/dimens.xml : <!-- FloatingActionButton --> 아래부분




How To Use?

FloatingActionButton은 다른 View처럼 레이아웃에 정의한다음 java소스에서 불러옵니다


추가하고자 하는 레이아웃의 xmlns:android밑에 아래 한줄을 추가하세요

xmlns:fab="http://schemas.android.com/apk/res-auto"


그다음 Button을 추가하세요


<whdghks913.tistory.floatingactionbutton.FloatingActionButton
    android:id="@+id/mFloatingActionButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|right"
    android:layout_margin="16dp"
    android:src="@android:drawable/ic_menu_add"
    fab:fab_colorNormal="#009688"
    fab:fab_colorPressed="#26a69a" />



그다음 java로 넘어오신다음 코드를 작성해 주시면 됩니다


ListView mListView = (ListView) findViewById(R.id.mListView);

FloatingActionButton mFloatingButton = (FloatingActionButton) findViewById(R.id.mFloatingActionButton);
mFloatingButton.attachToListView(mListView);


두줄추가후 프로젝트를 Run하면 리스트를 스크롤할때 나타나거나 사라집니다



이외에도 많은 설정이 가능합니다

아래의 더보기를 눌러 전체 API를 확인해 보세요


API 사용방법 열기





작동 스크린샷

스크린샷으로 작동을 확인해보도록 하겠습니다


    


    


스크롤을 하면 오른쪽 아래 버튼이 사라지고/나타나는 모습을 볼수 있습니다

그리고 스크린샷을 더 찍지는 못했지만 버튼을 클릭/Long클릭 하면 토스트 메세지가 나오는 모습도 볼수 있습니다



댓글
  • Favicon of https://basixblog.tistory.com Basix 요즘 블로그앱에서도 보이던데 말이죠 2014.09.08 14:47 신고
  • Favicon of https://basixblog.tistory.com Basix ..... JAR 파일로 만들어주시면 안되나요 ㅜ 2014.09.09 13:04 신고
  • Favicon of https://itmir.tistory.com Mir(whdghks913) res/values/xxx.xml등 res에 들어가야 되는 파일이 존재하기 때문에 jar파일로 만들수 없었습니다
    이 글대로 하신다면 구현에 성공 하실수 있으실겁니다
    2014.09.09 13:12 신고
  • Favicon of http://하..ㅈ늳 저기 Showcaseview 에대해서도 써주실수 있으신가요...?
    Gihhub에 검색하면 나옵니다.
    2014.09.09 18:50
  • Favicon of https://itmir.tistory.com Mir(whdghks913) 죄송합니다 제가 시간상 살펴볼 시간이 없네요..

    https://github.com/amlcurran/ShowcaseView

    방금 확인해봤는대 README파일과 샘플 프로젝트를 비교해보시면 원하시는 결과 얻으실수 있을것 같습니다
    2014.09.10 13:39 신고
  • Favicon of http://하..ㅈ늳 정화전 Github에 대해 써주실수 있을까요......? 2014.09.10 14:17
  • Favicon of https://itmir.tistory.com Mir(whdghks913) Github 사용방법 http://itmir.tistory.com/38

    답글로 알려드리기엔 긴 내용이라 전에 쓴 글 링크를 알려드립니다
    2014.09.10 14:53 신고
  • Favicon of https://kotohana.tistory.com KOTOHANA* Adapter를 사용한 ListView에서는 리스트뷰가 null을 반환하며 작동하지 않네요ㅠ,..
    해결방법이 있을까요?
    2015.06.13 10:53 신고
  • Favicon of https://itmir.tistory.com Mir(whdghks913) 음.. 왜 null값이 뜨는지는 분석해봐야 알것같습니다
    listview에서도 fab가 작동했으니 뭔가 잘못 적용한건 없나 다시 한번 확인 부탁드립니다..
    2015.06.13 13:18 신고
  • android:src="@android:drawable/ic_menu_add"
    여기에 쓰는 ic_menu_add는 뭔가요?
    2015.11.15 00:04
  • Favicon of https://itmir.tistory.com Mir(whdghks913) 아이콘 이름입니다 딴걸로 바꾸셔도 상관없습니다 2015.11.16 07:41 신고
  • 다음 좋은 강좌 감사드립니다
    앞으로도 좋은강좌 부탁드려요
    2015.12.11 00:27
  • 다음 혹시 궁금한게있는데요, 제가알기론 앱파일이 bin이라는 폴더에 한개있는걸로 알고있었는데 저 예제를보면 2개가 한거번에있더라고요?
    또한 다운은 잘되던데 앱파일에 들어가서 런하니까 오류가한개뜨네요.. 무슨이유엘까요?
    2015.12.11 00:35
  • 베로키드 혹시 버튼자체를 드래그하고 터치하는 기능도 포함이되어있나요? 설명에는 없는것 같아서 여쭈어봅니다. 현재 구현하고싶은게 계속 떠다니면서 드래그되고 터치되는 버튼을 만들고 싶거든요. 찾아보니 서비스를 이용하는 방법이 있다고 하는데 이거는 다른방법 같네요. 2016.07.18 11:43
  • Favicon of https://itmir.tistory.com Mir(whdghks913) 그 버튼은 이 글에서 설명하는 것과 완전 다른 기능인 것 같습니다. 2016.07.18 13:05 신고
  • 베로키드 혹시 제가 구현하고자 하는 기능은 참조할만한 것이 있을가요?? 2016.07.18 14:25
댓글쓰기 폼