首页 » 博文 » 类别 » Android » 正文
网站地图

【FastDev4Android框架开发】CardView完全解析与RecyclerView结合使用(三十二)

jerry Android 2015年11月26日 收藏

(一).前言:   

         作为Android L开始，Google更新的除了RecyclerView之外的另一控件就是CardView，其中Google官方应用Google Now就采用了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引入依赖即可:


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


(四).CardView基本使用:

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


  1. <?xmlversion="1.0" encoding="utf-8"?>
  2. <LinearLayoutxmlns: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.     <includelayout="@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>


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

(五).CardView结合RecyclerView:

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

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


  1. <?xmlversion="1.0" encoding="utf-8"?>
  2. <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
  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.     <android.support.v7.widget.CardView
  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.         <TextView
  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.     </android.support.v7.widget.CardView>
  24. </LinearLayout>


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

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


  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. }


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


  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. }


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

  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>


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


  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. }


5.运行效果如下:

(六).最后总结

           今天我们对于CardView做了基本讲解以及相关使用方法，同时也通过与RecyclerView的结合让我们巩固CardView的使用。CardView控件整体比较简单，相信大家还是比较容易理解，以后的项目中大家就可以使用CardView控件了(例如在新闻列表功能中等)。

           本次具体实例注释过的全部代码已经上传到FastDev4Android项目中了。同时欢迎大家去Github站点进行clone或者下载浏览:

https://github.com/jiangqqlmj/FastDev4Android 同时欢迎大家star和fork整个开源快速开发框架项目~

           本人录制AA(Android Annotations)注入框架的视频教程已经上线了,欢迎大家前往观看。http://www.cniao5.com/course/10074

         

         

Android开发框架RecyclerViewCardViewadapters
推荐文章
最新文章
基于ThinkPHP5开发的后台整合系统

基于ThinkPHP5开发的后台整合系统

ThinkPHP5开发的电脑端和手机端商城购物系统（含支付）

ThinkPHP5开发的电脑端和手机端商城购物系统（含支付）

Yii2和aceAdmin 开发的后台管理系统

Yii2和aceAdmin 开发的后台管理系统

Yii2打造RBAC后台通用权限的管理系统

Yii2打造RBAC后台通用权限的管理系统

最新Yii2+AdminLTE开发经典内容管理系统

最新Yii2+AdminLTE开发经典内容管理系统

Yii2 开发的经典博客系统

Yii2 开发的经典博客系统

Yii2 打造经典CMS管理系统

Yii2 打造经典CMS管理系统

Yii1 打造网上商城购物系统

Yii1 打造网上商城购物系统