Andorid--RecyclerView与CardView实现卡片列表

RecyclerView的基本简介：

RecyclerView是谷歌在5.+推出的一个列表控件，该控件是ListView控件的升级版，相对于ListView而言，使用起来更加灵活、更加丰富。

CardView的基本简介：

CardView谷歌在5.+推出的一个卡片视图这样的一种控件，主要是以卡片形式显示内容。同时该卡片内容的布局还可以设置圆角和阴影。

综合所述：

在日常开发当中，相信不少开发者在平时看到列表数据信息的展示要么就是使用ListView，要么就是使用RecyclerView，确实如此，不过现在不少老前辈还是会使用ListView来实现，至于为什么呢？可能是习惯性的原因。但是也有一部门创意小青年喜欢用更加丰富多彩的RecyclerView来实现。虽然这两个使用确实很普遍了，然而目前越来越多手机APP当中，逐渐增加了一些RecyclerView+CardView的使用，比如腾讯新闻、美团等等，他们的列表虽然看似和普通列表一样，但是大家有没有发现美团团购电影票列表里面的item下面有一种阴影的效果，同时还增加了圆角效果等等，当然了我这里是使用了Recycler的配合使用，同时也可以使用ListView配合CardView进行使用。那么有关于这些效果是怎么完成的？其实就是通过我们今天所要学习的RecyclerView与CardView的使用去完成的，在这里，为了让大家能够看到效果，我特意去网上找了张图片，希望大家一看能有所体会。

确实漂亮了许多，不得不佩服谷歌工程师们提供了CardView这么好的控件给予我们开发者去开发。其实CardView卡片视图无非就是我们平时所谓列表中的item，在这里大家如果不能理解没关系，下面将结合一个案例，让大家更好的去理解。在这里，由于我们本章介绍的是RecyclerView和CradView的使用，所以在使用这两个控件之前，我们分别需要在Andorid Studio中的Gradle中添加CardView包的依赖、和RecyclerView包的依赖之后，才可进行使用。如果大家没有添加依赖而直接进行使用的话，在layout中是写不出这两个控件出来的，反而有可能报错，所以使用之前我们必须添加如下依赖信息。至于用eclipse开发者，请自行到网上查找依赖包。

RecyclerView包的依赖代码如下：

compile 'com.android.support:recyclerview-v7:25.0.+'

CardView包的依赖代码如下：

compile 'com.android.support:cardview-v7:25.0.+'

由于我目标版本是25，所以我这里设置了-v7.25,如果大家发现出错了，把版本改成你对应的版本即可，现在我们添加好了依赖之后，就可以开始进行使用了，为了更好的使用CardView，所以下面我们先来学习一下CardView的基本属性。

CardView基本属性:
CardView是一个新增加的UI控件，回首往日，我们需要自定义shape文件进行实现圆角和阴影的设计，现在google的大牛已经把它设计为CardView，
然而还提供了很多属性给我们设置进行使用。下面我们看看CardView新增了哪些属性：

  
  
CardView_cardBackgroundColor 设置背景色
CardView_cardCornerRadius 设置圆角大小
CardView_cardElevation 设置z轴阴影
CardView_cardMaxElevation 设置z轴最大高度值
CardView_cardUseCompatPadding 是否使用CompadPadding
CardView_cardPreventCornerOverlap 是否使用PreventCornerOverlap
CardView_contentPadding 内容的padding
CardView_contentPaddingLeft 内容的左padding
CardView_contentPaddingTop 内容的上padding
CardView_contentPaddingRight 内容的右padding
CardView_contentPaddingBottom 内容的底padding
  
  

   
   
波纹点击效果:
  
  
  
  

   
   默认情况，CardView是不可点击的，并且没有任何的触摸反馈效果。
触摸反馈动画在用户点击CardView时可以给用户以视觉上的反馈。
实现这种行为，你必须提供一下属性:android:clickable和android:foreground。

  
  
  
  

   
   
<android.support.v7.widget.CardView
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:card_view="http://schemas.android.com/apk/res-auto"
  ...
  android:clickable="true"
  android:foreground="?android:attr/selectableItemBackground">
  ...
</android.support.v7.widget.CardView>

   
   

   
   这里值得注意的是：此种效果必须在5.0机器上才有效.
  
  
  
  

   
   

  
  
  
  

   
   

  
  
实例代码：

MainActivity.Java:

