Android学习笔记030之RecyclerView和CardView实现拖拽和滑动

最新推荐文章于 2024-03-29 19:07:49 发布

wenzhang1102

最新推荐文章于 2024-03-29 19:07:49 发布

阅读量2.3k

点赞数

分类专栏： Android学习文章标签： android 框架控件设计

本文链接：https://blog.csdn.net/solo_talk/article/details/51940675

版权

Android学习专栏收录该内容

51 篇文章 1 订阅

订阅专栏

Android学习笔记030之RecyclerView和CardView实现拖拽和滑动

　　在上一篇中，我们介绍了SwiperefreshLayout、RecyclerView和CardView，还用着三个控件组合实现了一些效果，下拉刷新也不在需要用第三方的框架，实现的效果也比较符合Google的MD设计，这一节，我们使用RecyclerView和CardView组合实现拖拽和滑动删除的效果。

RecyclerView实现拖拽和滑动删除非常简单，只需要实现下面的三句代码：

     //关联RecyclerView
    ItemTouchHelper.Callback callback=new ItemTouchCallback(dragAdapter);
    ItemTouchHelper itemTouchHelper=new ItemTouchHelper(callback);
    itemTouchHelper.attachToRecyclerView(rv_drag_list);

　　我们看到，要实现拖拽和滑动删除需要实现一个适配器和一个回调接口。其中，这个回调接口需要我们自己去实现，重点就是实现的这个回调接口，下面我们具体介绍一下这个自定义的回调接口：

我们自定义一个类，实现ItemTouchHelper.Callback这个接口，先看一下具体的自定义回调接口的源码

package com.example.newapidemo.common;

import android.graphics.Canvas;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.helper.ItemTouchHelper;

/**
 * Created by Devin on 2016/7/15.
 */
public class ItemTouchCallback extends ItemTouchHelper.Callback {
public static final float ALPHA_FULL = 1.0f;
private ItemTouchAdapter itemTouchAdapter;

public ItemTouchCallback(ItemTouchAdapter itemTouchAdapter) {
    this.itemTouchAdapter = itemTouchAdapter;
}

/**
 * 指定可以支持的拖放和滑动的方向
 * List类型的RecyclerView，拖拽只有UP、DOWN
 * Grid类型的则有UP、DOWN、LEFT、RIGHT四个方向
 * <p/>
 * dragFlags 是拖拽标志，swipeFlags是滑动标志，在Grid中把swipeFlags设置为0，表示不处理滑动操作。
 *
 * @param recyclerView
 * @param viewHolder
 * @return
 */
@Override
public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
    //判断recyclerView传入的LayoutManager是不是GridLayoutManager
    if (recyclerView.getLayoutManager() instanceof GridLayoutManager) {
        //Grid的拖拽方向，上、下、左、右
        final int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN | ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT;
        //设置为0，表示不支持滑动
        final int swipeFlags = 0;
        //创建拖拽或者滑动标志的快速方式
        return makeMovementFlags(dragFlags, swipeFlags);
    } else {
        //List类型的拖拽方向，上或者下
        final int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN;
        //List类型支持滑动，左或者右
        final int swipeFlags = ItemTouchHelper.START | ItemTouchHelper.END;
        //创建拖拽或者滑动标志的快速方式
        return makeMovementFlags(dragFlags, swipeFlags);
    }
}

/**
 * 告诉ItemTouchHelper是否需要RecyclerView支持长按拖拽,返回true是支持，false是不支持
 *
 * @return
 */
@Override
public boolean isLongPressDragEnabled() {
    return true;
}

/**
 * 告诉ItemTouchHelper是否需要RecyclerView支持滑动,返回true是支持，false是不支持
 *
 * @return
 */
@Override
public boolean isItemViewSwipeEnabled() {
    return true;
}

/**
 * 当拖拽开始的时候调用
 *
 * @param viewHolder
 * @param actionState
 */
