在移动应用开发中，滑动删除是一种十分常见的交互方式，可以让用户快速方便地删除不需要的内容。在 Material Design 中，实现滑动删除效果也十分简单与优雅。本文将介绍如何在 Material Design 中实现滑动删除效果，提高你的用户交互体验。
1. Material Design 中的滑动删除
在 Material Design 中，滑动删除通常是指在一个列表视图中，用户可以通过左右滑动一个列表项来实现删除。与其他简单的交互方式相比，滑动删除在移动应用中具有更高的优雅性和美观性。使用滑动删除还可以让用户在删除之前再次确认是否需要删除，避免误删。
在 Material Design 中，通常使用 SwipeRefreshLayout 来实现下拉刷新和上拉加载更多功能。我们可以在这个控件中添加一个 RecyclerView，然后在 RecyclerView 的每一个列表项上添加滑动删除效果。
2. 实现滑动删除功能
实现滑动删除功能需要使用到 ItemTouchHelper 类。该类是 RecyclerView 提供的一个用于实现拖放与删除的工具类。
实现滑动删除需要完成以下几个步骤：
2.1 编写 ItemTouchHelper.Callback
首先需要编写一个继承 ItemTouchHelper.Callback 的类。这个类的作用是处理拖放和删除事件。我们需要在这个类的 onSwiped 方法中处理滑动删除事件。
------ ----- --------------------- ------- ------------------------ -
------- ----- --------- ---------
------ ------------------------------- -------- -
-------- - --------
-
---------
------ ------- ------------------- ------------- ----------------------- ----------- ----------------------- ------- -
------ ------
-
---------
------ ---- -------------------------------- ----------- --- ---------- -
--- -------- - --------------------------------
------------------------------
-
---------
------ ---- ------------------ -- ------------ ------------- ----------------------- ----------- ----- --- ----- --- --- ------------ ------- ------------------ -
-------------------- ------------- ----------- --- --- ------------ -------------------
-
---------
------ --- ----------------------------- ------------- ----------------------- ----------- -
------ -------------------- ---- - -------
-
-我们在上面的代码中重写了 ItemTouchHelper.Callback 的四个方法：
onMove：用于实现拖拽功能，我们不需要使用到它，返回false。onSwiped：用于处理滑动删除事件，在这个方法中我们需要调用适配器的deleteItem方法来删除滑动的列表项。onChildDraw：用于在滑动时绘制条目的删除背景，并根据水平滑动的距离更新条目的透明度。getMovementFlags：指定支持哪些手势，这里我们只支持左右滑动，不支持拖拽。
2.2 编写 Adapter
在 Adapter 中添加删除方法，SwipeToDeleteCallback 在拖拽和滑动时会调用 onSwiped 方法，该方法的传参中有 viewHolder.getAdapterPosition()，这个方法就是删除的关键，后文中再展开介绍。
------ ----- --------- ------- ------------------------------------------ -
------- ------------ ---------
------ ------ ----- ---------- ------- ----------------------- -
------ -------- ----------
------ ------------------- -- -
---------
--------- - --
-
-
------ ---------------------- ---------- -
-------- - ----------
-
--------
---------
------ -------------------- --------------------------- --------- ------- --- --------- -
-------- - - ---------- ----------------------------------------
------------------------------- ------- -------
---------- -- - --- --------------
------ ---
-
---------
------ ---- ------------------------- ---------- ------- --- --------- -
-------------------------------------------------
-
---------
------ --- -------------- -
------ ----------------
-
------ ---- -------------- --------- -
--------------------------
----------------------------
-
-在 Adapter 的 onCreateViewHolder 和 onBindViewHolder 方法中，我们可以绑定列表项的视图。此处演示的是使用 TextView 显示文本内容。
2.3 添加 ItemTouchHelper 到 RecyclerView
--------------- --------------- - --- ------------------- ---------------------------------- ---------------------------------------------------
2.4 完整代码
下面是完整的 Activity 代码：
------ ----- ------------ ------- ----------------- -
------- ------------ -------------
------- --------- ----------
---------
--------- ---- --------------- ------------------- -
-----------------------------------
---------------------------------------
------------ - --------------------------------
-----------------------------------
------------------- ------------- - --- --------------------------
---------------------------------------------
------------ --------- - --- --------------
--- ---- - - -- - - --- ---- -
------------------- - - ---
-
--------- - --- ---------------------
-----------------------------------
-- --------
--------------- --------------- - --- ------------------- ----------------------------------
---------------------------------------------------
-
-3. 结论
在 Material Design 中，实现滑动删除效果非常简单方便。通过 ItemTouchHelper 类和适配器中的删除方法，我们可以轻松地实现滑动删除功能。
滑动删除功能能够提高用户体验和交互性，用户可以轻松地删除不需要的内容，避免误删，并有机会再次确认是否需要删除。我们强烈建议开发人员在移动应用中实现滑动删除效果。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6710adcf377015f5a1a21b50