Floating Action Button 구현 라이브러리 - Android L

이 라이브러리를 사용하지 마시고 공개된 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은 필자가 수정한 파일입니다

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

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

- 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클릭 하면 토스트 메세지가 나오는 모습도 볼수 있습니다

FloatingActionButton.zip

출처 : http://itmir.tistory.com/528