public class MainActivity extends AppCompatActivity {
    private RecyclerView main_rv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initDatas();
    }

    private void initView() {
        main_rv = (RecyclerView) findViewById(R.id.main_rv);
    }

    private void initDatas() {
        //添加数据
        List<ImageInfor> list=new ArrayList<>();
        list.add(new ImageInfor(R.mipmap.ic_launcher,"张学友"));
        list.add(new ImageInfor(R.mipmap.ic_launcher,"张家辉"));
        list.add(new ImageInfor(R.mipmap.ic_launcher,"张无忌"));

        //设置列表显示方式
        main_rv.setLayoutManager(new LinearLayoutManager(MainActivity.this));
        //设置列表默认动画效果
        main_rv.setItemAnimator(new DefaultItemAnimator());
        //绑定适配器
        MyAdapter myAdapter=new MyAdapter(list);
        main_rv.setAdapter(myAdapter);
        //列表点击事件
        myAdapter.setOnItemClickLitener(new MyAdapter.OnItemClickLitener() {
            @Override
            public void onItemClick(View view, int position) {
                Log.i("position=",position+"");
            }
        });

    }

}
在这里，创建了一个RecyclerView控件，通过该控件与MyAdapter进行了绑定，并且设置了RecyclerView的显示方式为线性布局，然后再创建一个ImageInfor数据集合来存放数据。最后设置了点击事件，这里的点击事件需要注意的是和平时的ListView点击事件是不一样的，没有直接的方法可以调用，所以只能在适配器里面写一个接口进行回调。
activity.main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.soft0754.text.MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/main_rv"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v7.widget.RecyclerView>
</RelativeLayout>
这个没什么的，就是MainActivity中的布局文件。

ImageInfor.Java:
/**
 * 名称和图片实体类
 * Created by Administrator on 2017/10/25.
 */

public class ImageInfor {

    private int imageId;
    private String name;

    public ImageInfor(int imageId,String name){
        this.imageId=imageId;
        this.name=name;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getImageId() {
        return imageId;
    }

    public void setImageId(int imageId) {
        this.imageId = imageId;
    }
}

MyAdapter.Java:

package com.soft0754.adapter;

/**
 * Created by Administrator on 2017/10/25.
 */

import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.soft0754.model.ImageInfor;
import com.soft0754.text.R;

import java.util.List;

/**
 * Created by Administrator on 2017/10/25.
 */
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {

    private List<ImageInfor> list;

    public MyAdapter(List<ImageInfor> list) {
        this.list = list;
    }

    //新建点击事件接口
    public interface OnItemClickLitener {
        void onItemClick(View view, int position);
    }

    private OnItemClickLitener mOnItemClickLitener;

    public void setOnItemClickLitener(OnItemClickLitener mOnItemClickLitener) {
        this.mOnItemClickLitener = mOnItemClickLitener;
    }

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

    /**
     * 初始化布局视图
     */
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.carditem, parent, false);
        return new ViewHolder(view);
    }

    /**
     * 绑定视图组件数据
     */
    public void onBindViewHolder(final ViewHolder holder, final int position) {
        holder.iv_backgroud.setBackgroundResource(list.get(position).getImageId());
        holder.tv_title.setText(list.get(position).getName());
        final int postions = position;
        if (mOnItemClickLitener!=null){
            holder.itemView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    int pos=holder.getAdapterPosition();
                    mOnItemClickLitener.onItemClick(holder.itemView,pos);
                }
            });
        }
    }

    public static class ViewHolder extends RecyclerView.ViewHolder {
        public ImageView iv_backgroud;
        public TextView tv_title;
        public ViewHolder(View itemView) {
            super(itemView);
            iv_backgroud = (ImageView) itemView.findViewById(R.id.picture);
            tv_title = (TextView) itemView.findViewById(R.id.name);
        }
    }

}



carditem.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardBackgroundColor="#80cbc4"
    app:cardCornerRadius="10dp"
    app:cardPreventCornerOverlap="true"
    android:clickable="true"
    android:foreground="?android:attr/selectableItemBackground"
    app:cardUseCompatPadding="true">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:padding="5dp">

        <ImageView
            android:id="@+id/picture"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_centerInParent="true"
            android:scaleType="centerCrop" />

        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginRight="5dp"
            android:clickable="true"
            android:text="123"
            android:textColor="@android:color/white"
            android:textSize="24sp" />
    </RelativeLayout>


</android.support.v7.widget.CardView>
这里重点在于根布局标签CardView,有关基本属性上面已经讲了，不懂的同学可以翻上去看看。

通过上面的代码，大家有没有发现其实使用方法和平时ListView绑定BaseAdapter基本上一致的，确实如此，这不过这里使用了RecyclerView适配器来实现的，另外item视图中的布局是通过CardView控件进行根布局嵌套的，因为我们要实现item圆角化和阴影化。然而通过上面所讲的属性进行设置从而达到一定的效果，那么现在已经完成了，下面我们一起来看看效果图: