使用 ItemTouchHelper 进行 Swipe-To-Dismiss 并在滑出后显示另一个 View

Question

我有一个 RecyclerView 并希望允许我的用户使用滑动手势从列表中删除项目。但正如其他应用程序（例如 Gmail）所知道的那样，我想在其后面显示一个删除图标，以便我的用户知道滑动会导致删除。但是，我找不到明显的方法来做到这一点。 ItemTouchHelper 使用 viewHolder.itemView，所以它占用了整行。

我的代码：

    ItemTouchHelper.SimpleCallback simpleItemTouchCallback = new
            ItemTouchHelper.SimpleCallback(0, ItemTouchHelper.LEFT) {
                @Override
                public boolean onMove(
                        final RecyclerView recyclerView,
                        final RecyclerView.ViewHolder viewHolder,
                        final RecyclerView.ViewHolder target) {
                    return false;
                }

                @Override
                public void onSwiped(
                        final RecyclerView.ViewHolder viewHolder,
                        final int swipeDir) {
                    adapter.remove(viewHolder.getAdapterPosition());
                }
            };

    ItemTouchHelper itemTouchHelper = new ItemTouchHelper(
            simpleItemTouchCallback
    );
    itemTouchHelper.attachToRecyclerView(itemsRecyclerView);

    itemsRecyclerView.setLayoutManager(
            new LinearLayoutManager(getContext())
    );
    itemsRecyclerView.setAdapter(adapter);

如果可能的话，有谁有胶水吗？我现在唯一能想到的就是扩展 ItemTouchHelper / 复制代码，而不是使用 viewHolder.itemView，而是使用由 ID 标识的视图。

Answer 1

我已经为回收站视图项使用了以下布局结构：

<FrameLayout
    background = dark>
    <AnyLayout with content
       android:id="@+id/removable">
    </AnyLayout>
<FrameLayout>

然后我在我的适配器中使用这个视图支架作为基础视图支架：

public class RemovableViewHolder extends RecyclerView.ViewHolder {
    private View mRemoveableView;

    public RemovableViewHolder(final View itemView) {
        super(itemView);

        mRemoveableView = itemView.findViewById(R.id.removable);
    }

    public View getSwipableView() {
        return mRemoveableView;
    }
}

在我的 ItemTouchHelper.Callback 类中，我扩展了以下方法：

@Override
public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
    if (viewHolder instanceof RemovableViewHolder) {
        int swipeFlags = ItemTouchHelper.START | ItemTouchHelper.END;
        return makeMovementFlags(0, swipeFlags);
    } else
        return 0;
}

@Override
public void clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
    getDefaultUIUtil().clearView(((RemovableViewHolder) viewHolder).getSwipableView());
}

@Override
public void onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState) {
    if (viewHolder != null) {
        getDefaultUIUtil().onSelected(((RemovableViewHolder) viewHolder).getSwipableView());
    }
}

public void onChildDraw(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) {
    getDefaultUIUtil().onDraw(c, recyclerView, ((RemovableViewHolder) viewHolder).getSwipableView(), dX, dY,    actionState, isCurrentlyActive);
}

public void onChildDrawOver(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) {
    getDefaultUIUtil().onDrawOver(c, recyclerView, ((RemovableViewHolder) viewHolder).getSwipableView(), dX, dY,    actionState, isCurrentlyActive);
}

使用这种方法，您可以在布局中多使用一层，但可以省去在 Canvas 上绘图的麻烦。您也可以选择项目内的其他视图，例如保存被触摸的视图并将其返回，并让项目的子项也可滑动。

附加到回收站视图：

final ItemTouchHelper.Callback callback = new RemovableItemTouchHelperCallback(mAdapter);
final ItemTouchHelper touchHelper = new ItemTouchHelper(callback);
touchHelper.attachToRecyclerView(recyclerView)

Answer 2

