CardView完全解析与RecyclerView结合使用

 

转载请标明出处：

http://blog.csdn.net/developer_jiangqq/article/details/50000733

本文出自:【江清清的博客】

 

(一).前言:   

        【好消息】个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新，请大家关注收藏:http://www.lcode.org

        作为Android L开始，Google更新的除了RecyclerView之外的另一控件就是CardView，其中Google官方应用GoogleNow就采用了CardView控件，下面我们详细了解一下CardView和使用方法。

(二).基本介绍: 

          CardView继承自FrameLayout，可以让我们使用类似卡片布局来显示一致性效果的内容。同时卡片还可以包含圆角和阴影效果。CardView是一个Layout，同时在里边布局其他View控件。如果我们需要创建带有一个阴影效果的卡片，那么可以使用card_view:cardElevation属性。

在API21（Android L）等级以上拥有属性elevation，意为CardView的Z轴阴影，只有L平台有效。只能通过xml中的elevation属性指定；另外我们还可以使用以下的属性来自定义CardView布局:

使用card_view:cardCornerRadius来设置布局的圆角。同样可以使用代码如下的代码设置圆角:CardView.setRadius。对于卡片的背景可以使用card_view:cardBackgroundColor设置。

         CardView的其他属性以及作用如下:

card_view:cardElevation	阴影的大小
card_view:cardMaxElevation	阴影最大值
card_view:cardBackgroundCollor	卡片的背景色
card_view:cardCornerRadius	卡片的圆角大小
card_view:contentPadding	卡片内容与边距的间隔
card_view:contentPaddingBottom	卡片内容与底部的间隔
card_view:contentPaddingTop	卡片内容与顶部的间隔
card_view:contentPaddingLeft	卡片内容与左边的间隔
card_view:contentPaddingRight	卡片内容与右边的间隔
card_view:contentPaddingStart
card_view:contentPaddingEnd

(三).CardView组件引入:

        我们知道CardView组件是Android L开始引入，同时Google也做了兼容包在V7包里边了，具体我们来看一下项目存在的路径:

       使用Android Studio IDE进行开发的话，我们只需要进行dependencies引入依赖即可:

 

[html] view plain copy

1. dependencies {  
2.     compile fileTree(dir: ‘libs’, include:[‘*.jar’])  
3.    …….  
4.     compile’com.android.support:cardview-v7:23.1.1’  
5. }  

dependencies {
    compile fileTree(dir: 'libs', include:['*.jar'])
   …….
    compile'com.android.support:cardview-v7:23.1.1'
}

 

(四).CardView基本使用:

         下面我们来具体来使用一下,根据上面的讲解我们知道CardView也是一个Layout，那么里边我们也可以加入其他布局，请看实例Demo布局文件,比较简单一看就会了:

 

[html] view plain copy

1.   
3.    xmlns:card_view=“http://schemas.android.com/apk/res-auto”  
4.     android:orientation=“vertical”  
5.    android:layout_width=“match_parent”  
6.    android:layout_height=“match_parent”>  
7.       
8.     
9.        android:layout_marginTop=“3dp”  
10.        android:layout_marginLeft=“3dp”  
11.        android:layout_marginRight=“3dp”  
12.        android:id=“@+id/card_view_one”  
13.        android:layout_gravity=“center”  
14.        android:layout_width=“match_parent”  
15.         android:layout_height=“100dp”  
16.        card_view:cardCornerRadius=“5dp”>  
17.         
18.            android:id=“@+id/info_text_one”  
19.            android:text=“CardView1测试”  
20.             android:textSize=“16sp”  
21.             android:gravity=“center”  
22.            android:layout_width=“match_parent”  
23.            android:layout_height=“match_parent” />  
24.       
25.     
26.        android:layout_marginTop=“3dp”  
27.        android:layout_marginLeft=“3dp”  
28.        android:layout_marginRight=“3dp”  
29.        android:id=“@+id/card_view_two”  
30.        android:layout_gravity=“center”  
31.        android:layout_width=“match_parent”  
32.         android:layout_height=“100dp”  
33.        card_view:cardCornerRadius=“5dp”  
34.        card_view:cardBackgroundColor=“#FFE4B5”>  
35.         
36.            android:id=“@+id/info_text_two”  
37.            android:text=“CardView2测试”  
38.             android:textSize=“16sp”  
39.             android:gravity=“center”  
40.            android:layout_width=“match_parent”  
41.            android:layout_height=“match_parent” />  
42.       
43.     
44.        android:layout_marginTop=“3dp”  
45.        android:layout_marginLeft=“3dp”  
46.        android:layout_marginRight=“3dp”  
47.        android:id=“@+id/card_view_three”  
48.        android:layout_gravity=“center”  
49.        android:layout_width=“match_parent”  
50.         android:layout_height=“100dp”  
51.        card_view:cardCornerRadius=“5dp”  
52.        card_view:cardBackgroundColor=“#CAE1FF”>  
53.         
54.            android:id=“@+id/info_text_three”  
55.            android:text=“CardView3测试”  
56.             android:textSize=“16sp”  
57.             android:gravity=“center”  
58.            android:layout_width=“match_parent”  
59.            android:layout_height=“match_parent” />  
60.       
61.     
62.        android:layout_marginTop=“3dp”  
63.        android:layout_marginLeft=“3dp”  
64.        android:layout_marginRight=“3dp”  
65.        android:id=“@+id/card_view_four”  
66.        android:layout_gravity=“center”  
67.        android:layout_width=“match_parent”  
68.         android:layout_height=“100dp”  
69.        card_view:cardCornerRadius=“5dp”  
70.        card_view:cardBackgroundColor=“#7CCD7C”  
71.         card_view:cardElevation=“5dp”  
72.        card_view:cardMaxElevation=“5dp”>  
73.         
74.            android:id=“@+id/info_text_four”  
75.            android:text=“CardView4测试”  
76.             android:textSize=“16sp”  
77.             android:gravity=“center”  
78.            android:layout_width=“match_parent”  
79.            android:layout_height=“match_parent” />  
80.       
81.   

