Android5.x之CardView

今天发现了一个好玩的东西，，CardVeiw卡片式布局，是Google在5.0新推出的v7兼容包继承自FramLayout，也就是说它是一个ViewGroup,那么他比Framlayout多了什么呢
A FrameLayout with a rounded corner background and shadow.
/**
*这个FrameLayout特殊点就是有rounded corner（圆角）和shadow（阴影），
*这个就是它的特殊之处，回首往日，我们需要自定义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
*card_view:cardUseCompatPadding 设置内边距，V21+的版本和之前的版本仍旧具有一样的计算方式
*card_view:cardPreventConrerOverlap 在V20和之前的版本中添加内边距，这个属性为了防止内容和边角的重叠
*/
给大家看一个结合RecyclerView来实现卡片效果的例子

public class MainActivity extends Activity {
    private RecyclerView mRecyclerView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mRecyclerView = (RecyclerView) findViewById(R.id.recycler_view);
        List<ImageInfor> list = new ArrayList<>();
        list.add(new ImageInfor(R.mipmap.caiyilin, "蔡依林"));
        list.add(new ImageInfor(R.mipmap.ulinxinru, "林心如"));
        list.add(new ImageInfor(R.mipmap.caiyilin,"蔡依林"));
        list.add(new ImageInfor(R.mipmap.ulinxinru, "林心如"));
        list.add(new ImageInfor(R.mipmap.caiyilin,"蔡依林"));
        list.add(new ImageInfor(R.mipmap.ulinxinru, "林心如"));
        RecyclerView.LayoutManager manager = new LinearLayoutManager(this,LinearLayoutManager.VERTICAL,true);
        mRecyclerView.setLayoutManager(manager);
        mRecyclerView.setItemAnimator(new DefaultItemAnimator());
        MyAdapter myAdapter = new MyAdapter(list);
        mRecyclerView.setAdapter(myAdapter);
        myAdapter.setOnItemClick(new OnItemClick(){
            @Override
            public void onItemClick(View view, int position) {
                Toast.makeText(getApplication(),"点击了：" + position,Toast.LENGTH_SHORT).show();
            }
        });
    }

    class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder>{
        private List<ImageInfor> list;
        public MyAdapter(List<ImageInfor> list){
            this.list = list;
        }
        @Override
        public MyViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
            View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.carditem,viewGroup,false);
            return new MyViewHolder(view);
        }

        @Override
        public void onBindViewHolder(MyViewHolder myViewHolder, int i) {
            myViewHolder.iv_backgroud.setBackgroundResource(list.get(i).getImageId());
            myViewHolder.tv_title.setText(list.get(i).getName());
            final int position = i;
            myViewHolder.itemView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    if(onItemClick != null){
                        onItemClick.onItemClick(view,position);
                    }
                }
            });
        }

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

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

        private OnItemClick onItemClick;

        public void setOnItemClick(OnItemClick onItemClick) {
            this.onItemClick = onItemClick;
        }
    }
}

还有bean和自定义监听接口‘

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;
    }
}
//
public interface OnItemClick {
    public void onItemClick(View view, int position);
}

重点就是item的布局

<?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"
    app:cardBackgroundColor="#80cbc4"
    app:cardCornerRadius="30dp"
    app:cardPreventCornerOverlap="true"
    app:cardUseCompatPadding="true"
    app:cardElevation="10dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="200dp">
        <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/white"
            android:textSize="24sp" />
    </RelativeLayout>

</android.support.v7.widget.CardView>

this all.