使用 ItemTouchHelper 进行滑动关闭,另一个视图显示在滑动的后面
Use ItemTouchHelper for Swipe-To-Dismiss with another View displayed behind the swiped out
我有一个 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 标识的视图。
使用 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 可以替换为距 left/right 一侧您想要的任何距离。这并不完美,因为当我在适配器中减少到 2 个项目并且我删除了一个位置 canvas 不会消失并一直保留到再次设置适配器 - 现在正在尝试解决 - 我会如果我找到完整的解决方案,请更新,但现在这就是我认为你正在寻找的。
我已经完成了回收站视图项目的以下布局结构:
<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 class 中,我扩展了以下方法:
@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 上绘图的麻烦。您还可以 select 项目内的其他视图,例如保存被触摸的视图并 return 它并让项目的子项也可滑动。
附加到回收站视图:
final ItemTouchHelper.Callback callback = new RemovableItemTouchHelperCallback(mAdapter);
final ItemTouchHelper touchHelper = new ItemTouchHelper(callback);
touchHelper.attachToRecyclerView(recyclerView)
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)
}
我有一个 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 标识的视图。
使用 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 可以替换为距 left/right 一侧您想要的任何距离。这并不完美,因为当我在适配器中减少到 2 个项目并且我删除了一个位置 canvas 不会消失并一直保留到再次设置适配器 - 现在正在尝试解决 - 我会如果我找到完整的解决方案,请更新,但现在这就是我认为你正在寻找的。
我已经完成了回收站视图项目的以下布局结构:
<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 class 中,我扩展了以下方法:
@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 上绘图的麻烦。您还可以 select 项目内的其他视图,例如保存被触摸的视图并 return 它并让项目的子项也可滑动。
附加到回收站视图:
final ItemTouchHelper.Callback callback = new RemovableItemTouchHelperCallback(mAdapter);
final ItemTouchHelper touchHelper = new ItemTouchHelper(callback);
touchHelper.attachToRecyclerView(recyclerView)
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)
}