Android卡片组件(CardView)

1.CardView概述

CardView是google Material Desgin推出的一款卡片式view，与FrametLayout类似，只是其中多了一些属性，比如：控件圆角和阴影效果等，同时他也可以作为父布局，包裹其他的组件。

2.CardView常用的布局属性

                                                                                                                                                             app:cardPreventCornerOverlap="true"//防止cardview内部内容与边角重叠                                                                                    app:cardElevation="10dp"//阴影                                                                                    app:cardBackgroundColor="@color/colorAccent"//背景颜色                                                                                    app:cardCornerRadius="10dp"//圆角                                                                                    app:contentPadding="4dp"//内容内边距                                                                                    android:clickable="true"//开启点击效果                                                                                    android:foreground="?android:attr/selectableItemBackground"//设置水波纹点击效果

3.CardView常用的方法

                                                                                                //设置最大的阴影                                                                                                    cardView.getMaxCardElevation();                                                                                                    //设置阴影                                                                                                    cardView.setCardElevation(10);                                                                                                    //设置圆角                                                                                                    cardView.setRadius(8);                                                                                                    //设置背景颜色                                                                                                    cardView.setCardBackgroundColor(R.color.colorBtn);                                                                                                    //设置内容与cardview的内边距                                                                                                    cardView.setContentPadding(4,4,4,4);                                                                                                    //设置防止内容与边角重叠                                                                                                    cardView.setPreventCornerOverlap(true);                                                                                                    //是否使用CompatPadding                                                                                                    cardView.setUseCompatPadding(false);

4.CardView结合RecyclerView的例子

4.1效果截图

4.2 单个item布局文件：cardview_item.xml

                                                                        <?xml version="1.0" encoding="utf-8"?>                                                                             xmlns:android="http://schemas.android.com/apk/res/android"                                                                                xmlns:app="http://schemas.android.com/apk/res-auto"                                                                                android:orientation="vertical"                                                                                android:padding="20dp"                                                                                android:layout_width="match_parent"                                                                                android:layout_height="match_parent">                                                                                                                                                                                                                                                 android:id="@+id/card_item"                                                                                    app:cardCornerRadius="10dp"                                                                                    android:clickable="true"                                                                                    android:foreground="?android:attr/selectableItemBackground"                                                                                    app:cardElevation="10dp"                                                                                    app:contentPaddingRight="2dp"                                                                                    app:contentPaddingBottom="5dp"                                                                                    app:contentPaddingLeft="2dp"                                                                                    app:contentPaddingTop="5dp"                                                                                    app:cardPreventCornerOverlap="true"                                                                                    android:layout_height="wrap_content"                                                                                    android:layout_width="match_parent"                                                                                >                                                                                                                                                                            android:layout_width="match_parent"                                                                                        android:layout_height="wrap_content">                                                                                                                                                                                    android:id="@+id/image_layout"                                                                                            android:layout_width="match_parent"                                                                                            android:layout_height="wrap_content">                                                                                                                                                                                            android:id="@+id/card_image"                                                                                                android:src="@drawable/card7"                                                                                                                                                                             android:scaleType="centerCrop"                                                                                                android:layout_width="match_parent"                                                                                                android:layout_height="300dp" />                                                                                                                                                                                            android:layout_below="@+id/card_image"                                                                                                android:id="@+id/card_desc"                                                                                                android:textSize="18sp"                                                                                                android:text="描述巴拉巴拉巴拉巴拉巴拉巴拉描述巴拉巴拉巴拉巴拉巴拉巴拉"                                                                                                android:padding="5dp"                                                                                                android:layout_width="match_parent"                                                                                                android:layout_height="wrap_content" />                                                                                                                                                                                                                                                                                                                                                         android:orientation="horizontal"                                                                                            android:layout_below="@+id/image_layout"                                                                                            android:layout_width="match_parent"                                                                                            android:background="#00000000"                                                                                            android:layout_height="wrap_content">                                                                                                                                                                                            android:text="不喜欢"                                                                                                android:id="@+id/dislike"                                                                                                android:textColor="@color/colorPrimary"                                                                                                android:layout_width="0dp"                                                                                                android:layout_weight="1"                                                                                                android:background="#fff"                                                                                                android:layout_height="60dp" />                                                                                                                                                                                            android:text="喜欢"                                                                                                android:textColor="@color/colorPrimary"                                                                                                android:background="#fff"                                                                                                android:id="@+id/like"                                                                                                android:layout_width="0dp"                                                                                                android:layout_weight="1"                                                                                                android:layout_height="60dp" />

