Android 控件 - CardView（快速实现圆角）

CardView

1、基本介绍

CardView 是 Android 在 androidx.cardview 包中提供的一个 UI 容器控件
CardView 的核心作用是快速实现圆角
CardView 还自带 Material Design 风格的阴影效果

2、CardView 属性

圆角相关

属性	说明
`app:cardCornerRadius`	设置圆角半径，单位 dp。值越大，圆角越圆

阴影相关

属性	说明
`app:cardElevation`	阴影高度，单位 dp。值越大，阴影越重
`app:cardMaxElevation`	最大阴影高度（一般不使用）

背景相关

属性	说明
`app:cardBackgroundColor`	卡片背景色，默认为白色

内边距相关

属性	说明
`app:contentPadding`	内边距
`app:contentPaddingBottom`	底部内边距
`app:contentPaddingLeft`	左侧内边距
`app:contentPaddingRight`	右侧内边距
`app:contentPaddingTop`	顶部内边距

3、演示

基本使用

xml 复制代码

<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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ViewNestActivity">

    <androidx.cardview.widget.CardView
        android:layout_width="400px"
        android:layout_height="300px"
        app:cardCornerRadius="10px"
        app:cardElevation="10px"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" />
    </androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>

去除阴影

xml 复制代码

<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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ViewNestActivity">

    <androidx.cardview.widget.CardView
        android:layout_width="400px"
        android:layout_height="300px"
        app:cardCornerRadius="10px"
        app:cardElevation="0px"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" />
    </androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>

使用背景与内边距

xml 复制代码

<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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ViewNestActivity">

    <androidx.cardview.widget.CardView
        android:layout_width="400px"
        android:layout_height="300px"
        app:cardCornerRadius="10px"
        app:cardElevation="10px"
        app:contentPaddingBottom="12dp"
        app:contentPaddingLeft="16dp"
        app:contentPaddingRight="16dp"
        app:contentPaddingTop="12dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/blue"
            android:orientation="vertical" />
    </androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>

画圆

xml 复制代码

<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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ViewNestActivity">

    <androidx.cardview.widget.CardView
        android:layout_width="400px"
        android:layout_height="400px"
        app:cardCornerRadius="200px"
        app:cardElevation="0px"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/blue"
            android:orientation="vertical" />
    </androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>