Demo3 懸浮的按鈕:FloatActionButton(Design Support Lib)

從Demo3開始，接下來會介紹Design Support組件庫中幾個常用的組件，首先就先從Design Support Library開始說起。Android Design Support Library是Google I/O 2015發布會上官方提供的開源組件庫，其中包括了各種符合Material Design風格的組件。我們今天要講解的FloatActionButton就是其中之一。

要使用Design Support Library，首先要在項目中引入這個庫，因為是官方提供的庫，所以用最傳統的compile語句來引用就可以。操作如下:
在項目資源管理器中打開Gradle Scripts->build.gradle(Module:app)文件，你會在其中看到各種我們應用程序的設置:

我們留意到方框中的語句，那個是我們建立工程的時候Android Studio自動幫我們導入的V7組件庫支持包，接下來我們只要在其下面添加一條引用Design Support Library即可(友情提醒，對於Design Support Library的版本號，跟V7庫的版本號相同就行)：

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

添加引用之后只要我們按下Sync Now選項，Android Studio就會幫我們把Design Support Library導入到工程項目中:

之后我們就會在項目資源管理器(Project)External Libraries文件夾中看到design-23.3.0庫(當然，這是我的版本)。順便廢話一下，之后我們要使用design support library的組件也要先引用這個庫。
好了接下來進入主題。FloatActionButton是ImageButton的繼承類，其用法跟普通的Button基本類似，由於其具有更多的表現屬性，故其使用的重點其實是在布局上。
main_layout.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <include layout="@layout/toolbar" />
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/bMain_Float"
        app:fabSize="normal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:src="@android:drawable/ic_dialog_email"/>
</RelativeLayout>

 

上面我們只是像ImageButton這樣定義，另外，FloatActionButton可以指定兩個大小通過設置fabSize這個屬性，正常size是normal，還有一個更小的模式為mini，你也可以嘗試下設置成mini運行下看下效果。
運行程序，布局效果如下:

關於填充色，有兩個重要的屬性:backgroundTint和rippleColor，分別表示普通狀態和點擊狀態下的填充色(普通狀態下浮起的狀態會有陰影，點擊之后陰影范圍會變大)。其中，backgroundTint的默認值是theme中的colorAccent(colorAccent 對應EditText編輯時、RadioButton選中、CheckBox等選中時的顏色)，所以你可以在style中修改colorAccent的值來自動改變這個屬性，但我們一般不這么做；而rippleColor默認值是theme中的colorControlHighlight。一般的做法是直接在布局中指定這兩個顏色:

<android.support.design.widget.FloatingActionButton
...
        app:backgroundTint="#FFC125"
        app:rippleColor="#FFD700"/>

 

FloatActinButton最大的特點是其懸浮的效果，所以關於其立體感的屬性當然也重要。這里也是要涉及兩個屬性: elevation和pressedTranslationZ，分別為普通狀態下的陰影大小和點擊時陰影的大小，設置好之后，最終的布局如下:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/bMain_Float"
        app:fabSize="normal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:src="@android:drawable/ic_dialog_email"
        app:backgroundTint="#FFC125"
        app:rippleColor="#FFD700"
        app:elevation="6dp"
        app:pressedTranslationZ="12dp"/>
</RelativeLayout>

至於點擊事件呢，跟Button是一樣的，這里就不詳細介紹。最終效果:

有趣的一點是，FloatActionButton的一個比較常見的模式是點擊之后讓其動起來，這里就涉及到android的動畫效果，關於這方面的知識，有興趣的讀者可以參考郭霖大神的一篇關於介紹屬性動畫的博客，里面關於屬性動畫的原理講的非常細致，建議大家認真閱讀: Android屬性動畫完全解析(上)，初識屬性動畫的基本用法(作者:guolin)
Demo源碼下載地址:Demo3:FloatActionButton