Android新特性之CardView的简单使用

原文：http://blog.csdn.net/jdsjlzx/article/details/49511215 

Android新特性之CardView的简单使用

在上篇文章中，我们学习了RecyclerView的简单使用，这边文章我们学习下Android 5.0的另一个新增加的控件CardView。首先讲解写CardView的基本使用，然后在结合RecyclerView使用CardView进行填充写个小实例。

环境配置

一、在Eclipse的环境中配置同上篇文章，引入android.support.v7包进行使用。参照文章：RecyclerView的简单使用。
二、在Android Studio中进行使用，我们需要只需要在Gradle中添加CardView包的依赖即可进行使用。

[html]  view plain  copy

1. compile 'com.android.support:cardview-v7:21.0.+'  

基本使用

CardView是一个新增加的UI控件，我们先在代码中定义一个CardView的变量，然后查看源码看看这是个什么玩意。话说Android Studio中查看源码特方便，比Eclipse强很多。源码先：

[java]  view plain  copy

1. public class CardView extends FrameLayout implements CardViewDelegate {  
2.             ...  
3.     }  

从源码看，CardView继承FrameLayout，所以CardView是一个ViewGroup，我们可以在里面添加一些控件进行布局。既然CardView继承FrameLayout，而且Android中早已有了FrameLayout布局，为什么还有使用CardView这个布局控件呢？我们先来看看官网对此类的注释

A FrameLayoutwitha 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和之前的版本中添加内边距，这个属性为了防止内容和边角的重叠

下面开始简单的进行使用：
1、普通使用效果

[html]  view plain  copy

1. <android.support.v7.widget.CardView  
2.         android:layout_width="match_parent"  
3.         android:layout_height="wrap_content">  
4.         <TextView  
5.             android:layout_width="match_parent"  
6.             android:layout_height="70dp"  
7.             android:text="正常使用效果"  
8.             android:gravity="center_horizontal|center_vertical"  
9.             android:textColor="#000000"  
10.             android:textSize="20sp"  
11.             android:padding="10dp"  
12.             android:layout_margin="10dp"/>  
13.     </android.support.v7.widget.CardView>  

效果图： 

2、增加背景色和圆角的效果，注意我们此时使用background属性是没效果的：

[html]  view plain  copy

1. <android.support.v7.widget.CardView  
2.         android:layout_width="match_parent"  
3.         android:layout_height="wrap_content"  
4.         app:cardBackgroundColor="#669900"  
5.         app:cardCornerRadius="10dp">  
6.         ...  
7.     </android.support.v7.widget.CardView>  

效果图： 

3、设置z轴阴影

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardBackgroundColor="#669900"
    app:cardElevation="20dp"
    app:cardCornerRadius="10dp">
    ...
</android.support.v7.widget.CardView>

效果图： 

通过上面的演示，我们发现CardView的卡片布局效果很不错，如果用在ListView、RecyclerView中一定也有不错的效果，那么现在我们来使用下。

首先定义RecyclerView的item的布局：

[html]  view plain  copy

1. <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"  
2.         xmlns:app="http://schemas.android.com/apk/res-auto"  
3.         app:cardBackgroundColor="#80cbc4"  
4.         app:cardCornerRadius="10dp"  
5.         app:cardPreventCornerOverlap="true"  
6.         app:cardUseCompatPadding="true"  
7.         android:layout_width="match_parent"  
8.         android:layout_height="wrap_content">  
9.         <RelativeLayout  
10.             android:layout_width="match_parent"  
11.             android:layout_height="100dp"  
12.             android:padding="5dp">  
13.             <ImageView  
14.                 android:id="@+id/picture"  
15.                 android:layout_width="match_parent"  
16.                 android:layout_height="match_parent"  
17.                 android:layout_centerInParent="true"  
18.                 android:scaleType="centerCrop" />  
19.             <TextView  
20.                 android:clickable="true"  
21.                 android:id="@+id/name"  
22.                 android:layout_width="match_parent"  
23.                 android:layout_height="match_parent"  
24.                 android:layout_marginBottom="10dp"  
25.                 android:layout_marginRight="10dp"  
26.                 android:gravity="right|bottom"  
27.                 android:textColor="@android:color/white"  
28.                 android:textSize="24sp" />  
29.         </RelativeLayout>  
30.   
31.     </android.support.v7.widget.CardView>  

然后定义一个交互的实体：

[html]  view plain  copy

1. package com.example.dsw.cardviewdemo;  
2.   
3.     /**  
4.      * Created by dsw on 2015/9/30.  
5.      */  
6.     public class ImageInfor {  
7.         private String name;  
8.         private int imageId;  
9.   
10.         public ImageInfor(int imageId, String name) {  
11.             this.imageId = imageId;  
12.             this.name = name;  
13.         }  
14.   
15.         public int getImageId() {  
16.             return imageId;  
17.         }  
18.   
19.         public void setImageId(int imageId) {  
20.             this.imageId = imageId;  
21.         }  
22.   
23.         public String getName() {  
24.             return name;  
25.         }  
26.   
27.         public void setName(String name) {  
28.             this.name = name;  
29.         }  
30.     }  

然后我们直接在MainActivity中进行处理。

[java]  view plain  copy

1. public class MainActivity extends Activity {  
2.         private RecyclerView mRecyclerView;  
3.         @Override  
4.         protected void onCreate(Bundle savedInstanceState) {  
5.             super.onCreate(savedInstanceState);  
6.             setContentView(R.layout.activity_main);  
7.             mRecyclerView = (RecyclerView) findViewById(R.id.recycler_view);  
8.             List<ImageInfor> list = new ArrayList<>();  
9.             list.add(new ImageInfor(R.mipmap.caiyilin, "蔡依林"));  
10.             list.add(new ImageInfor(R.mipmap.ulinxinru, "林心如"));  
11.             list.add(new ImageInfor(R.mipmap.caiyilin,"蔡依林"));  
12.             list.add(new ImageInfor(R.mipmap.ulinxinru, "林心如"));  
13.             list.add(new ImageInfor(R.mipmap.caiyilin,"蔡依林"));  
14.             list.add(new ImageInfor(R.mipmap.ulinxinru, "林心如"));  
15.   
16.   
17.             RecyclerView.LayoutManager manager = new LinearLayoutManager(this);  
18.             mRecyclerView.setLayoutManager(manager);  
19.             mRecyclerView.setItemAnimator(new DefaultItemAnimator());  
20.             MyAdapter myAdapter = new MyAdapter(list);  
21.             mRecyclerView.setAdapter(myAdapter);  
22.             myAdapter.setOnItemClick(new OnItemClick(){  
23.                 @Override  
24.                 public void onItemClick(View view, int position) {  
25.                     Toast.makeText(getApplication(),"点击了：" + position,Toast.LENGTH_SHORT).show();  
26.                 }  
27.             });  
28.         }  
29.   
30.         class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder>{  
31.             private List<ImageInfor> list;  
32.             public MyAdapter(List<ImageInfor> list){  
33.                 this.list = list;  
34.             }  
35.             @Override  
36.             public MyViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {  
37.                 View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.carditem,viewGroup,false);  
38.                 return new MyViewHolder(view);  
39.             }  
40.   
41.             @Override  
42.             public void onBindViewHolder(MyViewHolder myViewHolder, int i) {  
43.                 myViewHolder.iv_backgroud.setBackgroundResource(list.get(i).getImageId());  
44.                 myViewHolder.tv_title.setText(list.get(i).getName());  
45.                 final int position = i;  
46.                 myViewHolder.itemView.setOnClickListener(new View.OnClickListener() {  
47.                     @Override  
48.                     public void onClick(View view) {  
49.                         if(onItemClick != null){  
50.                             onItemClick.onItemClick(view,position);  
51.                         }  
52.                     }  
53.                 });  
54.             }  
55.   
56.             @Override  
57.             public int getItemCount() {  
58.                 return list.size();  
59.             }  
60.   
61.             class MyViewHolder extends RecyclerView.ViewHolder {  
62.                 private ImageView iv_backgroud;  
63.                 private TextView tv_title;  
64.                 public MyViewHolder(View itemView) {  
65.                     super(itemView);  
66.                     iv_backgroud = (ImageView) itemView.findViewById(R.id.picture);  
67.                     tv_title = (TextView) itemView.findViewById(R.id.name);  
68.                 }  
69.             }  
70.   
71.             private OnItemClick onItemClick;  
72.   
73.             public void setOnItemClick(OnItemClick onItemClick) {  
74.                 this.onItemClick = onItemClick;  
75.             }  
76.         }  
77.     }  

使用就是RecyclerView的简单使用中的讲解，我们只是把itemview换成cardview。直接看效果图吧！

源码下载地址 http://download.csdn.NET/detail/mr_dsw/9153845