Material Design 是由 Google 推出的设计语言，它提供了一套丰富的设计组件，使应用程序的设计更加精美和统一。其中，Floating Action Button（FAB）是 Material Design 中非常重要的一个组件，经常被应用在主要操作的位置，用户可以轻松地通过点击 FAB 完成相应的操作。
但是有时候，我们需要让 FAB 具有更多的功能，比如可拖拽、可变色、可伸缩等。本文将介绍如何在 Material Design 中实现可拖拽的 FAB。
实现方式
实现可拖拽的 FAB，需要使用 Android 系统自带的 CoordinatorLayout 和 Behavior。CoordinatorLayout 代表一个父容器，可以用于布局子 View，并且可以指定 Behavior。而 Behavior 则定义了一个 View 在 CoordinatorLayout 中的行为。
- 首先，将需要拖动的 FAB 继承自
FloatingActionButton。
-- -------------------- ---- -------
----------------------------------------------------------------------
-------------------------------
-----------------------------------
------------------------------------
--------------------------------
-------------------
--------------------------------------
-------------------------------------
-----------------------------------------------------
----------------------- --- 然后，创建一个
Behavior类，我们将 FAB 移动的逻辑放到其中。在这个例子中，我们实现了一个简单的拖拽效果。
-- -------------------- ---- -------
------ ----- -------------------- ------- ----------------------------- -
------- ----- ---
---------
------ ------- ------------------------------ ------- -------------------- ------ ----------- --- -
-- --------------- -- ------------------------ -
-- - ------------ - -------------
-
------ -------------------------- ------ ----
-
---------
------ ------- ------------------------------- ------- -------------------- ------ --- ---------------- -
--------------------------- -----------------
------ -----
-
---------
------ ------- ---------------------------- ----------------- ------------------ -------- -------------------- ------
-------- ---- ------------------ -------- ---- ------- --- ----- --- ----- -
------ -----
-
---------
------ ---- -------------------------- ----------------- ------------------ -------- -------------------- ------
-------- ---- ------- --- --- --- --- -------- ----- --------- --- ----- -
------------------------------------------ ------ ------- --- --- --------- ------
--- ------------ - --------------------------------- --------------------------------------
--- ------ - ------------------
--- --------- - ------------------ - -------------
--- --------- - --------- - -------
----- ---- - ------------ - ---
-- ----- - ---------- -
---- - ----------
-
-- ----- - ---------- -
---- - ----------
-
----------- - ----- ------------- - ------
-----------------
-
- - 最后，在 FAB 中声明我们刚刚创建的
Behavior。
app:layout_behavior=".behaviors.DraggableFabBehavior"
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
------ ----- -------------------- ------- ----------------------------- -
------- ----- ---
---------
------ ------- ------------------------------ ------- -------------------- ------ ----------- --- -
-- --------------- -- ------------------------ -
-- - ------------ - -------------
-
------ -------------------------- ------ ----
-
---------
------ ------- ------------------------------- ------- -------------------- ------ --- ---------------- -
--------------------------- -----------------
------ -----
-
---------
------ ------- ---------------------------- ----------------- ------------------ -------- -------------------- ------
-------- ---- ------------------ -------- ---- ------- --- ----- --- ----- -
------ -----
-
---------
------ ---- -------------------------- ----------------- ------------------ -------- -------------------- ------
-------- ---- ------- --- --- --- --- -------- ----- --------- --- ----- -
------------------------------------------ ------ ------- --- --- --------- ------
--- ------------ - --------------------------------- --------------------------------------
--- ------ - ------------------
--- --------- - ------------------ - -------------
--- --------- - --------- - -------
----- ---- - ------------ - ---
-- ----- - ---------- -
---- - ----------
-
-- ----- - ---------- -
---- - ----------
-
----------- - ----- ------------- - ------
-----------------
-
- -- -------------------- ---- -------
----------------------------------------------------------------------
-------------------------------
-----------------------------------
------------------------------------
--------------------------------
-------------------
--------------------------------------
-------------------------------------
-----------------------------------------------------
----------------------- --总结
通过使用 CoordinatorLayout 和 Behavior，我们可以很容易地实现可拖拽的 FAB。但是，这只是一个简单的例子，实际上我们可以使用各种各样的 Behavior，来实现更多有趣的效果。希望这篇文章能够给大家带来一些启发和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fe830095b1f8cacdd45da0