Material Design 是谷歌推出的一种全新的设计语言，它的主旨是一种平面化、简洁、大胆、沉浸和自然的设计风格。而 FloatingActionButton 是 Material Design 中非常重要的一个元素，它是一种浮动的圆形按钮，非常适合用于用户操作的主要入口。
在本文中，我们将详细介绍 FloatingActionButton 的使用技巧，包括样式、动画、位置和事件等方面的内容，我们将通过示例代码来展示每个技巧的实现方法，有助于读者更好的理解和掌握这个技术。
FloatingActionButton 样式
FloatingActionButton 可以通过一系列的属性来修改它的样式，包括背景颜色、图标、形状和大小等方面。下面我们来看几个示例：
修改背景颜色
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="@color/colorAccent"
app:srcCompat="@drawable/ic_add" />通过设置 backgroundTint 属性，可以修改 FloatingActionButton 的背景颜色，这里我们设置为 colorAccent。
修改图标
<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" />通过设置 src 属性，可以修改 FloatingActionButton 的图标，这里我们设置为 ic_add。
修改形状
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:shapeAppearance="@style/ShapeAppearanceOverlay.MyApp.FloatingActionButton"
app:srcCompat="@drawable/ic_add" />通过设置 shapeAppearance 属性，可以修改 FloatingActionButton 的形状，可以通过自定义 Style 来实现。
修改大小
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="80dp"
android:layout_height="80dp"
android:backgroundTint="@color/colorAccent"
app:srcCompat="@drawable/ic_add" />通过设置 layout_width 和 layout_height 属性，可以修改 FloatingActionButton 的大小，这里我们设置为 80dp。
FloatingActionButton 动画
FloatingActionButton 在 Material Design 中也有很多的动画效果，可以让它更加的生动、有趣，下面我们来看几个示例：
缩放动画
-- -------------------- ---- -------
----------------------------------------------------------------------
---------------------
-----------------------------------
------------------------------------
-------------------------------------------
--------------------------------
--------------------------------------------------
-----------------------------------------
--------------------------------------------- --
-------------- ------ - --------------------------- --------- ----- ----
-------------- ------ - --------------------------- --------- ----- ----
----------- ----------- - --- --------------
-------------------------------- --------
-----------------------------
------------------------------- ----------------------
--------------------通过使用 ObjectAnimator 对 scale 属性进行修改，即可实现 FloatingActionButton 的缩放动画。
旋转动画
-- -------------------- ---- -------
----------------------------------------------------------------------
---------------------
-----------------------------------
------------------------------------
-------------------------------------------
--------------------------------
--------------------------------------------------
---------------------------------------------
------------------------------------------ --
-------------- ------ - --------------------------- ----------- --- ------
----------------------------------------------
-------------------------
-------------------------- ----------------------
---------------通过使用 ObjectAnimator 对 rotation 属性进行修改，即可实现 FloatingActionButton 的旋转动画。
FloatingActionButton 位置
FloatingActionButton 的位置也是非常重要的一方面，它的位置要根据具体的界面需求来调整，下面我们来看几个示例：
固定位置
-- -------------------- ---- -------
----------------------------------------------------------------------
---------------------
-----------------------------------
------------------------------------
-------------------------------------------
--------------------------------
----------------------------------------------------
----------------------------------------------
--------------------------------------------------
---------------------------------------------- --通过设置 layout_constraintXXX_toXXXOf 属性，可以实现 FloatingActionButton 在屏幕的固定位置。
动态调整位置
-- -------------------- ---- -------
----------------------------------------------------------------------
---------------------
-----------------------------------
------------------------------------
-------------------------------------------
--------------------------------
--------------------------------------------------
-----------------------------------------
--------------------------------------------- --
-------------------------- ---------------------- -
---------
------ ---- ------------ ----- -
----------------------------- ------------ - ------------------------------- ----------------------
------------------------- - ------------------------- - ----
----------------------------------
-
---通过设置 layout_constraintXXX_toXXXOf 属性，并在代码中调整它的位置，可以实现 FloatingActionButton 在屏幕的动态调整位置。
FloatingActionButton 事件
FloatingActionButton 的事件处理也是非常重要的一方面，它可以实现一些用户交互，下面我们来看几个示例：
点击事件
-- -------------------- ---- -------
----------------------------------------------------------------------
---------------------
-----------------------------------
------------------------------------
-------------------------------------------
--------------------------------
----------------------------------------------------
----------------------------------------------
--------------------------------------------------
---------------------------------------------- --
-------------------------- ---------------------- -
---------
------ ---- ------------ ----- -
-- -- ---------
-
---通过设置 OnClickListener，可以实现 FloatingActionButton 的点击事件处理。
长按事件
-- -------------------- ---- -------
----------------------------------------------------------------------
---------------------
-----------------------------------
------------------------------------
-------------------------------------------
--------------------------------
----------------------------------------------------
----------------------------------------------
--------------------------------------------------
---------------------------------------------- --
------------------------------ -------------------------- -
---------
------ ------- ---------------- ----- -
-- -- ---------
------ -----
-
---通过设置 OnLongClickListener，可以实现 FloatingActionButton 的长按事件处理。
总结
本文中我们详细介绍了 FloatingActionButton 的使用技巧，包括样式、动画、位置和事件等方面的内容，通过具体的示例代码，我们应该可以更好的掌握这个技术。希望读者能够通过这篇文章，更加深入的了解 Material Design 中的 FloatingActionButton，并可以在实际开发中灵活应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64719716968c7c53b0f76442
