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>
相关推荐
TeleostNaCl2 分钟前
如何安装 Google 通用的驱动以便使用 ADB 和 Fastboot 调试(Bootloader)设备
android·经验分享·adb·android studio·android-studio·android runtime
Dontla3 分钟前
Dockerfile解析器指令(Parser Directive)指定语法版本,如:# syntax=docker/dockerfile:1
java·docker·eureka
彭于晏Yan6 分钟前
SpringBoot优化树形结构数据查询
java·spring boot·后端
AAA修煤气灶刘哥22 分钟前
缓存这「加速神器」从入门到填坑,看完再也不被产品怼慢
java·redis·spring cloud
上位机付工23 分钟前
C#与倍福TwinCAT3进行ADS通信
开发语言·c#
练习时长一年28 分钟前
Spring事件监听机制(三)
java·后端·spring
月阳羊28 分钟前
【硬件-笔试面试题-69】硬件/电子工程师,笔试面试题(知识点:电机驱动电路的反馈电路)
java·经验分享·嵌入式硬件·面试
励志不掉头发的内向程序员33 分钟前
STL库——二叉搜索树
开发语言·c++·学习
2301_7813925237 分钟前
用spring框架实现简单的MVC业务
java·后端·spring
phltxy42 分钟前
SpringMVC 程序开发
java·后端·spring