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>
相关推荐
遇见尚硅谷13 分钟前
C语言:20250728学习(指针)
c语言·开发语言·数据结构·c++·笔记·学习·算法
☆璇17 分钟前
【C++】C/C++内存管理
c语言·开发语言·c++
愿你天黑有灯下雨有伞27 分钟前
枚举策略模式实战:优雅消除支付场景的if-else
java·开发语言·策略模式
网络安全打工人32 分钟前
CentOS7 安装 rust 1.82.0
开发语言·后端·rust
楚轩努力变强33 分钟前
前端工程化常见问题总结
开发语言·前端·javascript·vue.js·visual studio code
Dcs1 小时前
gRPC性能陷阱:低延迟网络下的客户端瓶颈揭秘
java
梦想的初衷~1 小时前
MATLAB近红外光谱分析技术及实践技术应用
开发语言·支持向量机·matlab
探索java1 小时前
深入解析 Spring 获取 XML 验证模式的过程
xml·java·spring
找不到、了1 小时前
Java设计模式之<装饰器模式>
java·设计模式·装饰器模式
Fly-ping1 小时前
【前端】JavaScript文件压缩指南
开发语言·前端·javascript