导言
Material Design 是一种视觉语言， Google 发布用于 Android 操作系统、原生 Web 应用程序和桌面应用程序的设计规范。主要强调材料世界中各种表面的光泽和阴影，通过它的设计规则和技巧，可以让开发人员更容易地实现用户友好的界面和交互效果。
FloatingActionButton（FAB）是 Material Design 中的一个重要组件，它与现有元素的隆起模式形成鲜明对比，并引导用户关注其上的常用操作。在本文中，我们会对 FloatingActionButton 进行详细解析，并指导您如何在 Material Design 中运用 FAB，实现漂亮而友好的用户交互体验。
FloatingActionButton 的介绍
FloatingActionButton 是 Material Design 的一部分，是一种圆形图标按钮，在用户界面中引导唤起相关操作。在 Material Design 中， FAB 通常是重要且用于操作的元素，它可以在屏幕上悬浮，并随着用户的操作响应动画效果。
FloatingActionButton 根据 Material Design 中的设计规范，通常使用以下特点：
- 圆形形状：FAB 使用圆形形状的设计语言；
- 颜色和图标：FAB 通常使用鲜明、深色、单色的颜色方案，为按钮设置不同的图标，以便向用户展示其执行的特定操作；
- 反馈效果：FAB 使用 Material Design 中的动画效果来响应用户的点击操作，让用户更好地感知其指示行为；
- 移动效果：FAB 通常随着用户进行相关操作而移动位置，以便更好的布局和用户交互体验。
这些元素都是 Material Design 设计语言中 FAB 类型的重要元素。
如何使用 FloatingActionButton
为了更好的使用 FloatingActionButton，以下是一些使用指导：
1.添加 FloatingActionButton
在布局文件中，您可以使用以下代码来创建 FloatingActionButton：
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_add"
app:layout_anchor="@id/toolbar"
app:layout_anchorGravity="bottom|right|end"
android:layout_margin="@dimen/fab_margin"/>这里的 src 指向圆形图标的资源， layout_anchor 指向 FloatingActionButton 应该附加到哪个 View 上， layout_anchorGravity 控制浮动按钮的相对位置。
2.更改 FloatingActionButton 的颜色
默认情况下 FAB 是浅色， 背景是深色， 但是您可以使用 app:backgroundTint 将 FAB 的背景颜色更改为深色， 如以下代码：
-- -------------------- ---- -------
----------------------------------------------------------------------
---------------------
-----------------------------------
------------------------------------
------------------------------
-------------------------------
-------------------------------------------
--------------------------------------------
-------------------------------------------3.添加 Floating Action Menu
要将 Floating Action Menu 添加到 FloatingActionButton 上，您需要将 FloatingActionButton 封装在 FloatingActionButton Menu 中， 如以下代码：
-- -------------------- ---- -------
----------------------------------------------------------------------
---------------------
-----------------------------------
------------------------------------
------------------------------
-------------------------------
-------------------------------------------
-----------------------------------------
--------------------------------------------
---------------------------
----------------------
--------------------------------------------------------------------
--------------------------
-----------------------------------
------------------------------------
--------------------------------------
---------------------------------------
---------------------------------
----------------------------------
-------------------------
-----------------------------------------------
----------------------------------------------
---- --- -------- ------ ---- -------
----------------------------------------------------------------------
---------------------------------
-----------------------------------
------------------------------------
-----------------------------------
--------------------------------------------
------------------ --
----------------------------------------------------------------------
-----------------------------------
-----------------------------------
------------------------------------
---------------------------------
--------------------------------------------
--------------------
----------------------------------------------------------------------4.设置 FloatingActionButton 的动画效果
为了使 FAB 响应用户的单击操作， Material Design 中通常使用以下动画特效来界面响应：
- 点击效果：当用户轻触 FloatingActionButton 时，会发生一些常规效果，例如会轻轻弹起并显示波纹效果。
- 打开效果：当用户点击浮动操作菜单以显示其他操作时， FAB 会旋转并改变其外观以显示相关操作。
- 关闭效果：当用户再次点击 FAB 时， FAB 将被旋转回初始位置并将所有元素隐藏。
为了实现这些效果，可以在 XML 布局文件中为 FloatingActionButton 和 Floating Action Menu 使用以下属性：
app:tint: 图标颜色app:rippleColor: 波纹的颜色app:useCompatPadding: 按钮是否留白app:elevation: 悬浮按钮的高度app:pressedTranslationZ: 按下时缩影效果的大小app:behavior_overlapTop: 浮动按钮的翘起效果
示例代码
本节提供一些使用 FloatingActionButton 和 Floating Action Menu 的示例代码，供您参考：
Example 1
该示例代码演示如何创建一个基本的 FloatingActionButton。
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_add"
android:layout_margin="@dimen/fab_margin"/>Example 2
该示例代码使用 FloatingActionButton 和 Floating Action Menu 创建两个操作按钮。
-- -------------------- ---- -------
---------------
-----------------------------------
------------------------------------
------------------------------
----------------------------------------------------------
----------------------------------------------------------------------
---------------------
-----------------------------------
------------------------------------
------------------------------
---------------------------------------
--------------------------------------
-------------------------------------------------------------
--------------------------------------------------------------
-----------------------------------------------
-----------------------------------------------
--------------------------------------------------------------------
--------------------------
-----------------------------------
------------------------------------
-------------------------------------------------------------
--------------------------------------------------------------
---------------------------------------
--------------------------------------
-------------------------
-----------------------------------------------
----------------------------------------------
---- --- -------- ------ ---- -------
----------------------------------------------------------------------
---------------------------------
-----------------------------------
------------------------------------
---------------------------------
--------------------------------------------
------------------ --
----------------------------------------------------------------------
-----------------------------------
-----------------------------------
------------------------------------
-----------------------------------
--------------------------------------------
--------------------
----------------------------------------------------------------------
-----------------结语
通过本文的学习，希望您对 Material Design 中的 FloatingActionButton 有了更深刻的理解，能够在您的移动应用程序中成功应用。使用 FAB 可以为应用程序增加一种更加友好和快捷的用户交互方式，在 Material Design 应用程序中使用 FAB 是一种不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67920c6d504e4ea9bd5e1d39