@Override
public void onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState) {
    //拖拽的时候改变一下选中Item的颜色
    if (actionState != ItemTouchHelper.ACTION_STATE_IDLE) {
        if (viewHolder instanceof ItemTouchHelperViewHolder) {
            //让ViewHolder知道Item开始选中
            ItemTouchHelperViewHolder itemViewHolder = (ItemTouchHelperViewHolder) viewHolder;
            //回调ItemTouchHelperVIewHolder的方法
            itemViewHolder.onItemSelected();
        }
    }
    super.onSelectedChanged(viewHolder, actionState);
}

/**
 * 当拖拽结束的时候调用
 *
 * @param recyclerView
 * @param viewHolder
 */
@Override
public void clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
    super.clearView(recyclerView, viewHolder);
    viewHolder.itemView.setAlpha(ALPHA_FULL);
    if (viewHolder instanceof ItemTouchHelperViewHolder) {
        ItemTouchHelperViewHolder itemViewHolder = (ItemTouchHelperViewHolder) viewHolder;
        //Item移动完成之后的回调
        itemViewHolder.onItemClear();
    }
}

/**
 * 当ItemTouchHelper要拖动的Item从原来位置拖动到新的位置的时候调用
 * 当我们拖拽的时候调用这个方法
 *
 * @param recyclerView
 * @param viewHolder
 * @param target
 * @return
 */
@Override
public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {
    //如果两个item不是一个类型的，我们让他不可以拖拽
    if (viewHolder.getItemViewType() != target.getItemViewType()) {
        return false;
    }

    //得到拖动ViewHolder的position
    int fromPosition = viewHolder.getAdapterPosition();
    //得到目标ViewHolder的position
    int toPosition = target.getAdapterPosition();
    itemTouchAdapter.onItemMove(fromPosition, toPosition);

    return true;
}

/**
 * 当ViewHolder滑动的时候调用
 * 当滑动Item的时候调用此方法
 *
 * @param viewHolder
 * @param direction
 */
@Override
public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {
    itemTouchAdapter.onItemDismiss(viewHolder.getAdapterPosition());
}

/**
 * 由 ItemTouchHelper 在 RecyclerView 的 onDraw方法中回调调用
 *
 * @param c
 * @param recyclerView
 * @param viewHolder
 * @param dX
 * @param dY
 * @param actionState
 * @param isCurrentlyActive
 */
@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) {
        final float alpha = ALPHA_FULL - Math.abs(dX) / (float) viewHolder.itemView.getWidth();
        viewHolder.itemView.setAlpha(alpha);
        viewHolder.itemView.setTranslationX(dX);
    } else {
        super.onChildDraw(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive);
    }
}
}

除了这个回调接口之外，我们还定义了几个接口

package com.example.newapidemo.common;
/**
 * Created by Devin on 2016/7/15.
 */
public interface ItemTouchHelperViewHolder {
/**
 * 当Item开始拖拽或者滑动的时候调用
 */
void onItemSelected();

/**
 * 当Item完成拖拽或者滑动的时候调用
 */
void onItemClear();
}

这个接口是实现拖拽或者滑动完成或者正在拖拽或滑动的回调，我们可以定义拖拽或者滑动时候一些样式或者其他想要实现的效果。

还有一个就是适配器需要实现的接口：

package com.example.newapidemo.common;

/**
 * Created by Devin on 2016/7/15.
 */
public interface ItemTouchAdapter {
/**
 * Item已经移动的足够远的时候调用
 *
 * @param fromPosition
 * @param toPosition
 * @return
 */
boolean onItemMove(int fromPosition, int toPosition);

/**
 * 当Item滑动取消的时候调用
 *
 * @param position
 */
void onItemDismiss(int position);
}

这个接口就不在描述很多了。

在我们实现那个回调接口的时候，就有做判断，当RecyclerView时List列表样式的时候就可以实现滑动删除和拖拽两种效果，但是是Grid网格效果的时候就只能拖拽。下面我们看一下适配器的实现：

package com.example.newapidemo.adapter;

import android.content.Context;
import android.graphics.Color;
import android.support.v7.widget.CardView;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.example.newapidemo.R;
import com.example.newapidemo.common.ItemTouchAdapter;
import com.example.newapidemo.common.ItemTouchHelperViewHolder;
import com.example.newapidemo.domain.RVTest;

import java.util.Collections;
import java.util.List;

