Android使用CardView作為RecyclerView的Item并實(shí)現(xiàn)拖拽和左滑刪除

2019-12-12 01:36:47

字體：大中小

供稿：網(wǎng)友

引言

CardView是Android 5.0系統(tǒng)之后引入的眾多控件之一，實(shí)現(xiàn)之后的效果也是比較酷的，它經(jīng)常被用在RecyclerView和ListView中的Item中。今天我們就來(lái)了解一下CardView的屬性，然后使用CardView和RecyclerView結(jié)合實(shí)現(xiàn)一個(gè)可以拖拽Item的布局。

CardView的屬性

CardView繼承自FrameLayout，所以子控件的布局規(guī)則和FrameLayout的一樣，是按照層次堆疊的

下面是CardView的一些常用屬性：

CardView的基本使用

先看一下效果：

這是一個(gè)CardView，多個(gè)羅列起來(lái)看起啦會(huì)更酷，好了，我們先看一下代碼：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  xmlns:app="http://schemas.android.com/apk/res-auto"  android:orientation="vertical" android:paddingTop="10dp"  android:layout_width="match_parent" android:layout_height="wrap_content">   <android.support.v7.widget.CardView    android:layout_width="match_parent" android:layout_height="60dp"    android:layout_marginLeft="10dp" android:layout_marginRight="10dp"    app:contentPaddingLeft="20dp" app:cardBackgroundColor="@color/colorPrimary"    app:cardCornerRadius="5dp" app:cardElevation="5dp"    android:layout_marginBottom="10dp"    app:cardPreventCornerOverlap="true">    <LinearLayout      android:layout_width="match_parent" android:layout_height="match_parent"      android:orientation="horizontal" android:gravity="center_vertical">      <!--左側(cè)圖片-->      <ImageView        android:layout_width="50dp" android:layout_height="50dp"        android:src="@mipmap/ic_launcher"/>      <LinearLayout        android:layout_width="match_parent" android:layout_height="match_parent"        android:orientation="vertical" android:layout_marginLeft="10dp"        android:gravity="center_vertical">        <!--姓名-->        <TextView          android:id="@+id/txt_name" android:layout_width="wrap_content"          android:layout_height="wrap_content" android:textSize="16sp"          android:textColor="@android:color/white" android:text="王二"/>        <!--描述-->        <TextView          android:id="@+id/txt_describe" android:layout_width="wrap_content"          android:layout_height="wrap_content" android:layout_marginTop="5dp"          android:textSize="12sp" android:textColor="@android:color/darker_gray"          android:text="一個(gè)很厲害的人"/>      </LinearLayout>    </LinearLayout>  </android.support.v7.widget.CardView></LinearLayout>

看完了布局文件，是不是覺(jué)得這個(gè)布局不僅炫酷而且使用簡(jiǎn)單，下面我們把它應(yīng)用到RecyclerView中，看起來(lái)會(huì)更炫酷。

CardView應(yīng)用在RecyclerView中

CardView通常會(huì)應(yīng)用在RecyclerView和ListView中，今天我們就講一講如何應(yīng)用在RecyclerView中。我們現(xiàn)在在大多數(shù)應(yīng)用或者手機(jī)系統(tǒng)界面中會(huì)見(jiàn)到這樣的效果：

是不是覺(jué)得很棒，下面我們就用CardView和RecyclerView來(lái)實(shí)現(xiàn)一下這個(gè)效果。

布局文件

我們實(shí)現(xiàn)這個(gè)效果的第一步是先添加依賴庫(kù)：

implementation 'com.android.support:recyclerview-v7:26.+'implementation 'com.android.support:cardview-v7:26.+'

然后寫一下布局文件，Item的布局文件我就直接采用上面的代碼了，然后再寫一個(gè)主界面的布局文件，比較簡(jiǎn)單，如下：

<?xml version="1.0" encoding="utf-8"?><LinearLayout 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"  android:orientation="vertical" android:paddingTop="10dp"  tools:context="com.jyx.demo.myapplication.MainActivity">   <android.support.v7.widget.RecyclerView    android:id="@+id/my_recyclerView"    android:layout_width="match_parent"    android:layout_height="wrap_content"/> </LinearLayout>

Activity內(nèi)代碼

