Android卡片组件(CardView)
目录：
1.CardView概述2. CardView常用的布局属性3.CardView常用的方法4.CardView结合RecyclerView的例子
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的使用。