CardView完全解析与RecyclerView结合使用

冷不防 2022-05-08 10:52 314阅读 0赞

#  #

转载请标明出处：

[http://blog.csdn.net/developer\_jiangqq/article/details/50000733][http_blog.csdn.net_developer_jiangqq_article_details_50000733]

本文出自:[【江清清的博客】][Link 1]

# (一).前言: #

【好消息】个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新，请大家关注收藏:[http://www.lcode.org][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的其他属性以及作用如下:

<table> 
 <tbody> 
 <tr> 
 <td> card_view:cardElevation </td> 
 <td> 阴影的大小 </td> 
 </tr> 
 <tr> 
 <td> card_view:cardMaxElevation </td> 
 <td> 阴影最大值 </td> 
 </tr> 
 <tr> 
 <td> card_view:cardBackgroundCollor </td> 
 <td> 卡片的背景色 </td> 
 </tr> 
 <tr> 
 <td> card_view:cardCornerRadius </td> 
 <td> 卡片的圆角大小 </td> 
 </tr> 
 <tr> 
 <td> card_view:contentPadding </td> 
 <td> 卡片内容与边距的间隔 </td> 
 </tr> 
 <tr> 
 <td> card_view:contentPaddingBottom </td> 
 <td> 卡片内容与底部的间隔 </td> 
 </tr> 
 <tr> 
 <td> card_view:contentPaddingTop </td> 
 <td> 卡片内容与顶部的间隔 </td> 
 </tr> 
 <tr> 
 <td> card_view:contentPaddingLeft </td> 
 <td> 卡片内容与左边的间隔 </td> 
 </tr> 
 <tr> 
 <td> card_view:contentPaddingRight </td> 
 <td> 卡片内容与右边的间隔 </td> 
 </tr> 
 <tr> 
 <td> card_view:contentPaddingStart </td> 
 <td> &nbsp; </td> 
 </tr> 
 <tr> 
 <td> card_view:contentPaddingEnd </td> 
 <td> &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

# (三).CardView组件引入: #

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

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

![SouthEast 1][]

**\[html\]** [view plain][] [copy][view plain]

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][view plain]

1. <?xmlversionxmlversion=“1.0” encoding=“utf-8”?>
2. <LinearLayoutxmlns:androidLinearLayoutxmlns:android=“http://schemas.android.com/apk/res/android”
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. <includelayoutincludelayout=“@layout/common\_top\_bar\_layout”/>
8. <android.support.v7.widget.CardView
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. <TextView
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. </android.support.v7.widget.CardView>
25. <android.support.v7.widget.CardView
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. <TextView
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. </android.support.v7.widget.CardView>
43. <android.support.v7.widget.CardView
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. <TextView
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. </android.support.v7.widget.CardView>
61. <android.support.v7.widget.CardView
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. <TextView
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. </android.support.v7.widget.CardView>
81. </LinearLayout>

<?xmlversion="1.0" encoding="utf-8"?>
 <LinearLayoutxmlns: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"
 android:layout_height="match_parent">
 <includelayout="@layout/common_top_bar_layout"/>
 <android.support.v7.widget.CardView
 android:layout_marginTop="3dp"
 android:layout_marginLeft="3dp"
 android:layout_marginRight="3dp"
 android:id="@+id/card_view_one"
 android:layout_gravity="center"
 android:layout_width="match_parent"
 android:layout_height="100dp"
 card_view:cardCornerRadius="5dp">
 <TextView
 android:id="@+id/info_text_one"
 android:text="CardView1测试"
 android:textSize="16sp"
 android:gravity="center"
 android:layout_width="match_parent"
 android:layout_height="match_parent" />
 </android.support.v7.widget.CardView>
 <android.support.v7.widget.CardView
 android:layout_marginTop="3dp"
 android:layout_marginLeft="3dp"
 android:layout_marginRight="3dp"
 android:id="@+id/card_view_two"
 android:layout_gravity="center"
 android:layout_width="match_parent"
 android:layout_height="100dp"
 card_view:cardCornerRadius="5dp"
 card_view:cardBackgroundColor="#FFE4B5">
 <TextView
 android:id="@+id/info_text_two"
 android:text="CardView2测试"
 android:textSize="16sp"
 android:gravity="center"
 android:layout_width="match_parent"
 android:layout_height="match_parent" />
 </android.support.v7.widget.CardView>
 <android.support.v7.widget.CardView
 android:layout_marginTop="3dp"
 android:layout_marginLeft="3dp"
 android:layout_marginRight="3dp"
 android:id="@+id/card_view_three"
 android:layout_gravity="center"
 android:layout_width="match_parent"
 android:layout_height="100dp"
 card_view:cardCornerRadius="5dp"
 card_view:cardBackgroundColor="#CAE1FF">
 <TextView
 android:id="@+id/info_text_three"
 android:text="CardView3测试"
 android:textSize="16sp"
 android:gravity="center"
 android:layout_width="match_parent"
 android:layout_height="match_parent" />
 </android.support.v7.widget.CardView>
 <android.support.v7.widget.CardView
 android:layout_marginTop="3dp"
 android:layout_marginLeft="3dp"
 android:layout_marginRight="3dp"
 android:id="@+id/card_view_four"
 android:layout_gravity="center"
 android:layout_width="match_parent"
 android:layout_height="100dp"
 card_view:cardCornerRadius="5dp"
 card_view:cardBackgroundColor="#7CCD7C"
 card_view:cardElevation="5dp"
 card_view:cardMaxElevation="5dp">
 <TextView
 android:id="@+id/info_text_four"
 android:text="CardView4测试"
 android:textSize="16sp"
 android:gravity="center"
 android:layout_width="match_parent"
 android:layout_height="match_parent" />
 </android.support.v7.widget.CardView>
 </LinearLayout>

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

![SouthEast 2][]

# (五).CardView结合RecyclerView: #

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

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

**\[html\]** [view plain][] [copy][view plain]

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

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

**\[java\]** [view plain][] [copy][view plain]

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. \* 邮箱：jiangqqlmj@163.com
20. \* QQ： 781931404
21. \* 公司：江苏中天科技软件技术有限公司
22. \*/
23. public class CardViewAdapter extends RecyclerView.Adapter<CardViewAdapter.ItemCardViewHolder>\{
24. private List<CardViewBean> 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
 * 邮箱：jiangqqlmj@163.com
 * QQ： 781931404
 * 公司：江苏中天科技软件技术有限公司
 */
 public class CardViewAdapter extends RecyclerView.Adapter<CardViewAdapter.ItemCardViewHolder>{
 private List<CardViewBean> 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][view plain]

1. public class CardDataUtils \{
2. public static List<CardViewBean> getCardViewDatas()\{
3. List<CardViewBean> beans=new ArrayList<CardViewBean>();
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<CardViewBean> getCardViewDatas(){
 List<CardViewBean> beans=new ArrayList<CardViewBean>();
 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][view plain]

1. <!–cardView 实例中的颜色–>
2. <color name=“color\_0”>\#FFF0F5</color>
3. <color name=“color\_1”>\#FFE1FF</color>
4. <color name=“color\_2”>\#E6E6FA</color>
5. <color name=“color\_3”>\#C1FFC1</color>
6. <color name=“color\_4”>\#B22222</color>
7. <color name=“color\_5”>\#836FFF</color>
8. <color name=“color\_6”>\#68228B</color>
9. <color name=“color\_7”>\#5CACEE</color>
10. <color name=“color\_8”>\#43CD80</color>
11. <color name=“color\_9”>\#00EE00</color>
12. <color name=“color\_10”>\#708090</color>

<color name="color_0">#FFF0F5</color>
 <color name="color_1">#FFE1FF</color>
 <color name="color_2">#E6E6FA</color>
 <color name="color_3">#C1FFC1</color>
 <color name="color_4">#B22222</color>
 <color name="color_5">#836FFF</color>
 <color name="color_6">#68228B</color>
 <color name="color_7">#5CACEE</color>
 <color name="color_8">#43CD80</color>
 <color name="color_9">#00EE00</color>
 <color name="color_10">#708090</color>

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

**\[java\]** [view plain][] [copy][view plain]

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. \* 邮箱：jiangqqlmj@163.com
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
     * 邮箱：jiangqqlmj@163.com
     * 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.运行效果如下:

![SouthEast 3][]

[http_blog.csdn.net_developer_jiangqq_article_details_50000733]: http://blog.csdn.net/developer_jiangqq/article/details/50000733
[Link 1]: http://blog.csdn.net/developer_jiangqq
[http_www.lcode.org]: http://www.lcode.org/
[SouthEast]: /images/20220508/47bae1e939ff4943ace1a09feb35bbcb.png
[SouthEast 1]: /images/20220508/7921fd1e2b0a4165a28176c1a976d274.png
[view plain]: https://blog.csdn.net/qq_38228254/article/details/79566153#
[SouthEast 2]: /images/20220508/861f8552e432499e8b466dd418518758.png
[SouthEast 3]: /images/20220508/b3420cb384954b18b8985b0fe580a638.png