首页 > 代码库 > Android5.0之CardView的使用

Android5.0之CardView的使用

CardView也是一个非常炫酷的控件,一般我们将CardView配合RecyclerView来使用,当然,CardView也可以配合ListView来使用,都是可以的。OK,我们先来看一张CardView+RecyclerView实现的效果图:

技术分享

每一个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?技术分享技术分享
  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的背景颜色。其他的都很简单。

再来看看Adapter:

[java] view plain copy print?技术分享技术分享
  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?技术分享技术分享
  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. }  


就是这么简单。

 

以上。

Android5.0之CardView的使用