使用 ItemTouchHelper 中的 onChildDraw() 方法 - 我让它使用位图和彩色背景来左右滑动不同的颜色和图标：

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

            if (actionState == ItemTouchHelper.ACTION_STATE_SWIPE) {

                View itemView = viewHolder.itemView;

                Paint paint = new Paint();
                Bitmap bitmap;

                if (dX > 0) { // swiping right
                    paint.setColor(getResources().getColor(R.color.child_view_complete));
                    bitmap = BitmapFactory.decodeResource(getApplicationContext().getResources(), R.mipmap.ic_circle_complete);
                    float height = (itemView.getHeight() / 2) - (bitmap.getHeight() / 2);

                    c.drawRect((float) itemView.getLeft(), (float) itemView.getTop(), dX, (float) itemView.getBottom(), paint);
                    c.drawBitmap(bitmap, 96f, (float) itemView.getTop() + height, null);

                } else { // swiping left
                    paint.setColor(getResources().getColor(R.color.primaryColorAccent));
                    bitmap = BitmapFactory.decodeResource(getApplicationContext().getResources(), R.mipmap.ic_circle_bin);
                    float height = (itemView.getHeight() / 2) - (bitmap.getHeight() / 2);
                    float bitmapWidth = bitmap.getWidth();

                    c.drawRect((float) itemView.getRight() + dX, (float) itemView.getTop(), (float) itemView.getRight(), (float) itemView.getBottom(), paint);
                    c.drawBitmap(bitmap, ((float) itemView.getRight() - bitmapWidth) - 96f, (float) itemView.getTop() + height, null);
                }

                super.onChildDraw(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive);


            }
        }

96f 可以替换为您想要的与左/右侧的任何距离。这并不完美，因为当我在适配器中减少到 2 个项目并且我删除了一个位置时，画布不会消失并一直保留到再次设置适配器 - 现在正在尝试解决 - 如果我发现我会更新一个完整的解决方案，但现在这就是我认为您正在寻找的。​​p>

Answer 3

Kotlin 和 OnMove 不可见

    val itemTouchHelperCallback = object : ItemTouchHelper.SimpleCallback(0, ItemTouchHelper.LEFT) {
    override fun onMove(recyclerView: RecyclerView, viewHolder: RecyclerView.ViewHolder, target: RecyclerView.ViewHolder)
    : Boolean = false

    override fun onSwiped(viewHolder: RecyclerView.ViewHolder, direction: Int) {
        val pos = viewHolder.absoluteAdapterPosition
        Toast.makeText(viewHolder.itemView.context, "Deleted $pos", Toast.LENGTH_SHORT).show()
        TODO("REMOVE ITEM")
        viewHolder.bindingAdapter?.notifyItemRemoved(pos)
    }

    override fun clearView(recyclerView: RecyclerView, viewHolder: RecyclerView.ViewHolder) {
        getDefaultUIUtil().clearView((viewHolder as CustomViewHolder).layout)
    }
    override fun onSelectedChanged(viewHolder: RecyclerView.ViewHolder?, actionState: Int) {
        if(actionState == ItemTouchHelper.ACTION_STATE_DRAG){
            (viewHolder as? CustomViewHolder)?.backgroundView?.visibility = View.GONE
        }
        viewHolder?.let { getDefaultUIUtil().onSelected((viewHolder as CustomViewHolder).layout) }
    }
    override fun onChildDraw(c: Canvas, recyclerView: RecyclerView, viewHolder: RecyclerView.ViewHolder, dX: Float, dY: Float, actionState: Int, isCurrentlyActive: Boolean) = getDefaultUIUtil().onDraw(c, recyclerView, (viewHolder as CustomViewHolder).layout, dX, dY, actionState, isCurrentlyActive)
    override fun onChildDrawOver(c: Canvas, recyclerView: RecyclerView, viewHolder: RecyclerView.ViewHolder?, dX: Float, dY: Float, actionState: Int, isCurrentlyActive: Boolean) = getDefaultUIUtil().onDrawOver(c, recyclerView, (viewHolder as CustomViewHolder).layout, dX, dY, actionState, isCurrentlyActive)
}

查看

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/background"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:backgroundTint="@color/red">

    <!-- YOUR Background -->

    </FrameLayout>

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<!-- YOUR View -->

</androidx.constraintlayout.widget.ConstraintLayout>
</FrameLayout>

添加到您的 recyclerView

with(yourRecyclerView){
    layoutManager = LinearLayoutManager(header.context)
    adapter = ItemRvAdapter(onClick, PlaceholderContent.ITEMS)
    ItemTouchHelper(itemTouchHelperCallback).attachToRecyclerView(this)
}