Android - 滑动以在背景上关闭带有动画的 RecyclerView
Posted
技术标签:
【中文标题】Android - 滑动以在背景上关闭带有动画的 RecyclerView【英文标题】:Android - Swipe to dismiss RecyclerView with animation on the background 【发布时间】:2018-01-17 21:03:10 【问题描述】:据我了解,为 RecyclerView 实现滑动关闭的一种可能性是在滑动项目下方(如在许多谷歌应用程序中)是为 ItemTouchHelper 实现一个简单的回调并在方法中绘制背景onChildDraw。
这是我的实现:
ItemTouchHelper.SimpleCallback simpleItemTouchCallback = new ItemTouchHelper.SimpleCallback(0, ItemTouchHelper.RIGHT)
// create objects once and avoid allocating them in the onChildDraw method
Drawable background;
Drawable icon;
int iconMargin;
boolean initialized;
private void init()
background = new ColorDrawable(Color.RED);
icon = ContextCompat.getDrawable(mAppContext, R.drawable.ic_delete_white_24dp);
iconMargin = (int) mAppContext.getResources().getDimension(R.dimen.fab_margin);
initialized = true;
@Override
public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target)
return false;
@Override
public void onSwiped(RecyclerView.ViewHolder viewHolder, int swipeDir)
// remove swiped item from the list and notify the adapter
int position = viewHolder.getAdapterPosition();
mItemList.remove(position);
mRecyclerViewAdapter.notifyDataSetChanged();
@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)
if (dX > 0)
View itemView = viewHolder.itemView;
// if viewHolder has been swiped away, don't do anything
if (viewHolder.getAdapterPosition() == -1)
return;
if (!initialized)
init();
// draw background
int dXSwipe = (int) (dX * 1.05); // increase slightly dX to avoid view flickering, compensating loss of precision due to int conversion
background.setBounds(itemView.getLeft(), itemView.getTop(),
itemView.getLeft() + dXSwipe, itemView.getBottom());
background.draw(c);
// draw icon
int top = (itemView.getTop() + itemView.getBottom() - icon.getIntrinsicHeight()) / 2;
int left = itemView.getLeft() + iconMargin;
icon.setBounds(left, top, left + icon.getIntrinsicWidth(), top + icon.getIntrinsicHeight());
icon.draw(c);
super.onChildDraw(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive);
;
ItemTouchHelper itemTouchHelper = new ItemTouchHelper(simpleItemTouchCallback);
itemTouchHelper.attachToRecyclerView(mRecyclerView);
现在,问题是如何在下面的背景中为视图设置动画。这个动画的例子可以从谷歌日历中获取:当滑动事件或提醒时,左侧的图标会根据水平位移量进行放大。
有人知道如何实现吗?是否有必要采用不同的方法,也许在 ViewHolder 中有两个视图,如RecyclerView Swipe with a view below it 所建议的那样相互连接?
【问题讨论】:
【参考方案1】:我知道怎么做。
对于那些感兴趣的人,解决方案是使用两个视图(前景和背景)并随着滑动的进行为背景设置动画。
布局:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_
android:layout_
android:background="@color/item_delete_background">
<ImageView
android:id="@+id/item_delete_icon"
android:layout_
android:layout_
android:layout_gravity="center_vertical"
android:layout_marginLeft="@dimen/fab_margin"
android:layout_marginStart="@dimen/fab_margin"
app:srcCompat="@drawable/ic_delete_white_24dp" />
<android.support.constraint.ConstraintLayout
android:id="@+id/item_layout"
android:layout_
android:layout_
android:background="@color/gray_bg">
<!--recyclerview item layout-->
</android.support.constraint.ConstraintLayout>
</FrameLayout>
视图持有者:
class MyViewHolder extends RecyclerView.ViewHolder
private ConstraintLayout mItemLayout;
private ImageView mItemDeleteIcon;
MyViewHolder(View v)
super(v);
mItemLayout = (ConstraintLayout) v.findViewById(R.id.item_layout);
mEventDeleteIcon = (ImageView) v.findViewById(R.id.item_delete_icon);
View getViewToSwipe()
return mItemLayout;
View getViewToAnimate()
return mItemDeleteIcon;
还有 ItemTouchHelper 回调:
ItemTouchHelper.SimpleCallback mItemTouchCallback = new ItemTouchHelper.SimpleCallback(0, ItemTouchHelper.RIGHT)
// override methods
public void onChildDrawOver(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder,
float dX, float dY,
int actionState, boolean isCurrentlyActive)
// get the view which is currently swiped
ConstraintLayout itemLayout = (ConstraintLayout) ((MyViewHolder) viewHolder).getViewToSwipe();
// calculate relative horizontal displacement
// with proportion dXRelative : 1 = dX : (layoutWidth / 3)
float dXRelative = dX / itemLayout.getWidth() * 3;
// check size boundaries
if (dXRelative > 1)
dXRelative = 1;
if (dXRelative < 0)
dXRelative = 0;
// animate the icon with scaling on both dimensions
((MyViewHolder) viewHolder).getViewToAnimate().animate().scaleX(dXRelative).scaleY(dXRelative).setDuration(0).start();
// call draw over
getDefaultUIUtil().onDrawOver(c, recyclerView, ((MyViewHolder) viewHolder).getViewToSwipe(), dX, dY, actionState, isCurrentlyActive);
;
基本行为(视图持有者中的前景/背景)的实现是在这篇文章之后完成的:Use ItemTouchHelper for Swipe-To-Dismiss with another View displayed behind the swiped out。
希望这可能对某人有用。
【讨论】:
以上是关于Android - 滑动以在背景上关闭带有动画的 RecyclerView的主要内容,如果未能解决你的问题,请参考以下文章
如何使带有自定义背景图像的按钮在Android中显示点击动画