CardView的简单使用

• CardView继承与FrameLayout，是一个ViewGroup。

• 依赖包： compile ‘com.android.support:cardview-v7:24.1.0’

• 特点

  1. 有rounded corner（圆角）和shadow（阴影)

---

• 方法说明

  • card_view:cardBackgroundColor 设置背景色
  • card_view:cardCornerRadius 设置圆角大小
  • card_view:cardElevation 设置z轴阴影
  • card_view:cardMaxElevation 设置z轴最大高度值
  • card_view:cardUseCompatPadding 是否使用CompadPadding
  • card_view:cardPreventCornerOverla 在xml文件中设置内边距，在V20和之前的版本中添加内边距，这个属性为了防止内容和边角的重叠
  • card_view:contentPadding 内容的padding
  • card_view:contentPaddingLeft 内容的左padding
  • card_view:contentPaddingTop 内容的上padding
  • card_view:contentPaddingRight 内容的右padding
  • card_view:contentPaddingBottom 内容的底padding

• 使用情景

  • 需要显示层次的内容时，可以考虑使用
  • 需要显示列表和网格时，可以考虑使用
• 低版本兼容问题
  当设置elevation后，低版本会自动留出空间用于显示阴影，但在android L中需要手动设置margin边距来预留空间，所以我们需要适配：分别再res下新建values,values-v21文件夹，在文件下新建dimens.xml文件。在values下的dimens设置0dp，21下根据需要设置，在布局文件中引用。

• 简单实用实例

  1.主布局文件 activity_card_view.xml：

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    xmlns:toolbar="http://schemas.android.com/apk/res-auto"
    android:background="@android:color/white"
    android:orientation="vertical"
    android:layout_height="match_parent">

 <android.support.v7.widget.Toolbar
     android:layout_width="match_parent"
     android:background="@color/colorPrimary"
     toolbar:navigationIcon="?attr/homeAsUpIndicator"
     toolbar:title="toolbar"
     android:paddingTop="25dp"
     android:layout_height="wrap_content" />
 <android.support.v7.widget.RecyclerView
     android:id="@+id/activity_card_view"
     android:layout_width="match_parent"
     android:background="@android:color/white"
     android:layout_height="match_parent"
     />
 </LinearLayout>

2.RecyclerView的item布局item_cardview_layout.xml

 <?xml version="1.0" encoding="utf-8"?>
<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:orientation="vertical"
    android:layout_width="match_parent"
    card_view:cardBackgroundColor="@color/colorAccent"
    card_view:cardPreventCornerOverlap="true"
    card_view:cardUseCompatPadding="true"
    card_view:cardCornerRadius="5dp"
    android:layout_margin="@dimen/card_margin"
    android:foreground="?android:attr/selectableItemBackground"
    card_view:contentPadding="2dp"
    card_view:cardElevation="5dp"
    android:layout_height="wrap_content">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="100dp">
        <ImageView
            android:id="@+id/picture"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_centerInParent="true"
            android:scaleType="centerCrop" />
        <TextView
            android:clickable="true"
            android:id="@+id/name"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="10dp"
            android:layout_marginRight="10dp"
            android:gravity="right|bottom"
            android:textColor="@android:color/black"
            android:textSize="24sp" />
    </RelativeLayout>
</android.support.v7.widget.CardView>

3.测试实体类

    /**
 * Created by meijing on 2017/2/19.
 */

public class ImageInfor {
    private String name;
    private int imageId;

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

    public int getImageId() {
        return imageId;
    }

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

    public String getName() {
        return name;
    }

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

4.RecylcerView的适配器

import android.content.Context;
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.project.coordinatortablayout.R;
import java.util.List;

/**
 * Created by meijing on 2017/2/19.
 */

public class RecyclerviewAdapter   extends RecyclerView.Adapter<CardViewRecylcerviewHolder> {

    private Context  mContext;
    private List<ImageInfor>  list;

    public RecyclerviewAdapter(Context mContext, List<ImageInfor> list) {
        this.mContext = mContext;
        this.list = list;
    }

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

