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>
相关推荐
GuokLiu1 小时前
250708-通过两块硬盘拷贝DeepSeek两个满血版模型的bash脚本
开发语言·chrome·bash
倔强的小石头_3 小时前
【C语言指南】函数指针深度解析
java·c语言·算法
kangkang-6 小时前
PC端基于SpringBoot架构控制无人机(三):系统架构设计
java·架构·无人机
iCxhust7 小时前
c# U盘映像生成工具
开发语言·单片机·c#
yangzhi_emo8 小时前
ES6笔记2
开发语言·前端·javascript
界面开发小八哥8 小时前
「Java EE开发指南」如何用MyEclipse创建一个WEB项目?(三)
java·ide·java-ee·myeclipse
软件工程师文艺8 小时前
解决Android Studio不能同时打开多个文件问题
android studio
花花鱼8 小时前
android studio 设置让开发更加的方便,比如可以查看变量的类型,参数的名称等等
android·ide·android studio
idolyXyz8 小时前
[java: Cleaner]-一文述之
java
一碗谦谦粉9 小时前
Maven 依赖调解的两大原则
java·maven