Androidx RecyclerView半滑显示删除图标并实现删除功能

Hey there! Great job getting the basic swipe-to-delete working already. To add that half-swipe stop with a clickable delete icon (plus the option to keep swiping to delete), we'll need to tweak your existing ItemTouchHelper logic and adjust your item layout. Let's break it down step by step:

1. 更新你的Item布局 #

首先，修改RecyclerView的item布局，添加一个默认隐藏的删除按钮，用户左滑时它会显示出来。示例布局结构如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <!-- 主内容布局（用户正常看到的内容） -->
    <LinearLayout
        android:id="@+id/content_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="16dp"
        android:background="@color/white">
        <!-- 在这里添加你原有的内容控件，比如TextView等 -->
    </LinearLayout>

    <!-- 删除按钮（默认隐藏） -->
    <Button
        android:id="@+id/delete_btn"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentEnd="true"
        android:background="@color/red"
        android:text="删除"
        android:textColor="@color/white"
        android:visibility="gone"/>
</RelativeLayout>

2. 重写你的SwipeToDelete回调 #

不再依赖默认的SimpleCallback行为，我们直接继承ItemTouchHelper.Callback，以此控制滑动动画、按钮可见性和滑动阈值。这样我们可以定义何时显示删除按钮、何时触发自动删除，以及何时让条目回弹。

public class SwipeToDelete extends ItemTouchHelper.Callback {
    private MyAdapter slAdapter;
    private final float SWIPE_THRESHOLD = 0.5f; // 滑动超过50%宽度时触发删除

    public SwipeToDelete(MyAdapter adapter) {
        slAdapter = adapter;
    }

    @Override
    public int getMovementFlags(@NonNull RecyclerView recyclerView, @NonNull RecyclerView.ViewHolder viewHolder) {
        // 只允许左滑
        return makeMovementFlags(0, ItemTouchHelper.LEFT);
    }

    @Override
    public boolean onMove(@NonNull RecyclerView recyclerView, @NonNull RecyclerView.ViewHolder viewHolder, @NonNull RecyclerView.ViewHolder target) {
        return false; // 不需要拖拽移动功能
    }

    @Override
    public void onSwiped(@NonNull RecyclerView.ViewHolder viewHolder, int direction) {
        // 滑动超过阈值时触发删除
        int position = viewHolder.getAdapterPosition();
        slAdapter.deleteItem(position);
    }

    @Override
    public void onChildDraw(@NonNull Canvas c, @NonNull RecyclerView recyclerView, @NonNull RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) {
        super.onChildDraw(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive);

        View itemView = viewHolder.itemView;
        Button deleteBtn = itemView.findViewById(R.id.delete_btn);
        View contentLayout = itemView.findViewById(R.id.content_layout);

        // 计算滑动进度（用户左滑时从0到1）
        float swipeProgress = Math.abs(dX) / itemView.getWidth();

        // 用户轻微滑动后显示删除按钮
        if (swipeProgress > 0.1f) {
            deleteBtn.setVisibility(View.VISIBLE);
            contentLayout.setTranslationX(dX); // 移动内容布局以显示按钮
        } else {
            deleteBtn.setVisibility(View.GONE);
            contentLayout.setTranslationX(0);
        }

        // 如果滑动停止且未达到阈值，让条目回弹
        if (!isCurrentlyActive && swipeProgress < SWIPE_THRESHOLD) {
            new ValueAnimator().ofFloat(dX, 0)
                    .setDuration(200)
                    .addUpdateListener(animation -> {
                        float translationX = (float) animation.getAnimatedValue();
                        contentLayout.setTranslationX(translationX);
                        if (translationX == 0) {
                            deleteBtn.setVisibility(View.GONE);
                        }
                    })
                    .start();
        }
    }

    @Override
    public float getSwipeThreshold(@NonNull RecyclerView.ViewHolder viewHolder) {
        return SWIPE_THRESHOLD; // 只有滑动超过50%才触发onSwiped
    }

    @Override
    public float getSwipeEscapeVelocity(float defaultValue) {
        return defaultValue * 1.5f; // 提高滑动速度阈值，避免误触自动删除
    }
}

3. 更新Adapter处理按钮点击 #

修改MyAdapter，绑定删除按钮的点击监听器，让用户可以直接点击按钮删除条目：

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MYViewHolder> {
    private List<MyCustomCardView> cards;
    // ... 保留你原有的onCreateViewHolder、getItemCount等代码

    @Override
    public void onBindViewHolder(@NonNull MYViewHolder holder, int position) {
        // 在这里绑定数据到内容控件...

        // 设置删除按钮点击事件
        holder.deleteBtn.setOnClickListener(v -> {
            deleteItem(position);
            // 删除后让内容布局回弹到原始位置
            holder.contentLayout.animate().translationX(0).setDuration(200).start();
        });
    }

    public void deleteItem(int position) {
        cards.remove(position);
        notifyItemRemoved(position);
    }

    class MYViewHolder extends RecyclerView.ViewHolder {
        LinearLayout contentLayout;
        Button deleteBtn;

        public MYViewHolder(@NonNull View itemView) {
            super(itemView);
            contentLayout = itemView.findViewById(R.id.content_layout);
            deleteBtn = itemView.findViewById(R.id.delete_btn);
        }
    }
}

关键细节说明： #

• 滑动阈值：SWIPE_THRESHOLD常量设置用户需要滑动条目宽度的50%才会触发自动删除，如果滑动距离不足，条目会回弹。
• 按钮可见性：用户轻微滑动（超过宽度的10%）后就显示删除按钮，给用户即时反馈。
• 点击处理：删除按钮的点击监听器直接调用你原有的deleteItem方法，保证和滑动删除的逻辑一致。

内容的提问来源于stack exchange，提问作者bcsta