android MaterialDesign之CardView

android MaterialDesign是google5.0新推出的一种规范，提供了很多资源文件以及新控件。 这篇博文主要讲CardView的使用。

CardView是一种卡片式布局，一种新型的布局，效果简约美观。以下是CardView的继承体系：

java.lang.Object   ↳android.view.View    ↳android.view.ViewGroup     ↳android.widget.FrameLayout      ↳android.support.v7.widget.CardView

使用CardView需要导入 相对应的包。 如果是gradle那就比较简单，根据自己sdk的版本导入相对应的包

compile 'com.android.support:cardview-v7:23.3.0'

在eclipse则需要 引入架包或者cardview的jar文件

先贴上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"    android:layout_margin="5dp"    app:cardBackgroundColor="@android:color/holo_blue_dark"    app:cardCornerRadius="5dp"    app:cardElevation="@dimen/cardview_default_elevation"    app:cardUseCompatPadding="true"    android:clickable="true"    android:foreground="?attr/selectableItemBackground"    app:contentPadding="5dp">    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="vertical">        <ImageView            android:id="@+id/item_icon"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:scaleType="fitXY"            android:src="@mipmap/img1" />        <TextView            android:id="@+id/item_title"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginTop="5dp"            android:text="内容标题"            android:textColor="#fff"            android:textSize="16sp" />        <TextView            android:id="@+id/item_content"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginTop="5dp"            android:ellipsize="end"            android:lines="2"            android:maxLines="2"            android:text="@string/content"            android:textColor="#fff"            android:textSize="16sp" />        <LinearLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_marginTop="5dp"            android:orientation="horizontal">            <ImageView                android:id="@+id/item_dw"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_gravity="center_vertical"                android:layout_weight="1"                android:src="@mipmap/dw" />            <ImageView                android:id="@+id/item_ss"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_gravity="center_vertical"                android:layout_weight="1"                android:src="@mipmap/search" />            <ImageView                android:id="@+id/item_fx"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_weight="1"                android:src="@mipmap/fx" />        </LinearLayout>    </LinearLayout></android.support.v7.widget.CardView>

从上面的xml布局看出来使用还是很简单的，直接当做普通的布局容器来使用就行了。

cardBackgroundColor -----》 设置cardview背景颜色

cardCornerRadius -----》设置cardview 圆角的半径

cardElevation----》设置cardview的阴影

contentPadding-----》设置cardview的内间距

5.x上面可以设置点击水波纹效果

android:foreground="?attr/selectableItemBackground"

cardPreventCornerOverlap ------》防止api20之前圆角与内容重叠 ，在21以后不会重叠

cardUseCompatPadding ----》设置为true 可以为不同L版提供内间距兼容 ，默认为false

更详细的请查阅android api文档

http://android.xsoftlab.net/reference/android/support/v7/widget/CardView.html

MainActivity代码

package com.ysm.cardview;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.RecyclerView;import android.support.v7.widget.StaggeredGridLayoutManager;import android.support.v7.widget.Toolbar;import android.view.View;import android.widget.Toast;import com.ysm.cardview.adapter.RecyAdapter;import com.ysm.cardview.bean.Card;import com.ysm.cardview.listener.ICardItemCallback;import java.util.ArrayList;import java.util.List;public class MainActivity extends AppCompatActivity {    private RecyclerView mRecyclerView;    private RecyAdapter mAdapter;    private int[] icons = new int[]{R.mipmap.img1, R.mipmap.img2, R.mipmap.img3};    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);        mRecyclerView = (RecyclerView) findViewById(R.id.recy_cardview);        setSupportActionBar(toolbar);//        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);//        fab.setOnClickListener(new View.OnClickListener() {//            @Override//            public void onClick(View view) {//                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)//                        .setAction("Action", null).show();//            }//        });        initData();        initListener();    }    //初始化数据    private void initData() {        List<Card> mDatas = new ArrayList<>();        Card card1 = new Card(icons[0], "titile1", getString(R.string.content), 1);        Card card2 = new Card(icons[1], 2);        Card card3 = new Card(icons[2], "titile3", getString(R.string.content), 1);        Card card4 = new Card(icons[0], "titile4", getString(R.string.content), 1);        Card card5 = new Card(icons[1], "titile5", getString(R.string.content), 1);        Card card6 = new Card(icons[2], 2);        mDatas.add(card1);        mDatas.add(card2);        mDatas.add(card3);        mDatas.add(card4);        mDatas.add(card5);        mDatas.add(card6);        //设置适配器        mAdapter = new RecyAdapter(mDatas, this);        mRecyclerView.setAdapter(mAdapter);        mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));    }    //item点击事件    private void initListener() {        mAdapter.setOnCardViewListener(new ICardItemCallback() {            @Override            public void onCardItemClick(View v, int position) {                Toast.makeText(MainActivity.this, "item" + position, Toast.LENGTH_SHORT).show();            }        });    }}

adapter代码

package com.ysm.cardview.adapter;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.ysm.cardview.R;import com.ysm.cardview.bean.Card;import com.ysm.cardview.listener.ICardItemCallback;import java.util.List;/** * adapter */public class RecyAdapter extends RecyclerView.Adapter<RecyAdapter.RecyHodler> {    private List<Card> mDatas;    private Context mContext;    private LayoutInflater mInflater;    private final int TYPE_A = 1;    private final int TYPE_B = 2;    private int TYPE;    private ICardItemCallback callback;    public void setOnCardViewListener(ICardItemCallback callback) {        this.callback = callback;    }    public RecyAdapter(List<Card> datas, Context context) {        this.mDatas = datas;        this.mContext = context;        mInflater = LayoutInflater.from(context);    }    @Override    public RecyHodler onCreateViewHolder(ViewGroup parent, int viewType) {        RecyHodler hodler;        if (viewType == TYPE_A) {            hodler = new RecyHodler(mInflater.inflate(R.layout.recy_item_cardview, parent, false));            return hodler;        } else {            hodler = new RecyHodler(mInflater.inflate(R.layout.recy_item_cardview2, parent, false));            return hodler;        }    }    @Override    public void onBindViewHolder(final RecyHodler holder, int position) {        Card item = mDatas.get(position);        if (TYPE == TYPE_A) {            holder.icon.setImageResource(item.getIcon());            holder.title.setText(item.getTitle());            holder.content.setText(item.getContent());        } else if (TYPE == TYPE_B) {            holder.icon.setImageResource(item.getIcon());        }        if (callback != null) {            holder.itemView.setOnClickListener(new View.OnClickListener() {                @Override                public void onClick(View v) {                    int item = holder.getLayoutPosition();                    callback.onCardItemClick(v, item);                }            });        }    }    @Override    public int getItemViewType(int position) {        int type = mDatas.get(position).getType();        if (type == 1) {            TYPE = TYPE_A;            return TYPE_A;        } else {            TYPE = TYPE_B;            return TYPE_B;        }    }    @Override    public int getItemCount() {        return mDatas.size();    }    class RecyHodler extends RecyclerView.ViewHolder {        ImageView icon;        TextView title;        TextView content;        public RecyHodler(View itemView) {            super(itemView);            if (TYPE == TYPE_A) {                icon = (ImageView) itemView.findViewById(R.id.item_icon);                title = (TextView) itemView.findViewById(R.id.item_title);                content = (TextView) itemView.findViewById(R.id.item_content);            } else {                icon = (ImageView) itemView.findViewById(R.id.item_icon2);            }        }    }}

通过与RecyclerView的结合使用，实现了照片瀑布流的效果，这里的图片是本地的，并不是网络获取的图片。详情可以查看代码。

先来两张效果图：

源码下载地址