Android Material Design之CardView（卡片式布局）

目录

1.CardView概念

2.CardView常用属性

3.CardView的使用

3.1 创建CardView

3.2 CardView的使用注意事项

4.CardView案例

4.1 效果图

 4.2 步骤1：在MainActivity.xml中添加ListView

4.3 步骤2：为ListView的item创建布局，并在布局中加入GridView

4.4 步骤3：创建适配器,MsgAdapter.java

4.5 步骤4：创建要展示的内容信息实体类

4.6 步骤5：创建数据工具类，获取内容信息数据

4.7 步骤6：在MainActivity.java进行配置

---

1.CardView概念

         CardView是Android5.0之后新增的卡片式控件，以往，我们需要自定义Shape来实现圆角和阴影效果；现在，这些效果集成到了CardView的属性里。 实际上，CardView也可以看做是一个FrameLayout，继承自FrameLayout，方便作为其他控件容器，提供了圆角和阴影等效果，看上去有立体的感觉。

         使用的时候需要添加依赖库，应该与appcompat-v7保持相同的版本号，避免出现问题。

com.android.support:cardview-v7:版本号

          添加依赖库如下所示：

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support:cardview-v7:28.0.0'
    ......
}

   

2.CardView常用属性

       常用属性如下：

app:cardBackgroundColor	设置背景颜色
app:cardCornerRadius	设置圆角弧度，数值越大，圆角弧度越大
app:contentPadding	设置内容的padding
app:cardElevation	设置卡片的高度，越高，投影范围越大，阴影效果越淡；越小，则越浓
app:cardUseCompatPadding	默认为false，表示是否使用CompatPadding，用于5.0以上，true则表示 添加额外的padding绘制阴影
app:cardPreventCornerOverlap	默认为true，表示是否使用CompatPadding，用于5.0以下，true则表示 添加额外的padding，防止内容和圆角重叠。
android:foreground	可以用来设置点击效果，只在FrameLayout中支持

 

3.CardView的使用

3.1 创建CardView

           CardView的创建需要在布局文件中，可作为其他控件的容器，实例如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:gravity="center">

    <!-- 添加CardView -->
    <android.support.v7.widget.CardView
        app:cardBackgroundColor="#f88cfe"
        app:contentPadding="10dp"
        app:cardCornerRadius="16dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <TextView
            android:background="#f50303"
            android:layout_width="150dp"
            android:layout_height="60dp"
            android:text="Hello World!"
            android:textSize="20sp"
            android:gravity="center"/>
    </android.support.v7.widget.CardView>

</LinearLayout>

         效果图如下：

3.2 CardView的使用注意事项

CardView只有cardBackgroundColor设置的背景颜色才会生效，background设置的背景颜色不会生效，即便如果cardBackgroundColor没有设置颜色。

 

4.CardView案例

4.1 效果图

 4.2 步骤1：在MainActivity.xml中添加ListView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">
    <ListView
        android:id="@+id/listview"
        android:divider="@null"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>

         注意：这里使用了android:divider="@null"，使得item之间的横线被隐藏了。

4.3 步骤2：为ListView的item创建布局，并在布局中加入CardView

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <android.support.v7.widget.CardView
        android:id="@+id/cardview"
        app:cardCornerRadius="10dp"
        app:cardElevation="4dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="12dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <ImageView
                android:id="@+id/imageview"
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:scaleType="centerCrop"
                android:src="@drawable/img05"/>
            <TextView
                android:id="@+id/title_tv"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="8dp"
                android:textColor="#000000"
                android:textSize="20sp"
                android:textStyle="bold"
                android:text="这是标题"/>
            <TextView
                android:id="@+id/content_tv"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="8dp"
                android:layout_marginRight="8dp"
                android:layout_marginBottom="8dp"
                android:text="这是测试文本"/>
        </LinearLayout>

    </android.support.v7.widget.CardView>

</FrameLayout>

4.4 步骤3：创建适配器,MsgAdapter.java

