Android5.0之CardView的使用

别裁伪体亲风雅,转益多师是汝师。这篇文章主要讲述Android5.0之CardView的使用相关的知识,希望能为你提供帮助。
CardView也是一个非常炫酷的控件,一般我们将CardView配合RecyclerView来使用,当然,CardView也可以配合ListView来使用,都是可以的。OK,我们先来看一张CardView+RecyclerView实现的效果图:

Android5.0之CardView的使用

文章图片

每一个item都是圆角的,而且还有阴影的效果,这也就是Google的MD设计规范,有3D的感觉,圆角的效果自己做应该是很容易,但是阴影的效果如果要自己做确实不太容易。好吧,那我们今天就来看看这个效果怎么实现吧!
1.添加依赖这里我使用了RecyclerView+CardView来实现这样的效果,当然,你如果使用ListView一样是可以实现这样的效果的。OK,我需要下面两个依赖,一个RecyclerView的,一个是CardView的。
      compile ‘com.Android.support:recyclerview-v7:23.1.1‘
      compile ‘com.android.support:cardview-v7:23.1.1‘

2.构造RecyclerView的Adapter构造RecyclerView的Adapter,那么我先把item的布局贴上来:
[java] view plain copy print?
Android5.0之CardView的使用

文章图片
Android5.0之CardView的使用

文章图片
  1. < ?xml  version="1.0"  encoding="utf-8"?>    
  2. < LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"   
  3.                             xmlns:app="http://schemas.android.com/apk/res-auto"   
  4.                             android:layout_width="match_parent"   
  5.                             android:layout_height="match_parent"   
  6.                             android:orientation="vertical">    
  7.    
  8.         < android.support.v7.widget.CardView   
  9.                 android:layout_width="match_parent"   
  10.                 android:layout_height="108dp"   
  11.                 app:cardCornerRadius="10dp"   
  12.                 app:cardElevation="5dp">    
  13.    
  14.                 < RelativeLayout   
  15.                         android:layout_width="match_parent"   
  16.                         android:layout_height="match_parent">    
  17.    
  18.                         < ImageView   
  19.                                 android:id="@+id/iv"   
  20.                                 android:layout_width="108dp"   
  21.                                 android:layout_height="108dp"   
  22.                                 android:padding="12dp"   
  23.                                 android:scaleType="centerCrop"/>    
  24.    
  25.                         < TextView   
  26.                                 android:id="@+id/content"   
  27.                                 android:layout_width="match_parent"   
  28.                                 android:layout_height="wrap_content"   
  29.                                 android:layout_centerVertical="true"   
  30.                                 android:layout_marginLeft="36dp"   
  31.                                 android:layout_toRightOf="@id/iv"   
  32.                                 android:gravity="center"   
  33.                                 android:padding="3dp"   
  34.                                 android:text=""/>    
  35.                 < /RelativeLayout>    
  36.         < /android.support.v7.widget.CardView>    
  37. < /LinearLayout>    

大家看到,我在item的布局中使用了CardView节点,表示一个item就是一张卡片,其中app:cardCornerRadius="10dp"属性表示每个item的圆角大小,app:cardElevation="5dp"属性表示海拔高度,其实就是Z轴的高度,设置了Z轴高度之后也就有了阴影效果,当然你也可以设置其他属性,比如app:cardBackgroundColor=""表示每个item的背景颜色。其他的都很简单。
【Android5.0之CardView的使用】再来看看Adapter:
[java] view plain copy print?
Android5.0之CardView的使用

文章图片
Android5.0之CardView的使用

文章图片
  1. public  class  MyAdapter  extends  RecyclerView.Adapter< RecyclerView.ViewHolder>   {   
  2.         private  List< ItemEntity>   list;    
  3.         private  Context  context;    
  4.         private  LayoutInflater  inflater;    
  5.    
  6.         public  MyAdapter(Context  context,  List< ItemEntity>   list)  {   
  7.                 this.context  =  context;    
  8.                 this.list  =  list;    
  9.                 inflater  =  LayoutInflater.from(context);    
  10.         }   
  11.    
  12.         @Override   
  13.         public  RecyclerView.ViewHolder  onCreateViewHolder(ViewGroup  parent,  int  viewType)  {   
  14.                 View  view  =  inflater.inflate(R.layout.item,  null);    
  15.                 return  new  MyViewHolder(view);    
  16.         }   
  17.    
  18.         @Override   
  19.         public  void  onBindViewHolder(RecyclerView.ViewHolder  holder,  int  position)  {   
  20.                 MyViewHolder  holder1  =  (MyViewHolder)  holder;    
  21.                 ItemEntity  itemEntity  =  list.get(position);    
  22.                 holder1.content.setText(itemEntity.getContent());    
  23.                 holder1.imageView.setImageResource(itemEntity.getImg());    
  24.         }   
  25.    
  26.         @Override   
  27.         public  int  getItemCount()  {   
  28.                 return  list.size();    
  29.         }   
  30.         private  class  MyViewHolder  extends  RecyclerView.ViewHolder{   
  31.    
  32.                 private  ImageView  imageView;    
  33.                 private  TextView  content;    
  34.                 public  MyViewHolder(View  itemView)  {   
  35.                         super(itemView);    
  36.                         imageView  =  (ImageView)  itemView.findViewById(R.id.iv);    
  37.                         content  =  (TextView)  itemView.findViewById(R.id.content);    
  38.                 }   
  39.         }   
  40. }   

Adapter中就是普通的RecyclerView 的Adapter,这都很简单,没啥好说的。
3.收拾好RecyclerView并显示最后,在Activity中初始化数据并交给RecyclerView去显示即可:
[java] view plain copy print?
Android5.0之CardView的使用

文章图片
Android5.0之CardView的使用

文章图片
  1. public  class  MainActivity  extends  AppCompatActivity  {   
  2.    
  3.         private  List< ItemEntity>   list;    
  4.    
  5.         @Override   
  6.         protected  void  onCreate(Bundle  savedInstanceState)  {   
  7.                 super.onCreate(savedInstanceState);    
  8.                 setContentView(R.layout.activity_main);    
  9.                 RecyclerView  recyclerView  =  (RecyclerView)  findViewById(R.id.recycler_view);    
  10.                 initData();    
  11.                 MyAdapter  adapter  =  new  MyAdapter(this,  list);    
  12.                 recyclerView.setLayoutManager(new  LinearLayoutManager(this));    
  13.                 recyclerView.setAdapter(adapter);    
  14.         }   
  15.    
  16.         private  void  initData()  {   
  17.                 list  =  new  ArrayList< > ();    
  18.                 int[]  imgs  =  new  int[]{R.drawable.p1,R.drawable.p2,R.drawable.p3,R.drawable.p4,R.drawable.p5,R.drawable.p6,   
  19.                                 R.drawable.p7,R.drawable.p8,R.drawable.p9,R.drawable.p10,R.drawable.p11,R.drawable.p12,R.drawable.p13,   
  20.                                 R.drawable.p14,R.drawable.p15};    
  21.                 for  (int  img  :  imgs)  {   
  22.                         ItemEntity  itemEntity  =  new  ItemEntity();    
  23.                         itemEntity.setContent("风光    "  +  img);    
  24.                         itemEntity.setImg(img);    
  25.                         list.add(itemEntity);    
  26.                 }   
  27.         }   
  28. }   

就是这么简单。
 
以上。






    推荐阅读