    @Override
    public void onBindViewHolder(CardViewRecylcerviewHolder holder, int position) {
        ImageInfor bean = list.get(position);
        holder.getTvName().setText(bean.getName());
        holder.getIviocn().setBackgroundResource(bean.getImageId());
    }

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

class CardViewRecylcerviewHolder extends RecyclerView.ViewHolder{

    private TextView  tvName;
    private ImageView iviocn;

    public CardViewRecylcerviewHolder(View itemView) {
        super(itemView);
        iviocn = (ImageView) itemView.findViewById(R.id.picture);
        tvName = (TextView) itemView.findViewById(R.id.name);
    }

    public TextView getTvName() {
        return tvName;
    }

    public ImageView getIviocn() {
        return iviocn;
    }
}

5.主界面：

 import android.os.Bundle;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;

import com.project.coordinatortablayout.R;
import com.project.coordinatortablayout.ui.toolbar.config.BaseTransparentBarActivity;

import java.util.ArrayList;
import java.util.List;

/**
 * cardview
 * 1.依赖包：  compile 'com.android.support:cardview-v7:24.1.0'
 * 2.cardview继承与framelayout，是一个viewgroup，
 * 3.特点：有设置shadow（阴影），rounded conrner（圆角）的属性
 * 3.属性方法：
 *   CardView.cardBackgroundColor 设置背景色
     CardView.cardCornerRadius 设置圆角大小
     CardView.cardElevation 设置z轴阴影
     CardView.cardMaxElevation 设置z轴最大高度值
     CardView.cardUseCompatPadding 是否使用CompadPadding  设置内边距
     CardView.cardPreventCornerOverlap  在xml文件中设置内边距，在V20和之前的版本中添加内边距，这个属性为了防止内容和边角的重叠
     CardView.contentPadding 内容的padding
     CardView.contentPaddingLeft 内容的左padding
     CardView.contentPaddingTop 内容的上padding
     CardView.contentPaddingRight 内容的右padding
     CardView.contentPaddingBottom 内容的底padding
   4.margin低版本兼容：可以在/res/value和/res/value-v21分别创建dimens.xml文件，在dimens.xml里，随意命名，
                          对于Android 5.0以上的设置数值0dp，对于Android 5.0以下的设置数值（根据实际需求）
   5.使用情景：需要显示层次性的内容，可以考虑使用。
               需要显示列表或网格时，可以考虑使用。
 */
public class CardViewActivity extends AppCompatActivity{

    private RecyclerView  mRecyclerView;
    //数据源
    private List<ImageInfor>  list=new ArrayList<>();
    private RecyclerviewAdapter  mAdapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_card_view);
        //初始化组件
        initView();
        //初始化数据
        initData();
    }

    /**
     * 初始化组件
     */
    private void initView() {
        mRecyclerView= (RecyclerView) findViewById(R.id.activity_card_view);
    }

    /**
     * 初始化数据
     */
    private void initData() {
        list.add(new ImageInfor(R.drawable.empty_default_img, "数据1"));
        list.add(new ImageInfor(R.drawable.empty_default_img, "数据1"));
        list.add(new ImageInfor(R.drawable.empty_default_img, "数据1"));
        list.add(new ImageInfor(R.drawable.empty_default_img, "数据1"));
        list.add(new ImageInfor(R.drawable.empty_default_img, "数据1"));
        list.add(new ImageInfor(R.drawable.empty_default_img, "数据1"));
        list.add(new ImageInfor(R.drawable.empty_default_img, "数据1"));
        list.add(new ImageInfor(R.drawable.empty_default_img, "数据1"));

        LinearLayoutManager  layoutManager=new LinearLayoutManager(this);
        layoutManager.setOrientation(LinearLayoutManager.VERTICAL);
        mRecyclerView.setLayoutManager(layoutManager);
        mRecyclerView.setItemAnimator(new DefaultItemAnimator());
        mAdapter=new RecyclerviewAdapter(this,list);
        mRecyclerView.setAdapter(mAdapter);
    }
}

6 图标：

6 效果图