public class MsgAdapter extends BaseAdapter{
    private List<Msg> mMsgList;
    private LayoutInflater mLayoutInflater;
    private Context mContext;
    public MsgAdapter(List<Msg> msgList, Context context) {
        this.mMsgList = msgList;
        this.mLayoutInflater = LayoutInflater.from(context);
        this.mContext = context;
    }
    @Override
    public int getCount() {
        return mMsgList.size();
    }
    @Override
    public Msg getItem(int position) {
        return mMsgList.get(position);
    }
    @Override
    public long getItemId(int position) {
        return position;
    }
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder viewHolder = null;
        if(convertView == null){
            convertView = mLayoutInflater.inflate(R.layout.item_msg,parent,false);
            viewHolder = new ViewHolder();
            viewHolder.imageView = convertView.findViewById(R.id.imageview);
            viewHolder.titleTV = convertView.findViewById(R.id.title_tv);
            viewHolder.contentTV = convertView.findViewById(R.id.content_tv);
            convertView.setTag(viewHolder);
        }else{
            viewHolder = (ViewHolder) convertView.getTag();
        }
        Msg msg = mMsgList.get(position);
        viewHolder.imageView.setImageResource(msg.getImageResourceID());
        viewHolder.titleTV.setText(msg.getTitle());
        viewHolder.contentTV.setText(msg.getContent());
        return convertView;
    }
    private static class ViewHolder{
        ImageView imageView;
        TextView titleTV;
        TextView contentTV;
    }
}

4.5 步骤4：创建要展示的内容信息实体类

public class Msg {
    private int id;
    private int imageResourceID;
    private String title;
    private String content;
    public Msg() {
    }
    public Msg(int id, int imageResourceID, String title, String content) {
        this.id = id;
        this.imageResourceID = imageResourceID;
        this.title = title;
        this.content = content;
    }
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public int getImageResourceID() {
        return imageResourceID;
    }
    public void setImageResourceID(int imageResourceID) {
        this.imageResourceID = imageResourceID;
    }
    public String getTitle() {
        return title;
    }
    public void setTitle(String title) {
        this.title = title;
    }
    public String getContent() {
        return content;
    }
    public void setContent(String content) {
        this.content = content;
    }
}

4.6 步骤5：创建数据工具类，获取内容信息数据

public class MsgUtil {
    public static List<Msg> getMsgList(){
        List<Msg> msgList = new ArrayList<>();
        Msg msg = new Msg(1,R.drawable.img01,
                "华为新一代芯片震撼众人，麒麟990颠覆你认知！",
                "就在近日，vivo旗下的一款子品牌IQOO在深圳首发了它的第一款新机，该消息一经发布，就引得众人纷纷赶来为了一睹其风采，在当时也引起了各界媒体的关注与争先报道。");
        msgList.add(msg);
        msg = new Msg(2,R.drawable.img02,
                "网络提速降费今年将放出四个大招!",
                "今年两会政府工作报告中提出，今年中小企业宽带平均资费再降低15%，移动网络流量平均资费再降低20%以上。随后中国移动、中国电信、中国联通三大运营商作出回应，坚决落实提速降费。");
        msgList.add(msg);
        msg = new Msg(3,R.drawable.img03,
                "【早报】传谷歌第一款智能手表3月或6月上市",
                "外媒称，传闻已久的谷歌智能手表确实已经存在，而且谷歌公司预计它将于今年3月中旬至下旬上市。");
        msgList.add(msg);
        msg = new Msg(4,R.drawable.img04,
                "外媒详测：iPhone XS信号真的有问题吗",
                "高通在基带芯片上的垄断地位即使是苹果也无法撼动，该交的专利费依旧要交。苹果在今年发布的三款iPhone上，全部采用英特尔的调制解调器和通信芯片，并且苹果今年采用了四天线方案.");
        msgList.add(msg);
        msg = new Msg(5,R.drawable.img05,
                "不仅要卖芯片，英特尔还想做 5G 时代的云端生意",
                "上网速度更快，是大部分消费者对于 5G 网络最直观的印象，但和 4G 相比增速是否明显，高速网络又有什么新玩法，在 5G 正式落地前，我们都不好妄加揣测。");
        msgList.add(msg);
        return msgList;
    }
}

4.7 步骤6：在MainActivity.java进行配置

public class MainActivity extends AppCompatActivity {
    private ListView listView;
    private List<Msg> msgList;
    private MsgAdapter adapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        listView = findViewById(R.id.listview);
        msgList = MsgUtil.getMsgList();
        adapter = new MsgAdapter(msgList,this);
        listView.setAdapter(adapter);
    }
}