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 效果图