public class MainActivity extends AppCompatActivity {  private RecyclerView mRecyclerView;   @Override  protected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);     mRecyclerView = (RecyclerView) findViewById(R.id.my_recyclerView);    //設(shè)置LayoutManager    LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);    linearLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);    mRecyclerView.setLayoutManager(linearLayoutManager);     //綁定adapter    MyAdapter myAdapter = new MyAdapter(this);    mRecyclerView.setAdapter(myAdapter);     }  //adapter  class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {     LayoutInflater mInflater;    List<MData> mList = addData();     public MyAdapter(Context context) {      mInflater = LayoutInflater.from(context);    }     @Override    public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {      View view = mInflater.inflate(R.layout.item_my_recyclerview,parent,false);      ViewHolder viewHolder = new ViewHolder(view);      return viewHolder;    }     @Override    public void onBindViewHolder(MyAdapter.ViewHolder holder, int position) {      holder.mName.setText(mList.get(position).getUserName());      holder.mDescribe.setText(mList.get(position).getDescription());    }     @Override    public int getItemCount() {      return mList.size();    }     public class ViewHolder extends RecyclerView.ViewHolder {      private TextView mName;      private TextView mDescribe;      public ViewHolder(View itemView) {        super(itemView);        mName = itemView.findViewById(R.id.txt_name);        mDescribe = itemView.findViewById(R.id.txt_describe);      }    }  }  //制造一個(gè)數(shù)據(jù)源  private class MData{    String userName;    String description;     public String getUserName() {      return userName;    }     public void setUserName(String userName) {      this.userName = userName;    }     public String getDescription() {      return description;    }     public void setDescription(String description) {      this.description = description;    }  }  private List<MData> addData(){    List<MData> list = new ArrayList();     MData mData = new MData();    mData.setUserName("王二");    mData.setDescription("一個(gè)很厲害的人");    list.add(mData);     mData = new MData();    mData.setUserName("張三");    mData.setDescription("呵呵");    list.add(mData);     mData = new MData();    mData.setUserName("李四");    mData.setDescription("嘻嘻");    list.add(mData);     mData = new MData();    mData.setUserName("趙一");    mData.setDescription("呵呵");    list.add(mData);     mData = new MData();    mData.setUserName("錢多");    mData.setDescription("地主家的傻兒子");    list.add(mData);    return list;  }}

好了，這就是一個(gè)沒(méi)有任何效果的列表界面，我一看一下效果：

ItemTouchHelper

想實(shí)現(xiàn)拖拽和滑動(dòng)刪除的效果，很可惜RecyclerView并沒(méi)有提供現(xiàn)成的API供我們使用，但是SDK為我們提供了ItemTouchHelper這樣一個(gè)工具類幫助我們來(lái)輕松實(shí)現(xiàn)這些功能，我們先來(lái)了解一下ItemTouchHelper。官方文檔是這樣介紹的：

This is a utility class to add swipe to dismiss and drag & drop support to RecyclerView.It works with a RecyclerView and a Callback class, which configures what type of interactions are enabled and also receives events when user performs these actions.Depending on which functionality you support, you should override onMove(RecyclerView, ViewHolder, ViewHolder) and / or onSwiped(ViewHolder, int).

大致意思就是，這是個(gè)工具類，可以實(shí)拖拽移動(dòng)和策劃刪除，使用這個(gè)工具需要RecyclerView和Callback。同時(shí)需要重寫onMove()和onSwiped()方法。接下來(lái)就講講如何使用ItemTouchHlper。

1.新建一個(gè)接口，并且讓Adapter實(shí)現(xiàn)

我們選擇使用一個(gè)接口來(lái)實(shí)現(xiàn)Adapter和ItemTouchHelper之間涉及數(shù)據(jù)的操作，因?yàn)镮temTouchHelper完成觸摸的各種動(dòng)畫以后，就要對(duì)Adapter的數(shù)據(jù)進(jìn)行操作，比如我們?cè)趥?cè)滑刪除以后，最后需要調(diào)用Adapter的notifyItemRemove()方法來(lái)移除該數(shù)據(jù)。所以我們可以把數(shù)據(jù)操作的部分抽象成一個(gè)接口方法，讓Callbac調(diào)用它即可。具體如下：

新建一個(gè)接口:

ItemTouchHelperAdapter

