CardView之MD风格卡片式布局使用

介绍

  CardView 是 Google 官方发布 MD 风格卡片布局控件，开发者可以很方便的使用它将布局做成卡片效果。CardView 继承自 FrameLayout，并在其基础上添加了圆角和阴影等效果。也就是说，你只需要在xml文件中一行代码就可以实现圆角+阴影效果了，这会为你的UI增色不少，快学习运用起来吧！

效果预览

---

控件常用属性

• 设置卡片圆角大小：

  app:cardCornerRadius="10dp"

• 设置卡片Z轴高度：高度越高则阴影效果越重

  app:cardElevation="10dp"

• 设置卡片背景色：

  app:cardBackgroundColor="@color/blue"
  Tips：设置android:background="@color/blue"不会起作用。

• 设置卡片内边距：

  app:contentPadding="1dp"

• 设置卡片内部上侧边距：（其他类似）

  app:contentPaddingTop="1dp"

---

布局文件（具体如何使用？）

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".blog.Case50"
    tools:ignore="MissingConstraints">

    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/green"
        android:gravity="center"
        android:text="CardView卡片式布局（圆角+阴影效果）"
        android:textColor="@color/white"
        android:textSize="20sp" />

    <androidx.cardview.widget.CardView
        android:id="@+id/cardView1"
        android:layout_width="300dp"
        android:layout_height="150dp"
        app:cardBackgroundColor="@color/blue"
        app:layout_constraintBottom_toTopOf="@id/cardView2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/title">

        <TextView
            android:id="@+id/title1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="CardView示例1：默认效果（圆角+阴影）"
            android:textColor="@color/white"
            android:textSize="20sp" />
    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/cardView2"
        android:layout_width="300dp"
        android:layout_height="150dp"
        app:cardBackgroundColor="@color/blue"
        app:cardCornerRadius="10dp"
        app:layout_constraintBottom_toTopOf="@+id/cardView3"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/cardView1">

        <TextView
            android:id="@+id/title2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="CardView示例2：指定圆角效果"
            android:textColor="@color/white"
            android:textSize="20sp" />
    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/cardView3"
        android:layout_width="300dp"
        android:layout_height="150dp"
        app:cardCornerRadius="10dp"
        app:cardBackgroundColor="@color/blue"
        app:cardElevation="10dp"
        app:cardMaxElevation="20dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/cardView2">

        <TextView
            android:id="@+id/title3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="CardView示例3：指定圆角+指定阴影高度"
            android:textColor="@color/white"
            android:textSize="20sp" />
    </androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>

大功告成！另一篇会将RecyclerView跟CardView结合起来使用，实现超级好看的UI布局。