首页 > 代码库 > 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的布局贴上来:
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:app="http://schemas.android.com/apk/res-auto"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:orientation="vertical">
- <android.support.v7.widget.CardView
- android:layout_width="match_parent"
- android:layout_height="108dp"
- app:cardCornerRadius="10dp"
- app:cardElevation="5dp">
- <RelativeLayout
- android:layout_width="match_parent"
- android:layout_height="match_parent">
- <ImageView
- android:id="@+id/iv"
- android:layout_width="108dp"
- android:layout_height="108dp"
- android:padding="12dp"
- android:scaleType="centerCrop"/>
- <TextView
- android:id="@+id/content"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_centerVertical="true"
- android:layout_marginLeft="36dp"
- android:layout_toRightOf="@id/iv"
- android:gravity="center"
- android:padding="3dp"
- android:text=""/>
- </RelativeLayout>
- </android.support.v7.widget.CardView>
- </LinearLayout>
大家看到,我在item的布局中使用了CardView节点,表示一个item就是一张卡片,其中app:cardCornerRadius="10dp"属性表示每个item的圆角大小,app:cardElevation="5dp"属性表示海拔高度,其实就是Z轴的高度,设置了Z轴高度之后也就有了阴影效果,当然你也可以设置其他属性,比如app:cardBackgroundColor=""表示每个item的背景颜色。其他的都很简单。
再来看看Adapter:
- public class MyAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
- private List<ItemEntity> list;
- private Context context;
- private LayoutInflater inflater;
- public MyAdapter(Context context, List<ItemEntity> list) {
- this.context = context;
- this.list = list;
- inflater = LayoutInflater.from(context);
- }
- @Override
- public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
- View view = inflater.inflate(R.layout.item, null);
- return new MyViewHolder(view);
- }
- @Override
- public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
- MyViewHolder holder1 = (MyViewHolder) holder;
- ItemEntity itemEntity = list.get(position);
- holder1.content.setText(itemEntity.getContent());
- holder1.imageView.setImageResource(itemEntity.getImg());
- }
- @Override
- public int getItemCount() {
- return list.size();
- }
- private class MyViewHolder extends RecyclerView.ViewHolder{
- private ImageView imageView;
- private TextView content;
- public MyViewHolder(View itemView) {
- super(itemView);
- imageView = (ImageView) itemView.findViewById(R.id.iv);
- content = (TextView) itemView.findViewById(R.id.content);
- }
- }
- }
Adapter中就是普通的RecyclerView 的Adapter,这都很简单,没啥好说的。
3.收拾好RecyclerView并显示
最后,在Activity中初始化数据并交给RecyclerView去显示即可:
- public class MainActivity extends AppCompatActivity {
- private List<ItemEntity> list;
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
- RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
- initData();
- MyAdapter adapter = new MyAdapter(this, list);
- recyclerView.setLayoutManager(new LinearLayoutManager(this));
- recyclerView.setAdapter(adapter);
- }
- private void initData() {
- list = new ArrayList<>();
- int[] imgs = new int[]{R.drawable.p1,R.drawable.p2,R.drawable.p3,R.drawable.p4,R.drawable.p5,R.drawable.p6,
- R.drawable.p7,R.drawable.p8,R.drawable.p9,R.drawable.p10,R.drawable.p11,R.drawable.p12,R.drawable.p13,
- R.drawable.p14,R.drawable.p15};
- for (int img : imgs) {
- ItemEntity itemEntity = new ItemEntity();
- itemEntity.setContent("风光 " + img);
- itemEntity.setImg(img);
- list.add(itemEntity);
- }
- }
- }
就是这么简单。
以上。
Android5.0之CardView的使用