- 在 Android 开发中,CardView 的阴影效果会受到父容器的裁切(见上图),此问题下的父容器可以分为两种
- 无 padding 的父容器
<LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"><androidx.cardview.widget.CardViewandroid:layout_width="492px"android:layout_height="420px"app:cardCornerRadius="10px"app:cardElevation="8px"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" /></androidx.cardview.widget.CardView>
</LinearLayout>
- 有 padding 的父容器
<LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:padding="20px"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"><androidx.cardview.widget.CardViewandroid:layout_width="492px"android:layout_height="420px"app:cardCornerRadius="10px"app:cardElevation="8px"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" /></androidx.cardview.widget.CardView>
</LinearLayout>
处理策略
(1)针对无 padding 的父容器
- 禁用裁切,给祖父容器添加
android:clipChildren="false"
<?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:id="@+id/main"android:layout_width="match_parent"android:layout_height="match_parent"android:clipChildren="false"tools:context=".ViewShadowActivity"><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"><androidx.cardview.widget.CardViewandroid:layout_width="492px"android:layout_height="420px"app:cardCornerRadius="10px"app:cardElevation="8px"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" /></androidx.cardview.widget.CardView></LinearLayout></androidx.constraintlayout.widget.ConstraintLayout>
- 添加 CardView 的外边距,给 CardView 添加
android:layout_margin
<LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"><androidx.cardview.widget.CardViewandroid:layout_width="492px"android:layout_height="420px"android:layout_margin="20px"app:cardCornerRadius="10px"app:cardElevation="8px"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" /></androidx.cardview.widget.CardView>
</LinearLayout>
- 启用 CardView 的兼容模式,给 CardView 添加
app:cardUseCompatPadding="true"
<LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"><androidx.cardview.widget.CardViewandroid:layout_width="492px"android:layout_height="420px"app:cardUseCompatPadding="true"app:cardCornerRadius="10px"app:cardElevation="8px"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" /></androidx.cardview.widget.CardView>
</LinearLayout>
(2)针对有 padding 的父容器
- 给父容器添加
android:clipToPadding="false"
<LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:clipToPadding="false"android:padding="20px"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"><androidx.cardview.widget.CardViewandroid:layout_width="492px"android:layout_height="420px"app:cardCornerRadius="10px"app:cardElevation="8px"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" /></androidx.cardview.widget.CardView>
</LinearLayout>