這篇文章和大家一起聊聊Android Design包中的FloatingActionButton控制元件（簡稱：FAB）。至此，Android Material Design系列的學習已進行到第三篇，大家可以點選以下連結檢視之前的文章：

FAB的用途簡介和設計規範我就不碎碎唸了，大家可以參考Google官網給出的介紹，相當詳細，地址如下（記得翻牆哦）：

在Google正式於Design包中提供FAB控制元件以前，GitHub上也有大牛貢獻了有關FAB的開源專案，大家可以去搜搜看，這裡給大家推薦幾個Star量較高的專案：

這幾個FAB的開源專案各有特色，提供的功能也是非常強大，但與Google提出的有關FAB的設計規範多少還是有些出入。所以，大家可以根據自己的專案需求酌情使用，這裡還是推薦使用Design包的官方系統控制元件，正宗而又地道，一起來看看它的使用細節吧。

<android.support.design.widget.FloatingActionButton
        android:id
 
="@+id/fab_add"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_margin="@dimen/dp_16"
        android:src="@mipmap/ic_toolbar_add"
        android:clickable="true"
 

        app:backgroundTint="@color/fab_ripple" />

FAB的xml屬性需要通過自定義域名空間來使用，比如這裡我使用了xmlns:app="http://schemas.android.com/apk/res-auto，大家可以自行查詢系統提供的屬性及其含義，這裡我只羅列幾個容易產生疑惑和出現問題的幾個常見屬性，避免大家走一些彎路。

• app:backgroundTint=”@color/fab_ripple”
  預設的FAB按鈕是紅色的，通過這個屬性我們可以修改FAB的背景色。但千萬注意，這個屬性的值是一個 ColorStateList 型別，如果你誤用一個colors檔案中定義的一個顏色值，在點選時將無法產生漣漪（ripple）互動效果。ColorStateList的定義可以參考官網介紹，定義好各種state下的顏色即可。

• android:clickable=”true”
  當你使用了backgroundTint屬性來改變系統的背景紅色，一定要記得設定clickable屬性為true，否則也是無法產生漣漪（ripple）互動效果的；

• app:useCompatPadding=”true”
  雖然說，這個屬性幫助開發者自適配FAB的內間距，以達到與螢幕四周保持一個合適的距離的目的，但是不建議大家使用這個屬性。大家可以嘗試一下，當你使用這個屬性之後，在觸控FAB時，會形成一個正方形的陰影效果，影響使用者體驗。所以，我們可以使用android:layout_margin屬性來控制FAB與其他控制元件之間的距離。

FAB的基礎使用很簡單，只要稍微注意上面幾點即可。是不是以為這就結束了？那你就大錯特錯了。FAB配合著其他控制元件，能夠做出一些非常炫酷的互動動畫效果，比如：

FAB的精髓在於與CoordinatorLayout協調者佈局中的使用。本文著重介紹FAB的基礎使用，等後續介紹CoordinatorLayout、AppBarLayout控制元件時，再講講精髓部分。

示例原始碼

我在GitHub上建立了一個Repository，用來存放整個Android Material Design系列控制元件的學習案例，會伴隨著文章逐漸更新完善，歡迎大家補充交流，Star地址：