4.3 RecyclerView的adapter类：RecyclerViewAdapter.java

                                                                        package com.example.cardview;                                                                                                                                                         import android.content.Context;                                                                            import android.support.v7.widget.CardView;                                                                            import android.support.v7.widget.RecyclerView;                                                                            import android.view.LayoutInflater;                                                                            import android.view.View;                                                                            import android.view.ViewGroup;                                                                            import android.widget.Button;                                                                            import android.widget.ImageView;                                                                            import android.widget.TextView;                                                                            import android.widget.Toast;                                                                                                                                                         import java.util.ArrayList;                                                                                                                                                         /**                                                                             * Created by elimy on 2016-12-26.                                                                             */                                                                            public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.CardViewHolder> {                                                                                private Context context;                                                                                private ArrayList<CardData> datalist;                                                                                                                                                             public RecyclerViewAdapter() {                                                                                }                                                                                                                                                             /*                                                                                * 带参构造函数，传入上下文和需要绑定的数据集合                                                                                * */                                                                                public RecyclerViewAdapter(Context cx,ArrayList datalist) {                                                                                    this.context=cx;                                                                                    this.datalist=datalist;                                                                                }                                                                                                                                                             /*                                                                                *创建ViewHolder，持有布局映射                                                                                * */                                                                                @Override                                                                                public CardViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {                                                                                                                                                                 //通过布局加载器获取到CardView布局view                                                                                    View view= LayoutInflater.from(context).inflate(R.layout.cardview_item,parent,false);                                                                                    //通过获取到的布局view实例化一个自己实现的CardViewHolder                                                                                    CardViewHolder cardViewHolder= new CardViewHolder(view);                                                                                    //返回一个已绑定布局的viewHolder，避免重复findViewById()                                                                                    return cardViewHolder;                                                                                }                                                                                                                                                             /*                                                                                *onBindViewHolder方法做药作用就是将数据集绑定到布局view，以及添加一些事件点击监听                                                                                * */                                                                                @Override                                                                                public void onBindViewHolder(RecyclerViewAdapter.CardViewHolder holder, int position) {                                                                                                                                                                final int pos=position;                                                                                                                                                                 //将view中的view和数据集绑定                                                                                    holder.cardImage.setImageResource(datalist.get(position).getPic());                                                                                    holder.cardDesc.setText(datalist.get(position).getDesc());                                                                                                                                                                 //给整个cardview添加点击事件                                                                                    holder.cardView.setOnClickListener(new View.OnClickListener() {                                                                                        @Override                                                                                        public void onClick(View v) {                                                                                            Toast.makeText(context,"You click card"+pos,Toast.LENGTH_SHORT).show();                                                                                        }                                                                                    });                                                                                                                                                                 //设置不喜欢的按钮点击监听事件                                                                                    holder.disLikeBtn.setOnClickListener(new View.OnClickListener() {                                                                                        @Override                                                                                        public void onClick(View v) {                                                                                            Toast.makeText(context,"你为啥不喜欢我呢？",Toast.LENGTH_SHORT).show();                                                                                        }                                                                                    });                                                                                                                                                                 //设置喜欢的按钮点击监听事件                                                                                    holder.likeBtn.setOnClickListener(new View.OnClickListener() {                                                                                        @Override                                                                                        public void onClick(View v) {                                                                                            Toast.makeText(context,"我就知道你喜欢我！",Toast.LENGTH_SHORT).show();                                                                                        }                                                                                    });                                                                                }                                                                                                                                                             /*                                                                                * 返回recyclerview数据项的个数                                                                                * */                                                                                @Override                                                                                public int getItemCount() {                                                                                    return datalist.size();                                                                                }                                                                                                                                                             /*                                                                                * 自定义实现viewholder类                                                                                * */                                                                                class CardViewHolder extends RecyclerView.ViewHolder{                                                                                    CardView cardView;                                                                                    ImageView cardImage;                                                                                    TextView cardDesc;                                                                                    Button likeBtn,disLikeBtn;                                                                                                                                                                                                                                              public CardViewHolder(View itemView) {                                                                                        super(itemView);                                                                                        cardView= (CardView) itemView.findViewById(R.id.card_item);                                                                                        cardImage = (ImageView) itemView.findViewById(R.id.card_image);                                                                                        cardDesc= (TextView) itemView.findViewById(R.id.card_desc);                                                                                        likeBtn = (Button) itemView.findViewById(R.id.like);                                                                                        disLikeBtn= (Button) itemView.findViewById(R.id.dislike);                                                                                                                                                                 }                                                                                }                                                                            }

4.4 数据对象类：CardData.java

                                                                        package com.example.cardview;                                                                                                                                                         import java.io.Serializable;                                                                                                                                                         /**                                                                             * 该类为cardview和recyclerview的数据填充类                                                                             * Created by elimy on 2016-12-26.                                                                             */                                                                            public class CardData implements Serializable {                                                                                private int pic;                                                                                private String desc;                                                                                                                                                             public CardData(int pic, String desc) {                                                                                    this.pic = pic;                                                                                    this.desc = desc;                                                                                }                                                                                                                                                             public String getDesc() {                                                                                    return desc;                                                                                }                                                                                                                                                             public void setDesc(String desc) {                                                                                    this.desc = desc;                                                                                }                                                                                                                                                             public int getPic() {                                                                                    return pic;                                                                                }                                                                                                                                                             public void setPic(int pic) {                                                                                    this.pic = pic;                                                                                }                                                                                                                                                             @Override                                                                                public String toString() {                                                                                    return "CardData{" +                                                                                            "pic=" + pic +                                                                                            ", desc='" + desc + '\'' +                                                                                            '}';                                                                                }                                                                            }

4.5 主布局文件

                                                                        <?xml version="1.0" encoding="utf-8"?>                                                                                                                                                            xmlns:android="http://schemas.android.com/apk/res/android"                                                                                android:id="@+id/recycler_view"                                                                                android:layout_height="match_parent"                                                                                android:layout_width="match_parent"                                                                                >

4.6 主布局类：MainActivity.java

                                                                        package com.example.cardview;                                                                                                                                                         import android.os.Bundle;                                                                            import android.support.v7.app.AppCompatActivity;                                                                            import android.support.v7.widget.LinearLayoutManager;                                                                            import android.support.v7.widget.RecyclerView;                                                                                                                                                         import java.util.ArrayList;                                                                                                                                                         public class MainActivity extends AppCompatActivity {                                                                                                                                                             private RecyclerView recyclerView;                                                                                private  RecyclerViewAdapter mAdapter;                                                                                private ArrayList<CardData> dataList;                                                                                @Override                                                                                protected void onCreate(Bundle savedInstanceState) {                                                                                    super.onCreate(savedInstanceState);                                                                                    setContentView(R.layout.activity_main);                                                                                    //初始化recyclerView                                                                                    recyclerView= (RecyclerView) findViewById(R.id.recycler_view);                                                                                                                                                                 LinearLayoutManager linearManager=new LinearLayoutManager(this);                                                                                    //初始化数据集                                                                                    initData();                                                                                    //初始化recyclerView                                                                                    mAdapter=new RecyclerViewAdapter(this,dataList);                                                                                                                                                                 //设置Adapter                                                                                    recyclerView.setAdapter(mAdapter);                                                                                    //设置布局类型为线性布局                                                                                    recyclerView.setLayoutManager(linearManager);                                                                                }                                                                                                                                                             /*                                                                                * 构造数据集                                                                                * */                                                                                private void initData() {                                                                                    dataList=new ArrayList<CardData>();                                                                                    dataList.add(new CardData(R.drawable.card1,"说爱我说爱我，你怎么就是不爱我..."));                                                                                    dataList.add(new CardData(R.drawable.card2,"噜啦啦噜啦啦噜啦噜啦嘞..."));                                                                                    dataList.add(new CardData(R.drawable.card3,"后宫佳丽三千，我独宠你一有人！"));                                                                                    dataList.add(new CardData(R.drawable.card4,"说爱我说爱我，你怎么就是不爱我..."));                                                                                    dataList.add(new CardData(R.drawable.card5,"噜啦啦噜啦啦噜啦噜啦嘞..."));                                                                                    dataList.add(new CardData(R.drawable.card6,"后宫佳丽三千，我独宠你一有人！"));                                                                                    dataList.add(new CardData(R.drawable.card7,"花花世界鸳鸯蝴蝶..."));                                                                                }                                                                            }

ps: CardView的就这么多了，其实相对来说比较难的还是RecyclerView的使用，接下来主要会研究一下RecyclerView的使用。

目录：

1.CardView概述

2.CardView常用的布局属性

3.CardView常用的方法

4.CardView结合RecyclerView的例子

4.1效果截图

4.2 单个item布局文件：cardview_item.xml

4.3 RecyclerView的adapter类：RecyclerViewAdapter.java

4.4 数据对象类：CardData.java

4.6 主布局类：MainActivity.java

更多相关文章

随机推荐