FloatingActionButton的簡稱是FAB，是Support Design Library庫中引入的控件之一淘捡，它是一個懸浮在界面之上的圓形控件，一般作為懸浮按鈕存在池摧。

（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è)置該屬性使控件有一個陰影乌逐。

效果如下：

圖片.png

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

fabSize有3個取值，分別是“normal”瓣距、“auto”黔帕、“mini”

normal：大小為56 * 56dp
auto：自動大小
mini：大小為： 40 * 40dp

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

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

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

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

borderWidth為10dp的效果

圖片.png

borderWidth為20dp的效果

圖片.png

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

效果如下：

98.gif

如圖所示呐芥，按下按鈕時逻杖，明顯有一個灰色陰影效果。

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

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

圖片.png

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

• app:useCompatPadding="false"：為true時思瘟，F(xiàn)loatingActionButton會自動在四周設(shè)定一個合適的padding

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

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

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

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

以下是xfermode示例圖

xfermode示例圖.jpg

它的幾個取值分別是：
[screen]够话、[multiply]、[src_in]光绕、[src_atop]女嘲、[src_over]、[add]

至于 app:showMotionSpec=""和app:hideMotionSpec=""基本用不到诞帐，它的使用暫時留一個懸念吧欣尼。

需要注意的是：

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

（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

[本章完...]