Material Design 是 Google 在 2014 年推出的一种设计风格，主要应用于 Android 和 Web 应用程序的设计中。在 Material Design 的设计中，FloatingActionButton 是一种重要的交互控件，经常被使用在应用程序的主界面中。
FloatingActionButton，简称 FAB，是一种浮动的圆形按钮，通常放置在屏幕的右下角，用于进行重要操作。在 Material Design 中，FAB 的设计风格非常简单，同时能够增强用户的操作体验，因此被广泛应用在 Android 和 Web 应用程序的设计中。
在 Material Design 中，FAB 的展示方式可以分为两种：上浮和下沉。这两种方式都可以增强用户的操作体验，提高应用程序的可用性。下面将详细介绍这两种展示方式的实现方法。
FAB 上浮
在 Material Design 中，FAB 的默认展示方式是上浮。上浮的 FAB 可以增强应用程序的主视觉焦点，并提高用户的操作便捷性。
在代码中，实现 FAB 上浮的方法非常简单，只需要在布局文件中添加如下代码即可：
-- -------------------- ---- ------- ---------------------------------------------------------------------- ------------------------ ----------------------------------- ------------------------------------ ----------------------------------- -------------------------------- ---------------------------------------- ------------------------------------------- --
在代码中，app:layout_anchor 属性可以将 FAB 与其他视图进行关联，可以根据需要修改相应的属性值。
FAB 下沉
在一些应用程序中，FAB 的上浮可能会影响到应用程序的其他部分，这时我们可以使用 FAB 下沉的展示方式。FAB 下沉可以避免遮挡应用程序的其他部分，并同时提高用户的操作便捷性。
在代码中，实现 FAB 下沉的方法也非常简单，只需要在布局文件中添加如下代码即可：
-- -------------------- ---- ------- ---------------------------------------------------------------------- ------------------------ ----------------------------------- ------------------------------------ ----------------------------------- -------------------------------- -------------------------- -------------------------- ---------------------------------------- ------------------------------------------- --
在代码中，app:hideMotionSpec 和 app:showMotionSpec 属性可以设置下沉和上浮时的动画效果。
示例代码
下面是一个完整的示例代码，供大家参考：
-- -------------------- ---- -------
----- ------------- ------------------
--------------------------------------------------
----------------------------------------------------------
---------------------------------------------------
-----------------------------------
------------------------------------
-
---------
---------------------------
-----------------------------------
------------------------------------
------------------- ----------------------
-----------------------------------------
-------------------------------------------
---------------------------------------------
-----------------------------------------------
--
----------------------------------------------------------------------
------------------------
-----------------------------------
------------------------------------
-----------------------------------
--------------------------------
---------------------------------
-------------------------------------------
--
----------------------------------------------------在上面的示例代码中，TextView 是应用程序的主要部分，FAB 的展示位置是根据 TextView 进行定位的。
总结
在 Material Design 中，FloatingActionButton 是一种非常重要的交互控件，能够增强用户的操作体验，提高应用程序的可用性。FAB 的展示方式可以分为两种：上浮和下沉。使用 FAB 可以简化应用程序中的操作步骤，同时提高用户的操作便捷性。在使用 FAB 时，需要根据应用程序的需要，选择合适的展示方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ca20f35ad90b6d0419cc3c