/**
 * Created by Devin on 2016/7/18.
 */
public class RVDragAdapter extends RecyclerView.Adapter<RVDragAdapter.RVDragViewHolder> implements ItemTouchAdapter {
private Context mContext;
private List<RVTest> datas;

public RVDragAdapter(Context mContext, List<RVTest> datas) {
    this.mContext = mContext;
    this.datas = datas;
}

@Override
public RVDragViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    View view = LayoutInflater.from(mContext).inflate(R.layout.item_fragment_list, parent, false);
    return new RVDragViewHolder(view);
}

@Override
public void onBindViewHolder(RVDragViewHolder holder, int position) {
    holder.tv_drag_list.setText(datas.get(position).getContent());
}

@Override
public int getItemCount() {
    return datas.size();
}

@Override
public boolean onItemMove(int fromPosition, int toPosition) {
    Collections.swap(datas, fromPosition, toPosition);
    notifyItemMoved(fromPosition, toPosition);
    return true;
}

@Override
public void onItemDismiss(int position) {
    datas.remove(position);
    notifyItemRemoved(position);
}

public static class RVDragViewHolder extends RecyclerView.ViewHolder implements ItemTouchHelperViewHolder {
    TextView tv_drag_list;
    CardView cv_drag;

    public RVDragViewHolder(View itemView) {
        super(itemView);
        tv_drag_list
                = (TextView) itemView.findViewById(R.id.tv_drag_list);
        cv_drag = (CardView) itemView.findViewById(R.id.cv_drag);
    }

    //设置item选中拖拽的时候调用
    @Override
    public void onItemSelected() {
        itemView.setBackgroundColor(Color.GRAY);
        cv_drag.setRadius(R.dimen.cv_drag);
    }

    //当Item拖拽完成时候调用
    @Override
    public void onItemClear() {
        itemView.setBackgroundColor(Color.WHITE);
        cv_drag.setRadius(R.dimen.cv_drag);
    }
}
}

适配器的实现跟其他实现RecyclerView的适配器差不多，但是必须要实现ItemTouchAdapter这个接口，ViewHolder也需要实现ItemTouchHelperViewHolder这个接口，这是我们自定义的接口，里面提供我们的几个回调，可以更改一些设置，在这里就简单的实现拖拽之后Item的一些简单样式。

最后是Fragment的实现：

 @Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.fragment_rvlist, container, false);
    rv_drag_list = (RecyclerView) view.findViewById(R.id.rv_drag_list);
    initData();
    rv_drag_list.setLayoutManager(new LinearLayoutManager(getContext()));
    dragAdapter = new RVDragAdapter(getContext(), datas);
    rv_drag_list.setAdapter(dragAdapter);
    //关联RecyclerView
    ItemTouchHelper.Callback callback=new ItemTouchCallback(dragAdapter);
    ItemTouchHelper itemTouchHelper=new ItemTouchHelper(callback);
    itemTouchHelper.attachToRecyclerView(rv_drag_list);
    return view;
}

private void initData() {
    if (datas == null) {
        datas = new ArrayList<>();
    }
    for (int i = 0; i < 20; i++) {
        datas.add(new RVTest(i, "测试数据第 " + (i + 1) + " 条"));
    }

}

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.fragment_rvgrid, container, false);
    rv_drag_grid = (RecyclerView) view.findViewById(R.id.rv_drag_grid);
    rv_drag_grid.setLayoutManager(new GridLayoutManager(getContext(), 2));
    initData();
    adapter=new RVDragAdapter(getContext(),datas);
    rv_drag_grid.setAdapter(adapter);
    ItemTouchCallback callback=new ItemTouchCallback(adapter);
    ItemTouchHelper itemTouchHelper=new ItemTouchHelper(callback);
    itemTouchHelper.attachToRecyclerView(rv_drag_grid);
    return view;
}
private void initData() {
    if (datas == null) {
        datas = new ArrayList<>();
    }
    for (int i = 0; i < 40; i++) {
        datas.add(new RVTest(i, "第 " + (i + 1) + " 条数据"));
    }

}

这里都是很简单的实现，下面我们看一下效果图：