Android 高级UI3 RecyclerView使用Item
2018-04-09 本文已影响497人
香沙小熊
前言
RecyclerView是一个用来替换之前的ListView和GridView的控件，使用的时候，虽然比以前的ListView看起来麻烦，但是其实作为一个高度解耦的控件，复杂一点点换来极大的灵活性，丰富的可操作性，何乐而不为呢。不过今天主要说说它的一个辅助类ItemTouchHelper来实现列表的拖动和滑动删除。
1.什么是ItemTouchHelper
ItemTouchHelper是一个工具类，可实现侧滑删除和拖拽移动，使用这个工具类需要RecyclerView和Callback。同时根据需要重写onMove和onSwiped方法。接下来就来讲述ItemTouchHelper的使用方法。
2.ItemTouchHelper基本使用方法
2.1新建一个拖拽、删除回调接口，
从解耦的角度考虑，我们需要一个接口来实现Adapter和ItemTouchHelper之间涉及数据的操作，因为ItemTouchHelper在完成触摸的各种动画后，就要对Adapter的数据进行操作，比如侧滑删除操作，最后需要调用Adapter的notifyItemRemove()方法来移除该数据。因此我们可以把数据操作的部分抽象成一个接口方法，让ItemTouchHelper.Callback调用该方法即可。具体如下：
新建接口ItemTouchMoveListener:
public interface ItemTouchMoveListener {
/**
* 当拖拽的时候回调
* 可以在方法里面实现:拖拽条目并实现刷新效果
* @param fromPosition 从什么位置拖
* @param toPosition 到什么位置
* @return 是否执行了move
*/
boolean onItemMove(int fromPosition,int toPosition);
/**
* 当条目被移除时回调
* @param position 移除的位置
* @return
*/
boolean onItemRemove(int position);
}
让我们的Adapter实现该接口：
public class QQAdapter extends RecyclerView.Adapter<QQAdapter.MyViewHolder> implements ItemTouchMoveListener {
private List<QQMessage> list;
public QQAdapter(List<QQMessage> list) {
this.list = list;
}
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.listitem, parent, false);
return new MyViewHolder(view);
}
@Override
public void onBindViewHolder(final MyViewHolder holder, int position) {
QQMessage qqMessage = list.get(position);
holder.ivLogo.setImageResource(qqMessage.getLogo());
holder.tvName.setText(qqMessage.getName());
holder.tvLastMsg.setText(qqMessage.getLastMsg());
holder.tvTime.setText(qqMessage.getTime());
}
@Override
public int getItemCount() {
return list.size();
}
@Override
public boolean onItemMove(int fromPosition, int toPosition) {
//1.数据交换 2.刷新
Collections.swap(list, fromPosition, toPosition);
notifyItemMoved(fromPosition, toPosition);
return true;
}
@Override
public boolean onItemRemove(int position) {
list.remove(position);
notifyItemRemoved(position);
return true;
}
static class MyViewHolder extends RecyclerView.ViewHolder {
@BindView(R.id.iv_logo)
CircleImageView ivLogo;
@BindView(R.id.tv_name)
TextView tvName;
@BindView(R.id.tv_time)
TextView tvTime;
@BindView(R.id.tv_lastMsg)
TextView tvLastMsg;
@BindView(R.id.iv_detele)
ImageView ivDetele;
@BindView(R.id.tv_detele)
TextView tvDetele;
public MyViewHolder(View itemView) {
super(itemView);
ButterKnife.bind(this, itemView);
}
}
}
那么我们在ItemTouchHelper.Callback内直接调用接口的方法即可。
2.2新建类继承自ItemTouchHelper.Callback
public class MyItemTouchHelperCallback extends ItemTouchHelper.Callback {
private ItemTouchMoveListener moveListener;
public MyItemTouchHelperCallback(ItemTouchMoveListener moveListener) {
this.moveListener = moveListener;
}
/**
* Callback回调监听时先调用的，用来判断当前是什么动作，比如判断方向
* 作用：哪个方向的拖动
*
* @param recyclerView
* @param viewHolder
* @return
*/
@Override
public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
//方向：up，down，left，right
//常量
// ItemTouchHelper.UP 0x0001
// ItemTouchHelper.DOWN 0x0010
// ItemTouchHelper.LEFT
// ItemTouchHelper.RIGHT
//我要监听的拖拽方向是哪个方向
int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN;
//我要监听的swipe侧滑方向是哪个方向
int swipeFlags = ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT;
int flags = makeMovementFlags(dragFlags, swipeFlags);
return flags;
}
/**
* 是否打开长按拖拽效果
*
* @return
*/
@Override
public boolean isLongPressDragEnabled() {
return true;
}
//当上下移动的时候回调的方法
@Override
public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder srcHolder, RecyclerView.ViewHolder targetHolder) {
// 在拖拽过程中不断地调用adapter.notifyItemMoved(from,to);
if (srcHolder.getItemViewType() != targetHolder.getItemViewType()) {
return false;
}
//在拖拽的过程中不断调用adapter.notifyItemMoved(from,to);
boolean result = moveListener.onItemMove(srcHolder.getAdapterPosition(), targetHolder.getAdapterPosition());
return result;
}
//侧滑的时候回调的方法
@Override
public void onSwiped(RecyclerView.ViewHolder holder, int direction) {
//监听侧滑，1.删除数据 2.调用adapter.notifyItemRemove(position);
moveListener.onItemRemove(holder.getAdapterPosition());
}
//设置滑动item的背景
@Override
public void onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState) {
//判断选中状态
if (actionState != ItemTouchHelper.ACTION_STATE_IDLE) {
viewHolder.itemView.setBackgroundColor(viewHolder.itemView.getContext().getResources().getColor(R.color.colorC));
}
super.onSelectedChanged(viewHolder, actionState);
}
//清除滑动item的背景
@Override
public void clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
// 恢复
viewHolder.itemView.setBackgroundColor(Color.WHITE);
//防止出现复用问题 而导致条目不显示 方式一
viewHolder.itemView.setAlpha(1);//1-0
//设置滑出大小
// viewHolder.itemView.setScaleX(1);
// viewHolder.itemView.setScaleY(1);
super.clearView(recyclerView, viewHolder);
}
//设置滑动时item的背景透明度
@Override
public void onChildDraw(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) {
//dX:水平方向移动的增量(负：往左；正：往右) 0-view.getWidth()
float alpha = 1 - Math.abs(dX) / viewHolder.itemView.getWidth();
if (actionState == ItemTouchHelper.ACTION_STATE_SWIPE) {
//透明度动画
viewHolder.itemView.setAlpha(alpha);//1-0
//设置滑出大小
// viewHolder.itemView.setScaleX(alpha);
// viewHolder.itemView.setScaleY(alpha);
}
// //防止出现复用问题 而导致条目不显示 方式二
// if(alpha==0){
// viewHolder.itemView.setAlpha(1);//1-0
// //设置滑出大小
//// viewHolder.itemView.setScaleX(1);
//// viewHolder.itemView.setScaleY(1);
// }
//此super方法自动处理setTranslationX
super.onChildDraw(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive);
}
}
2.3为RecycleView添加ItemTouchHelper
//条目触目帮助类
ItemTouchHelper.Callback callback = new MyItemTouchHelperCallback(adapter);
itemTouchHelper = new ItemTouchHelper(callback);
itemTouchHelper.attachToRecyclerView(recyclerView);
3.自定义侧滑动画
有时候我们对默认的动画效果可能不满意，需要自己实现想要的动画效果，ItemTouchHelper.Callback提供的onChildDraw方法可以让我们很方便地实现想要的效果。
该效果是比较常见的，用户向左滑动Item的时候，一开始提示的是“左滑删除”，滑动到一定距离后，显示删除的图标，并且随着滑动距离的增加该图标不断变大，达到最大后用户松开手指，该Item被删除。
接下来我们来分析一下怎样实现以上的效果：
首先，要想左滑出现一个删除的方块，可以在LinearLayout放一个这样的“方块”，让它与Item水平并排排列，以下是布局文件：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff"
android:gravity="center_vertical"
android:orientation="horizontal">
<com.haocai.itemtouchhelper.view.CircleImageView
android:id="@+id/iv_logo"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginBottom="8dp"
android:layout_marginLeft="5dp"
android:layout_marginTop="8dp"
android:src="@drawable/logo1" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:orientation="vertical"
android:paddingRight="5dp">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<TextView
android:id="@+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="小王"
android:textColor="#000"
android:textSize="16sp" />
<TextView
android:id="@+id/tv_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="14:31"
android:textColor="#a6a6a6"
android:textSize="12sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dip"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:id="@+id/tv_lastMsg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="一起吃饭"
android:textColor="#808080"
android:textSize="12sp" />
<ImageView
android:id="@+id/iv_pop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true" />
</RelativeLayout>
</LinearLayout>
<FrameLayout
android:layout_width="100dp"
android:layout_height="match_parent"
android:background="#f33213">
<ImageView
android:id="@+id/iv_detele"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="center"
android:src="@drawable/delete"
android:visibility="invisible" />
<TextView
android:id="@+id/tv_detele"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="左滑删除"
android:textColor="#ffffff"
android:textSize="18sp" />
</FrameLayout>
</LinearLayout>
布局文件修改后，我们尝试来滑动一下，发现后面的删除方块并不会出现，这是因为默认的滑动方式是setTranslationX(int)，即是对整个View的滑动，所以无论我们怎样滑动，都不会出现删除方块。因此，我们要改变一个种滑动方式，比如使用scrollTo(int,int)，这种是对View的内容的滑动，所以随着左滑，item会向左滑去，而位于右方的方块自然也就出现了。
接着，我们考虑该“删除眼睛”的图标是怎样从小变大的，这个实现也比较简单，只要根据滑动的距离对该ImageView的LayoutParams.width进行改变就行了，不过要注意限制大小，否则过大会造成图片的失真。当滑动距离等于RecyclerView宽度的一半时，此时松开手会使Item删除，那么我们可以在该滑动距离达到该值时时“眼睛”变得最大，此时可以达到良好的交互效果，提示了用户无需继续滑动即可删除该Item了。
最后我们要考虑的是：在删除了Item或者没删除而滑回原来的位置后，我们要把所做的改变重置一下，否则，会由于RecyclerView的复用而导致其他位置的ViewHolder与当前的ViewHolder所做的改变一样，即造成显示的错误。我们可以在clearView()方法内重置改变，这样就能解决因复用而导致的显示问题了。
最后我们来看看SimpleItemTouchHelperCallback的代码：
public class MyItemTouchHelperCallback3 extends ItemTouchHelper.Callback {
//限制ImageView长度所能增加的最大值
private double ICON_MAX_SIZE = 40;
//ImageView的初始长宽
private int fixedWidth = 120;
private ItemTouchMoveListener moveListener;
public MyItemTouchHelperCallback3(ItemTouchMoveListener moveListener) {
this.moveListener = moveListener;
}
// /**
// * 设置滑动类型标记
// *
// * @param recyclerView
// * @param viewHolder
// * @return
// * 返回一个整数类型的标识，用于判断Item那种移动行为是允许的
// */
// @Override
// public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
// //START 右向左 END左向右 LEFT 向左 RIGHT向右 UP向上
// //如果某个值传0，表示不触发该操作
// return makeMovementFlags(ItemTouchHelper.UP|ItemTouchHelper.DOWN,ItemTouchHelper.END );
// }
/**
* Callback回调监听时先调用的，用来判断当前是什么动作，比如判断方向
* 作用：哪个方向的拖动
*
* @param recyclerView
* @param viewHolder
* @return
*/
@Override
public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
//方向：up，down，left，right
//常量
// ItemTouchHelper.UP 0x0001
// ItemTouchHelper.DOWN 0x0010
// ItemTouchHelper.LEFT
// ItemTouchHelper.RIGHT
//我要监听的拖拽方向是哪个方向
int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN;
//我要监听的swipe侧滑方向是哪个方向
int swipeFlags = ItemTouchHelper.LEFT ;
int flags = makeMovementFlags(dragFlags, swipeFlags);
return flags;
}
/**
* 是否打开长按拖拽效果
*
* @return
*/
@Override
public boolean isLongPressDragEnabled() {
return true;
}
/**
* Item是否支持滑动
*
* @return
* true 支持滑动操作
* false 不支持滑动操作
*/
@Override
public boolean isItemViewSwipeEnabled() {
return true;
}
//当上下移动的时候回调的方法
@Override
public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder srcHolder, RecyclerView.ViewHolder targetHolder) {
// 在拖拽过程中不断地调用adapter.notifyItemMoved(from,to);
if (srcHolder.getItemViewType() != targetHolder.getItemViewType()) {
return false;
}
//在拖拽的过程中不断调用adapter.notifyItemMoved(from,to);
boolean result = moveListener.onItemMove(srcHolder.getAdapterPosition(), targetHolder.getAdapterPosition());
return result;
}
//侧滑的时候回调的方法
@Override
public void onSwiped(RecyclerView.ViewHolder holder, int direction) {
//监听侧滑，1.删除数据 2.调用adapter.notifyItemRemove(position);
moveListener.onItemRemove(holder.getAdapterPosition());
}
//设置滑动item的背景
@Override
public void onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState) {
//判断选中状态
if (actionState != ItemTouchHelper.ACTION_STATE_IDLE) {
viewHolder.itemView.setBackgroundColor(viewHolder.itemView.getContext().getResources().getColor(R.color.colorC));
}
super.onSelectedChanged(viewHolder, actionState);
}
//清除滑动item的背景
@Override
public void clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
// 恢复
viewHolder.itemView.setBackgroundColor(Color.WHITE);
//防止出现复用问题 而导致条目不显示 方式一
viewHolder.itemView.setAlpha(1);//1-0
//设置滑出大小
// viewHolder.itemView.setScaleX(1);
// viewHolder.itemView.setScaleY(1);
QQAdapter.MyViewHolder myViewHolder = (QQAdapter.MyViewHolder)viewHolder;
//重置改变，防止由于复用而导致的显示问题
viewHolder.itemView.setScrollX(0);
myViewHolder.tvDetele.setText("左滑删除");
FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) myViewHolder.ivDetele.getLayoutParams();
params.width = 150;
params.height = 150;
myViewHolder.ivDetele.setLayoutParams(params);
myViewHolder.ivDetele.setVisibility(View.INVISIBLE);
super.clearView(recyclerView, viewHolder);
}
//设置滑动时item的背景透明度
@Override
public void onChildDraw(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) {
QQAdapter.MyViewHolder myViewHolder = (QQAdapter.MyViewHolder)viewHolder;
//仅对侧滑状态下的效果做出改变
if (actionState ==ItemTouchHelper.ACTION_STATE_SWIPE){
Log.d("http","4444");
//如果dX小于等于删除方块的宽度，那么我们把该方块滑出来
if (Math.abs(dX) <= getSlideLimitation(viewHolder)){
viewHolder.itemView.scrollTo(-(int) dX,0);
}
//如果dX还未达到能删除的距离，此时慢慢增加“眼睛”的大小，增加的最大值为ICON_MAX_SIZE
else if (Math.abs(dX) <= recyclerView.getWidth() / 2){
double distance = (recyclerView.getWidth() / 2 -getSlideLimitation(viewHolder));
double factor = ICON_MAX_SIZE / distance;
double diff = (Math.abs(dX) - getSlideLimitation(viewHolder)) * factor;
if (diff >= ICON_MAX_SIZE)
diff = ICON_MAX_SIZE;
myViewHolder.tvDetele.setText(""); //把文字去掉
myViewHolder.ivDetele.setVisibility(View.VISIBLE); //显示眼睛
FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) myViewHolder.ivDetele.getLayoutParams();
params.width = (int) (fixedWidth + diff);
params.height = (int) (fixedWidth + diff);
myViewHolder.ivDetele.setLayoutParams(params);
}
}else {
//拖拽状态下不做改变，需要调用父类的方法
super.onChildDraw(c,recyclerView,viewHolder,dX,dY,actionState,isCurrentlyActive);
}
}
/**
* 获取删除方块的宽度
*/
public int getSlideLimitation(RecyclerView.ViewHolder viewHolder){
ViewGroup viewGroup = (ViewGroup) viewHolder.itemView;
return viewGroup.getChildAt(2).getLayoutParams().width;
}
}
自定义侧滑动画
