FloatingActionButton的简称是FAB,是Support Design Library库中引入的控件之一,它是一个悬浮在界面之上的
圆形
控件,一般作为悬浮按钮存在。
(1)添加依赖
implementation 'com.android.support:design:28.0.0'
(2)继承结构
(3)基本属性介绍
android:clickable="true":默认情况下FloatingActionButton不可点击,clickable为true之后,FloatingActionButton才可以点击。
app:elevation="18dp":阴影的高度
elevation是Android 5.0中引入的新属性,设置该属性使控件有一个阴影。
效果如下:
- 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的效果
borderWidth为20dp的效果
- app:pressedTranslationZ="18dp":点击按钮时,按钮边缘阴影的宽度
效果如下:
如图所示,按下按钮时,明显有一个灰色阴影效果。
app:fabCustomSize="50dp":FAB自定义大小
android:src="@mipmap/add":添加背景图片
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示例图
它的几个取值分别是:
[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)效果演示
[本章完...]