FloatingActionButton的簡(jiǎn)稱是FAB，是Support Design Library庫中引入的控件之一，它是一個(gè)懸浮在界面之上的圓形控件，一般作為懸浮按鈕存在。

（1）添加依賴

implementation 'com.android.support:design:28.0.0'

（2）繼承結(jié)構(gòu)

圖片.png

（3）基本屬性介紹

• android:clickable="true"：默認(rèn)情況下FloatingActionButton不可點(diǎn)擊，clickable為true之后，F(xiàn)loatingActionButton才可以點(diǎn)擊。

• app:elevation="18dp"：陰影的高度

elevation是Android 5.0中引入的新屬性，設(shè)置該屬性使控件有一個(gè)陰影。

效果如下：

圖片.png

• app:fabSize="normal"：設(shè)置FAB的大小

fabSize有3個(gè)取值，分別是“normal”、“auto”、“mini”

normal：大小為56 * 56dp
auto：自動(dòng)大小
mini：大小為： 40 * 40dp

• app:backgroundTint="#ff00ff"：FAB的背景顏色

• app:rippleColor="#cccccc"：點(diǎn)擊FAB時(shí)，形成的水波紋顏色

• app:borderWidth="0dp"：設(shè)置邊框?qū)挾?/p>

通常設(shè)置為0，用于解決Android 5.X設(shè)備上陰影無法正常顯示的問題

borderWidth為10dp的效果

圖片.png

borderWidth為20dp的效果

圖片.png

• app:pressedTranslationZ="18dp"：點(diǎn)擊按鈕時(shí)，按鈕邊緣陰影的寬度

效果如下：

98.gif

如圖所示，按下按鈕時(shí)，明顯有一個(gè)灰色陰影效果。

• app:fabCustomSize="50dp"：FAB自定義大小

• android:src="@mipmap/add"：添加背景圖片

圖片.png

• app:maxImageSize="50dp"：設(shè)置背景圖片的最大大小

• app:useCompatPadding="false"：為true時(shí)，F(xiàn)loatingActionButton會(huì)自動(dòng)在四周設(shè)定一個(gè)合適的padding

• app:hoveredFocusedTranslationZ="18dp"：這個(gè)屬性應(yīng)該是類似鼠標(biāo)經(jīng)過產(chǎn)生的陰影

• app:layout_anchor="@id/iv_image"：設(shè)置FAB的錨點(diǎn)，即以哪個(gè)控件為參照設(shè)置位置

• app:layout_anchorGravity="bottom|end"：FAB相對(duì)于錨點(diǎn)的位置

• app:backgroundTintMode="screen"：設(shè)置顏色渲染方式，這個(gè)讓我想到了Xfermode，有興趣的朋友可以查看這篇博客
  Xfermode 詳解

以下是xfermode示例圖

xfermode示例圖.jpg

它的幾個(gè)取值分別是：
[screen]、[multiply]、[src_in]、[src_atop]、[src_over]、[add]

至于 app:showMotionSpec=""和app:hideMotionSpec=""基本用不到，它的使用暫時(shí)留一個(gè)懸念吧。

需要注意的是：

經(jīng)過調(diào)試發(fā)現(xiàn)：layout_anchor和layout_anchorGravity屬性，只有配合CoordinatorLayout控件才會(huì)生效。

（4）xml代碼

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clickable="true"
    android:src="@mipmap/add"
    app:backgroundTint="@color/colorAccent"
    app:backgroundTintMode="screen"
    app:rippleColor="@color/colorPrimary"
    app:borderWidth="0dp"
    android:layout_centerInParent="true"
    app:elevation="18dp"
    app:fabSize="normal"
    app:useCompatPadding="false"
    app:layout_anchor="@id/iv_image"
    app:layout_anchorGravity="right|bottom"
    app:pressedTranslationZ="18dp"
    app:hoveredFocusedTranslationZ="18dp"/>

（5）效果演示

99.gif

[本章完...]