오늘은 안드로이드 최신 위젯에 속하는


플로팅액션버튼(FloatingActionButton)에 대해 포스팅 한다.


먼저 아래의 유알엘(안드로이드 디벨로퍼) 에서 발췌한 


플로팅액션버튼에 관한 내용이다.


https://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html


Floating action buttons are used for a special type of promoted action. They are distinguished by a circled icon floating above the UI and have special motion behaviors related to morphing, launching, and the transferring anchor point.

Floating action buttons come in two sizes: the default and the mini. The size can be controlled with the fabSize attribute.

As this class descends from ImageView, you can control the icon which is displayed via setImageDrawable(Drawable).

The background color of this view defaults to the your theme's colorAccent. If you wish to change this at runtime then you can do so viasetBackgroundTintList(ColorStateList).



간단하게 해석해보자면, 


플로팅액션버튼은 다른 View 들과 구별되게끔 공중에 떠있는듯한(그림자 효과를 이용- 엘리베이션 효과) UI이며,


또한 이버튼은 특정 지점으로 부터 애니메이션적 특징을 가질 수 있다고 한다.


xml 속성인 fabSize를 이용하여 크기를 정할 수 있고, 크기를 정하지 않을시 default 사이즈로 셋팅이 된다.


이미지뷰(ImageView) 위젯을 상속 받았기 때문에 이미지뷰 와 똑같이 이미지를 셋팅할 수 있고,


버튼의 색상은 theme 색깔인 colorAccent 기준으로 정해진다. 만약 코드로 바꾸고 싶다면,


setBackgroundTintList( 컬러값 ) 으로 바꿀 수 있다.



해당 위젯을 쓰기위해선 그래들에 아래와 같이 적어 sync 해야한다.


compile 'com.android.support:design:22.2.0'



이제, 코드를 통해 사용해보자. 중요한 점은 플로팅액션버튼의 에니메이션 특징이라던가


다른 View와 적절하게 이용되는 것들은( ex) snackBar가 나타날때 플로팅액션버튼이 스낵바위로 올라가는 애니메이션 발동,


리사이클러뷰를 스크롤할때 플로팅액션버튼이 숨겨지는 애니메이션 발동등)


CoordinatorLayout이랑 같이 사용해야 한다는 점이다. CoordinatorLayout이 여러 위젯,View들을 통솔하고 관리하는 역할을 하기 때문이다.


CoordinatorLayout 과 같이 사용할시 anchor (특정지점) 을 정할 수 있는것도 특징이다. 아래의 예시를 보자.




acitvity_mainxml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"/>

</android.support.design.widget.AppBarLayout>

<FrameLayout
android:id="@+id/frameLayout"
android:background="#ffff0000"
android:layout_width="match_parent"
android:layout_height="300dp"/>

<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/fab_margin"
android:src="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

위와 같이 코딩 했을 경우 FrameLayout(빨간배경)과 상관없이 FloatingActionButton의 위치는 아래의 그림과 같이 배치된다.




위에서 말한 anchor 속성을 적용해 FrameLayout(빨간배경) 에 위치시켜보자.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"/>

</android.support.design.widget.AppBarLayout>

<FrameLayout
android:id="@+id/frameLayout"
android:background="#ffff0000"
android:layout_width="match_parent"
android:layout_height="300dp"/>

<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/fab_margin"
android:src="@android:drawable/ic_dialog_email"
app:layout_anchor="@id/frameLayout"
app:layout_anchorGravity="right|bottom"/>

</android.support.design.widget.CoordinatorLayout>

위와 같이 FloatingActionButton 안에 app:layout_anchor="~" , app:layout_anchorGravity="~" 를 추가했다.


해당 속성은 CoordinatorLayout이 가지고 있다. 특정지점을 frameLayout이란 id값을 통해 알려주고,


레이아웃 그래비티를 적절히 사용해 배치시켜 봤다. 아래의 그림이 결과물이다.



중요한점은 플로팅액션버튼, 즉 자기자신의 위젯의 그래비티와는 무관하다는 점이다. 


만약 위젯 레이아웃 즉, layout_gravity 속성을 적을시 그에 맞게 anchor 지점에서 이동한다.


anchor 지점을 정하는것은 CoordinatorLayout이 담당하는 것이므로, 당연히 다른 위젯들도 anchor를 정할 수 있다.


또한 anchor 을 지정해줌으로써, 특정 애니메이션의 행위를 보장 해줄 수 도 있다.


포스팅이 도움 되셨다면, 커피 한잔 후원해주세요!
더 좋은 포스팅 작성에 큰 힘이 됩니다.

Buy me a coffeeBuy me a coffee

+ Recent posts