Android 开发问题:CardView 的阴影效果会受到父容器的裁切

  • 在 Android 开发中,CardView 的阴影效果会受到父容器的裁切(见上图),此问题下的父容器可以分为两种
  1. 无 padding 的父容器
xml 复制代码
<LinearLayout
    android: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.CardView
        android:layout_width="492px"
        android:layout_height="420px"
        app:cardCornerRadius="10px"
        app:cardElevation="8px">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" />
    </androidx.cardview.widget.CardView>
</LinearLayout>
  1. 有 padding 的父容器
xml 复制代码
<LinearLayout
    android: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.CardView
        android:layout_width="492px"
        android:layout_height="420px"
        app:cardCornerRadius="10px"
        app:cardElevation="8px">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" />
    </androidx.cardview.widget.CardView>
</LinearLayout>
处理策略
(1)针对无 padding 的父容器
  1. 禁用裁切,给祖父容器添加 android:clipChildren="false"
xml 复制代码
<?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">

    <LinearLayout
        android: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.CardView
            android:layout_width="492px"
            android:layout_height="420px"
            app:cardCornerRadius="10px"
            app:cardElevation="8px">

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

</androidx.constraintlayout.widget.ConstraintLayout>
  1. 添加 CardView 的外边距,给 CardView 添加 android:layout_margin
xml 复制代码
<LinearLayout
    android: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.CardView
        android:layout_width="492px"
        android:layout_height="420px"
        android:layout_margin="20px"
        app:cardCornerRadius="10px"
        app:cardElevation="8px">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" />
    </androidx.cardview.widget.CardView>
</LinearLayout>
  1. 启用 CardView 的兼容模式,给 CardView 添加 app:cardUseCompatPadding="true"
xml 复制代码
<LinearLayout
    android: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.CardView
        android:layout_width="492px"
        android:layout_height="420px"
        app:cardUseCompatPadding="true"
        app:cardCornerRadius="10px"
        app:cardElevation="8px">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" />
    </androidx.cardview.widget.CardView>
</LinearLayout>
(2)针对有 padding 的父容器
  • 给父容器添加 android:clipToPadding="false"
xml 复制代码
<LinearLayout
    android: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.CardView
        android:layout_width="492px"
        android:layout_height="420px"
        app:cardCornerRadius="10px"
        app:cardElevation="8px">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" />
    </androidx.cardview.widget.CardView>
</LinearLayout>
相关推荐
扫地的小何尚1 小时前
NVIDIA Dynamo深度解析:如何优雅地解决LLM推理中的KV缓存瓶颈
开发语言·人工智能·深度学习·机器学习·缓存·llm·nvidia
野犬寒鸦1 小时前
多级缓存架构:性能与数据一致性的平衡处理(原理及优势详解+项目实战)
java·服务器·redis·后端·缓存
yi碗汤园2 小时前
【一文了解】C#的StringSplitOptions枚举
开发语言·前端·c#
帧栈3 小时前
开发避坑指南(58):Java Stream 按List元素属性分组实战指南
java
无敌最俊朗@3 小时前
C++ 序列容器深度解析:vector、deque 与 list
开发语言·数据结构·数据库·c++·qt·list
Da Da 泓3 小时前
LinkedList模拟实现
java·开发语言·数据结构·学习·算法
海琴烟Sunshine4 小时前
Leetcode 14. 最长公共前缀
java·服务器·leetcode
城管不管4 小时前
Lambda
java
Humbunklung4 小时前
VC++ 使用OpenSSL创建RSA密钥PEM文件
开发语言·c++·openssl
Humbunklung4 小时前
填坑:VC++ 采用OpenSSL 3.0接口方式生成RSA密钥
开发语言·c++·rsa·openssl 3.0