FloatingActionButton的简称是FAB，是Support Design Library库中引入的控件之一，它是一个悬浮在界面之上的
圆形控件，一般作为悬浮按钮存在。
（1）添加依赖
implementation 'com.android.support:design:28.0.0'
（2）继承结构
图片.png
（3）基本属性介绍
-
android:clickable="true"：默认情况下FloatingActionButton不可点击，clickable为true之后，FloatingActionButton才可以点击。
-
app:elevation="18dp"：阴影的高度
elevation是Android 5.0中引入的新属性，设置该属性使控件有一个阴影。
效果如下：
图片.png
- app:fabSize="normal"：设置FAB的大小
fabSize有3个取值，分别是“normal”、“auto”、“mini”
normal：大小为56 * 56dp
auto：自动大小
mini：大小为： 40 * 40dp
-
app:backgroundTint="#ff00ff"：FAB的背景颜色
-
app:rippleColor="#cccccc"：点击FAB时，形成的水波纹颜色
-
app:borderWidth="0dp"：设置边框宽度
通常设置为0，用于解决Android 5.X设备上阴影无法正常显示的问题
borderWidth为10dp的效果
图片.png
borderWidth为20dp的效果
图片.png
- app:pressedTranslationZ="18dp"：点击按钮时，按钮边缘阴影的宽度
效果如下：
98.gif
如图所示，按下按钮时，明显有一个灰色阴影效果。
-
app:fabCustomSize="50dp"：FAB自定义大小
-
android:src="@mipmap/add"：添加背景图片
图片.png
-
app:maxImageSize="50dp"：设置背景图片的最大大小
-
app:useCompatPadding="false"：为true时，FloatingActionButton会自动在四周设定一个合适的padding
-
app:hoveredFocusedTranslationZ="18dp"：这个属性应该是类似鼠标经过产生的阴影
-
app:layout_anchor="@id/iv_image"：设置FAB的锚点，即以哪个控件为参照设置位置
-
app:layout_anchorGravity="bottom|end"：FAB相对于锚点的位置
-
app:backgroundTintMode="screen"：设置颜色渲染方式，这个让我想到了Xfermode，有兴趣的朋友可以查看这篇博客
Xfermode 详解
以下是xfermode示例图
xfermode示例图.jpg
它的几个取值分别是：
[screen]、[multiply]、[src_in]、[src_atop]、[src_over]、[add]
至于 app:showMotionSpec=""和app:hideMotionSpec=""基本用不到，它的使用暂时留一个悬念吧。
需要注意的是：
经过调试发现：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
[本章完...]
网友评论