public interface ItemTouchHelperAdapter {  //移動(dòng)item  public void onItemMove(int fromPosition,int toPosition);  //刪除item  public void onItemDelete(int position);}

之后讓Adapter實(shí)現(xiàn)這個(gè)接口

class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> implements ItemTouchHelperAdapter{     LayoutInflater mInflater;    List<MData> mList = addData();     public MyAdapter(Context context) {      mInflater = LayoutInflater.from(context);    }     @Override    public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {      View view = mInflater.inflate(R.layout.item_my_recyclerview,parent,false);      ViewHolder viewHolder = new ViewHolder(view);      return viewHolder;    }     @Override    public void onBindViewHolder(MyAdapter.ViewHolder holder, int position) {      holder.mName.setText(mList.get(position).getUserName());      holder.mDescribe.setText(mList.get(position).getDescription());    }     @Override    public int getItemCount() {      return mList.size();    }     @Override    public void onItemMove(int fromPosition, int toPosition) {      //交換位置      Collections.swap(mList,fromPosition,toPosition);      notifyItemMoved(fromPosition,toPosition);    }     @Override    public void onItemDelete(int position) {      //移除數(shù)據(jù)      mList.remove(position);      notifyItemRemoved(position);    }     public class ViewHolder extends RecyclerView.ViewHolder {      private TextView mName;      private TextView mDescribe;      public ViewHolder(View itemView) {        super(itemView);        mName = itemView.findViewById(R.id.txt_name);        mDescribe = itemView.findViewById(R.id.txt_describe);      }    }  }

接下來(lái)我們直接在Callback中直接調(diào)用接口里的方法就可以了。

2.新建Callback方法，繼承ItemTouchHelper.Callback

官方文檔已經(jīng)告訴我們，使用ItemTouchHelper需要一個(gè)Callback，這個(gè)Callback是ItemTouchHelper.Callback的子類，我們需要新建一個(gè)類來(lái)繼承ItemTouchHelper.Callback，然后重寫一些方法來(lái)實(shí)現(xiàn)我們的需求。代碼如下：

public class myItemTouchHelperCallBack extends ItemTouchHelper.Callback{  private ItemTouchHelperAdapter itemTouchHelperAdapter;   public myItemTouchHelperCallBack(ItemTouchHelperAdapter itemTouchHelperAdapter) {    this.itemTouchHelperAdapter = itemTouchHelperAdapter;  }   @Override  public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {    //允許上下拖動(dòng)    int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN;    //允許從右向左滑動(dòng)    int swipeFlags = ItemTouchHelper.LEFT;    return makeMovementFlags(dragFlags,swipeFlags);  }   @Override  public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {    //onItemMove接口里的方法    itemTouchHelperAdapter.onItemMove(viewHolder.getAdapterPosition(),target.getAdapterPosition());    return true;  }   @Override  public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {    //onItemDelete接口里的方法    itemTouchHelperAdapter.onItemDelete(viewHolder.getAdapterPosition());  }   @Override  public boolean isLongPressDragEnabled() {    //該方法返回值為true時(shí)，表示支持長(zhǎng)按ItemView拖動(dòng)    return true;  }   @Override  public boolean isItemViewSwipeEnabled() {    //該方法返回true時(shí)，表示如果用戶觸摸并且左滑了view，那么可以執(zhí)行滑動(dòng)刪除操作，就是可以調(diào)用onSwiped()方法    return true;  }}

ItemTouchHelper.Callback還有其他幾個(gè)常用方法：

public void onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState)：從靜止?fàn)顟B(tài)變?yōu)橥献Щ蛘呋瑒?dòng)的時(shí)候會(huì)調(diào)用該方法，參數(shù)actionState表示當(dāng)前狀態(tài)。
public void clearView(RecyclerView recyclerView, ViewHolder viewHolder)：當(dāng)用戶操作完某個(gè)item并且動(dòng)畫也結(jié)束后會(huì)調(diào)用該方法，一般我們?cè)谠摲椒▋?nèi)恢復(fù)ItemView的初始狀態(tài)，防止由于復(fù)用而產(chǎn)生的錯(cuò)亂問(wèn)題。
public void onChildDraw(…)：我們可以在這個(gè)方法內(nèi)實(shí)現(xiàn)我們自定義的交互規(guī)則或者自定義動(dòng)畫。

這樣下來(lái)我們就只剩下一步了。

3.為RecyclerView添加ItemTouchHelper

代碼如下：

  ItemTouchHelper.Callback callback = new myItemTouchHelperCallBack(myAdapter);  ItemTouchHelper touchHelper = new ItemTouchHelper(callback);  touchHelper.attachToRecyclerView(mRecyclerView);

這樣，我們就實(shí)現(xiàn)了我們的需求，我們一起來(lái)看看效果：