Android使用CardView作为RecyclerView的Item并实现拖拽和左滑删除

引言

CardView是Android 5.0系统之后引入的众多控件之一，实现之后的效果也是比较酷的，它经常被用在RecyclerView和ListView中的Item中。今天我们就来了解一下CardView的属性，然后使用CardView和RecyclerView结合实现一个可以拖拽Item的布局。

CardView的属性

 CardView继承自FrameLayout，所以子控件的布局规则和FrameLayout的一样，是按照层次堆叠的

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

CardView的基本使用

先看一下效果：

这是一个CardView，多个罗列起来看起啦会更酷，好了，我们先看一下代码：

<?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">
     <!--左侧图片-->
     <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="一个很厉害的人"/>
     </LinearLayout>
   </LinearLayout>
 </android.support.v7.widget.CardView>
</LinearLayout>

看完了布局文件，是不是觉得这个布局不仅炫酷而且使用简单，下面我们把它应用到RecyclerView中，看起来会更炫酷。

CardView应用在RecyclerView中

CardView通常会应用在RecyclerView和ListView中，今天我们就讲一讲如何应用在RecyclerView中。我们现在在大多数应用或者手机系统界面中会见到这样的效果：

是不是觉得很棒，下面我们就用CardView和RecyclerView来实现一下这个效果。

布局文件

我们实现这个效果的第一步是先添加依赖库：

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

然后写一下布局文件，Item的布局文件我就直接采用上面的代码了，然后再写一个主界面的布局文件，比较简单，如下：

<?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内代码

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);
   //设置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);
     }
   }
 }
 //制造一个数据源
 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("一个很厉害的人");
   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;
 }
}

来源：http://blog.qiji.tech/archives/16644