•  

这边定义了四个CardView,同时设置了圆角以及相关背景颜色，其他第四个CardView还设置了阴影效果,具体运行效果如下:

(五).CardView结合RecyclerView:

          前面我们实现了RecyclerView实现列表功能了，现在我们把Item View采用CardView来实现,    

1.首先我们来看下Item 布局文件:

 

[html] view plain copy

1.   
3.    xmlns:card_view=“http://schemas.android.com/apk/res-auto”  
4.     android:orientation=”vertical”android:layout_width=“match_parent”  
5.    android:layout_height=“match_parent”>  
6.     
7.        android:id=“@+id/item_cardview”  
8.        android:layout_gravity=“center”  
9.        android:layout_width=“match_parent”  
10.         android:layout_height=“100dp”  
11.        card_view:cardCornerRadius=“5dp”  
12.        card_view:cardBackgroundColor=“#7CCD7C”  
13.         card_view:cardElevation=“3dp”  
14.        card_view:cardMaxElevation=“5dp”>  
15.         
16.             android:id=“@+id/item_tv”  
17.            android:text=“CardView测试”  
18.             android:textSize=“16sp”  
19.            android:textColor=“#FFFFFF”  
20.             android:gravity=“center”  
21.            android:layout_width=“match_parent”  
22.            android:layout_height=“match_parent” />  
23.       
24.   

•  

 这个布局比较简单，定义一个CardView，内部包含了一个TextView。

2.自定义的Adapter如下,主要加载布局然后绑定数据:

 

[java] view plain copy

1. packagecom.chinaztt.fda.test.CardView;  
2. importandroid.content.Context;  
3. importandroid.support.v7.widget.CardView;  
4. importandroid.support.v7.widget.RecyclerView;  
5. importandroid.text.Layout;  
6. importandroid.view.LayoutInflater;  
7. importandroid.view.View;  
8. importandroid.view.ViewGroup;  
9. importandroid.widget.TextView;  
10. importcom.chinaztt.fda.entity.CardDataUtils;  
11. importcom.chinaztt.fda.entity.CardViewBean;  
12. importcom.chinaztt.fda.ui.R;  
13. importjava.util.List;  
14. /** 
15.  * 当前类注释:CardView结合RecyclerView 自定义Adapter 
16.  * 项目名：FastDev4Android 
17.  * 包名：com.chinaztt.fda.test.CardView 
18.  * 作者：江清清 on 15/11/23 19:41 
19.  * 邮箱：[email protected] 
20.  * QQ： 781931404 
21.  * 公司：江苏中天科技软件技术有限公司 
22.  */  
23. public class CardViewAdapter extends RecyclerView.Adapter{  
24.     private List beans;  
25.     private LayoutInflater mInflater;  
26.     private Context mContext;  
27.     public CardViewAdapter(Context context){  
28.         this.mContext=context;  
29.         beans=CardDataUtils.getCardViewDatas();  
30.         mInflater=LayoutInflater.from(context);  
31.     }  
32.     @Override  
33.     public ItemCardViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {  
34.         Viewview=mInflater.inflate(R.layout.item_cardview_layout,parent,false);  
35.         return new ItemCardViewHolder(view);  
36.     }  
37.     @Override  
38.     public void onBindViewHolder(ItemCardViewHolder holder, int position) {  
39.        holder.item_cardview.setCardBackgroundColor(mContext.getResources().getColor(beans.get(position).getColor()));  
40.        holder.item_tv.setText(beans.get(position).getTitle());  
41.     }  
42.     @Override  
43.     public int getItemCount() {  
44.         return beans.size();  
45.     }  
46.    
47.     public static class ItemCardViewHolder extends RecyclerView.ViewHolder{  
48.         private CardView item_cardview;  
49.         private TextView item_tv;  
50.         public ItemCardViewHolder(ViewitemView) {  
51.             super(itemView);  
52.            item_cardview=(CardView)itemView.findViewById(R.id.item_cardview);  
53.            item_tv=(TextView)itemView.findViewById(R.id.item_tv);  
54.    
55.         }  
56.     }  
57. }  

