悬浮操作按钮（Floating Action Button，FAB）是 Android Material Design 中的一个重要组件，它是一个圆形的浮动按钮，通常用于触发一个主要的、常用的操作。在 Material Design 中，FAB 是一个非常重要的元素，可以帮助用户快速进行一些常用的操作，同时也能够增强应用的美观度和用户体验。
FAB 的基本用法
在 Android 中，FAB 可以通过添加 FloatingActionButton 控件来实现。使用 FAB 需要在项目中添加 Material Design 支持库，在 build.gradle 文件中添加以下代码：
dependencies {
implementation 'com.google.android.material:material:1.3.0'
}然后在布局文件中添加 FAB 控件：
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:src="@drawable/ic_add"
app:backgroundTint="@color/colorPrimary"
app:fabSize="normal" />其中，android:src 属性指定 FAB 显示的图标，app:backgroundTint 属性指定 FAB 的背景色，app:fabSize 属性指定 FAB 的大小。通过 android:layout_gravity 属性可以指定 FAB 的位置，通常将其放在屏幕右下角。
在代码中可以通过以下方式来处理 FAB 的点击事件：
FloatingActionButton fab = findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 处理 FAB 的点击事件
}
});FAB 的高级用法
除了基本用法之外，FAB 还有一些高级用法，可以进一步提升用户体验。
FAB 的阴影效果
在 Material Design 中，FAB 有一个阴影效果，可以让它看起来更加立体。可以通过 app:elevation 属性来设置 FAB 的阴影大小，值越大阴影越明显：
-- -------------------- ---- -------
----------------------------------------------------------------------
---------------------
-----------------------------------
------------------------------------
-----------------------------------
------------------------------
----------------------------------------
--------------------
------------------- --FAB 的滑动效果
在一些应用中，FAB 可能会遮挡住一些重要内容，这时可以使用滑动效果来让 FAB 滑出屏幕，让内容得到展示。可以通过 com.google.android.material.behavior.FloatingActionButton.Behavior 类来实现 FAB 的滑动效果：
-- -------------------- ---- -------
----------------------------------------------------------------------
---------------------
-----------------------------------
------------------------------------
-----------------------------------
------------------------------
----------------------------------------
--------------------
-------------------
---------------------------------------------------------------------------------------- --FAB 的扩展效果
在一些应用中，FAB 可能需要扩展出一些子菜单来提供更多的操作选项。可以通过 com.github.clans.fab.FloatingActionMenu 库来实现 FAB 的扩展效果：
dependencies {
implementation 'com.github.clans:fab:1.6.4'
}然后在布局文件中添加 FloatingActionMenu 和 FloatingActionButton 控件：
-- -------------------- ---- -------
----------------------------------------
--------------------------
-----------------------------------
------------------------------------
---------------------------------------
------------------------------------
----------------------------------
-------------------------------
-----------------------------------
-----------------------------------------------------
----------------------------
------------------------------------------
-----------------------------------------------
-----------------------------------------
--------------------------
--------------------------------
--------------------------------------------------
---------------------------------------------------
--------------------------------------------------
----------------------------------
--------------------------------
------------------------------------------------------------
----------------------------
-----------------------------
-----------------------------
-------------------------------
-------------------------------------------------------------
---------------------------------
----------------------------------
------------------------------------------------
-------------------------------
---------------------------
---------------------------
---------------------------
----------------------------
----------------------------
---------------------------
------------------------------------------
--------------------------------
-----------------------------------
------------------------------------
-------------------------------------
-------------------
-------------------- ---- -- --
------------------------------------------
--------------------------------
-----------------------------------
------------------------------------
-------------------------------------
-------------------
-------------------- ---- -- --
------------------------------------------
--------------------------------
-----------------------------------
------------------------------------
-------------------------------------
-------------------
-------------------- ---- -- --
------------------------------------------其中，fab:menu_icon 属性指定 FAB 显示的图标，fab:menu_colorNormal 和 fab:menu_colorPressed 属性指定 FAB 的背景色，fab:menu_labels_colorNormal 和 fab:menu_labels_colorPressed 属性指定子菜单的背景色和文字颜色，fab:menu_labels_position 属性指定子菜单的位置，fab:menu_labels_textSize 属性指定子菜单的文字大小。
在代码中可以通过以下方式来处理子菜单的点击事件：
-- -------------------- ---- -------
------------------ ------- - ----------------------------
-------------------- ------------ - ----------------------------------
-------------------- ------------ - ----------------------------------
-------------------- ------------ - ----------------------------------
----------------------------------- ---------------------- -
---------
------ ---- ------------ -- -
-- ----------
-
---
----------------------------------- ---------------------- -
---------
------ ---- ------------ -- -
-- ----------
-
---
----------------------------------- ---------------------- -
---------
------ ---- ------------ -- -
-- ----------
-
---总结
悬浮操作按钮是 Android Material Design 中的一个重要组件，可以帮助用户快速进行一些常用的操作，同时也能够增强应用的美观度和用户体验。除了基本用法之外，FAB 还有一些高级用法，如阴影效果、滑动效果和扩展效果，可以进一步提升用户体验。在开发应用时，可以根据实际需要使用这些高级用法，让应用更加出色。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/656078a1d2f5e1655daaba11