packagecom.chinaztt.fda.test.CardView;
importandroid.content.Context;
importandroid.support.v7.widget.CardView;
importandroid.support.v7.widget.RecyclerView;
importandroid.text.Layout;
importandroid.view.LayoutInflater;
importandroid.view.View;
importandroid.view.ViewGroup;
importandroid.widget.TextView;
importcom.chinaztt.fda.entity.CardDataUtils;
importcom.chinaztt.fda.entity.CardViewBean;
importcom.chinaztt.fda.ui.R;
importjava.util.List;
/**
 * 当前类注释:CardView结合RecyclerView 自定义Adapter
 * 项目名：FastDev4Android
 * 包名：com.chinaztt.fda.test.CardView
 * 作者：江清清 on 15/11/23 19:41
 * 邮箱：[email protected]
 * QQ： 781931404
 * 公司：江苏中天科技软件技术有限公司
 */
public class CardViewAdapter extends RecyclerView.Adapter{
    private List beans;
    private LayoutInflater mInflater;
    private Context mContext;
    public CardViewAdapter(Context context){
        this.mContext=context;
        beans=CardDataUtils.getCardViewDatas();
        mInflater=LayoutInflater.from(context);
    }
    @Override
    public ItemCardViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        Viewview=mInflater.inflate(R.layout.item_cardview_layout,parent,false);
        return new ItemCardViewHolder(view);
    }
    @Override
    public void onBindViewHolder(ItemCardViewHolder holder, int position) {
       holder.item_cardview.setCardBackgroundColor(mContext.getResources().getColor(beans.get(position).getColor()));
       holder.item_tv.setText(beans.get(position).getTitle());
    }
    @Override
    public int getItemCount() {
        return beans.size();
    }

    public static class ItemCardViewHolder extends RecyclerView.ViewHolder{
        private CardView item_cardview;
        private TextView item_tv;
        public ItemCardViewHolder(ViewitemView) {
            super(itemView);
           item_cardview=(CardView)itemView.findViewById(R.id.item_cardview);
           item_tv=(TextView)itemView.findViewById(R.id.item_tv);

        }
    }
}

•  

3.数据提供我这边采用一个类，在内边进行构造的:

 

[java] view plain copy

1. public class CardDataUtils {  
2.     public static List getCardViewDatas(){  
3.         List beans=new ArrayList();  
4.         int[] colors=newint[]{R.color.color_0,R.color.color_1,  
5.                R.color.color_2,R.color.color_3,R.color.color_4,  
6.                R.color.color_5,R.color.color_6,R.color.color_7,  
7.                R.color.color_8,R.color.color_9,R.color.color_10,};  
8.         for(int i=0;i<11;i++){  
9.             beans.add(new CardViewBean(colors[i],“CardView测试Item”+i));  
10.         }  
11.         return beans;  
12.     }  
13. }  

public class CardDataUtils {
    public static List getCardViewDatas(){
        List beans=new ArrayList();
        int[] colors=newint[]{R.color.color_0,R.color.color_1,
               R.color.color_2,R.color.color_3,R.color.color_4,
               R.color.color_5,R.color.color_6,R.color.color_7,
               R.color.color_8,R.color.color_9,R.color.color_10,};
        for(int i=0;i<11;i++){
            beans.add(new CardViewBean(colors[i],"CardView测试Item"+i));
        }
        return beans;
    }
}

•  

其中里面的11个颜色在,colors文件中定义了:

 

[html] view plain copy

1.   
2.    #FFF0F5  
3.    #FFE1FF  
4.    #E6E6FA  
5.    #C1FFC1  
6.    #B22222  
7.    #836FFF  
8.    #68228B  
9.    #5CACEE  
10.    #43CD80  
11.    #00EE00  
12.    #708090  

 
    #FFF0F5
    #FFE1FF
    #E6E6FA
    #C1FFC1
    #B22222
    #836FFF
    #68228B
    #5CACEE
    #43CD80
    #00EE00
    #708090

 

4.主布局文件的代码就不贴了，和以前一样，就是一个RecyclerView控件定义，然后主Activity使用方法代码如下:

 

[java] view plain copy

1. packagecom.chinaztt.fda.test.CardView;  
2.    
3. importandroid.os.Bundle;  
4. importandroid.support.v7.widget.LinearLayoutManager;  
5. importandroid.support.v7.widget.OrientationHelper;  
6. importandroid.support.v7.widget.RecyclerView;  
7. importandroid.view.View;  
8. importandroid.widget.LinearLayout;  
9. importandroid.widget.TextView;  
10.    
11. importcom.chinaztt.fda.ui.R;  
12. importcom.chinaztt.fda.ui.base.BaseActivity;  
13.    
14. /** 
15.  * 当前类注释:CardView结合RecyclerView使用实例 
16.  * 项目名：FastDev4Android 
17.  * 包名：com.chinaztt.fda.test.CardView 
18.  * 作者：江清清 on 15/11/23 19:34 
19.  * 邮箱：[email protected] 
20.  * QQ： 781931404 
21.  * 公司：江苏中天科技软件技术有限公司 
22.  */  
23. public class CardViewRecyclerActivity extends BaseActivity {  
24.     private LinearLayout top_bar_linear_back;  
25.     private TextView top_bar_title;  
26.     private RecyclerView recycler_cardview;  
27.     @Override  
28.     protected void onCreate(BundlesavedInstanceState) {  
29.         super.onCreate(savedInstanceState);  
30.        setContentView(R.layout.card_view_recycler_layout);  
31.        top_bar_linear_back=(LinearLayout)this.findViewById(R.id.top_bar_linear_back);  
32.        top_bar_linear_back.setOnClickListener(new CustomOnClickListener());  
33.        top_bar_title=(TextView)this.findViewById(R.id.top_bar_title);  
34.        top_bar_title.setText(”CardView结合RecyclerView使用实例”);  
35.    
36.        recycler_cardview=(RecyclerView)this.findViewById(R.id.recycler_cardview);  
37.         LinearLayoutManager linearLayoutManager=new LinearLayoutManager(this);  
38.        linearLayoutManager.setOrientation(OrientationHelper.VERTICAL);  
39.        recycler_cardview.setLayoutManager(linearLayoutManager);  
40.         recycler_cardview.setAdapter(newCardViewAdapter(this));  
41.     }  
42.     class CustomOnClickListener implements View.OnClickListener{  
43.         @Override  
44.         public void onClick(View v) {  
45.            CardViewRecyclerActivity.this.finish();  
46.         }  
47.     }  
48. }  

packagecom.chinaztt.fda.test.CardView;

importandroid.os.Bundle;
importandroid.support.v7.widget.LinearLayoutManager;
importandroid.support.v7.widget.OrientationHelper;
importandroid.support.v7.widget.RecyclerView;
importandroid.view.View;
importandroid.widget.LinearLayout;
importandroid.widget.TextView;

importcom.chinaztt.fda.ui.R;
importcom.chinaztt.fda.ui.base.BaseActivity;

/**
 * 当前类注释:CardView结合RecyclerView使用实例
 * 项目名：FastDev4Android
 * 包名：com.chinaztt.fda.test.CardView
 * 作者：江清清 on 15/11/23 19:34
 * 邮箱：[email protected]
 * QQ： 781931404
 * 公司：江苏中天科技软件技术有限公司
 */
public class CardViewRecyclerActivity extends BaseActivity {
    private LinearLayout top_bar_linear_back;
    private TextView top_bar_title;
    private RecyclerView recycler_cardview;
    @Override
    protected void onCreate(BundlesavedInstanceState) {
        super.onCreate(savedInstanceState);
       setContentView(R.layout.card_view_recycler_layout);
       top_bar_linear_back=(LinearLayout)this.findViewById(R.id.top_bar_linear_back);
       top_bar_linear_back.setOnClickListener(new CustomOnClickListener());
       top_bar_title=(TextView)this.findViewById(R.id.top_bar_title);
       top_bar_title.setText("CardView结合RecyclerView使用实例");

       recycler_cardview=(RecyclerView)this.findViewById(R.id.recycler_cardview);
        LinearLayoutManager linearLayoutManager=new LinearLayoutManager(this);
       linearLayoutManager.setOrientation(OrientationHelper.VERTICAL);
       recycler_cardview.setLayoutManager(linearLayoutManager);
        recycler_cardview.setAdapter(newCardViewAdapter(this));
    }
    class CustomOnClickListener implements View.OnClickListener{
        @Override
        public void onClick(View v) {
           CardViewRecyclerActivity.this.finish();
        }
    }
}

•  

5.运行效果如下: