API 28及以下MaterialCardView嵌套NestedScrollView子控件裁切异常求助

问题描述 #

当在带圆角的MaterialCardView中嵌套NestedScrollView，滚动时内部的子MaterialCardView边角会溢出父容器的圆角，但TextView和ViewPager却能正常被裁切。这个问题仅在API 28及以下版本出现。

可行解决方案 #

方法一：为主容器MaterialCardView启用轮廓裁切

MaterialCardView本身已基于圆角生成轮廓，但低版本系统中嵌套滚动视图时可能不会自动应用裁切。我们可以强制开启：

修改主MaterialCardView的布局属性，添加以下两行：

android:clipToOutline="true"
android:clipChildren="true"

解释：clipToOutline会让视图按照自身圆角轮廓裁切子视图，clipChildren确保子视图不会超出父容器边界。

方法二：给NestedScrollView添加匹配圆角背景并启用裁切

如果方法一无效，可能是NestedScrollView的层级导致父容器的裁切未传递。我们可以给滚动视图设置和主容器一致的圆角背景：

1. 先创建圆角shape文件（示例：res/drawable/rounded_scroll_bg.xml）：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/你的主容器背景色" />
    <corners android:radius="@dimen/你的主容器圆角半径" />
</shape>

2. 修改NestedScrollView的属性：

<androidx.core.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true"
    android:overScrollMode="never"
    android:background="@drawable/rounded_scroll_bg"
    android:clipToOutline="true">

注意：背景色要和主MaterialCardView完全一致，避免出现颜色断层。

方法三：代码手动设置ViewOutlineProvider

如果前两种方法都不生效，可通过代码为主容器生成自定义轮廓，确保低版本系统的裁切效果：

在你的Fragment/Activity中添加：

val mainCard = view.findViewById<MaterialCardView>(R.id.你的主CardViewID)
if (Build.VERSION.SDK_INT <= Build.VERSION_CODES.P) {
    mainCard.outlineProvider = object : ViewOutlineProvider() {
        override fun getOutline(view: View, outline: Outline) {
            val radius = resources.getDimension(R.dimen.你的圆角半径)
            outline.setRoundRect(0, 0, view.width, view.height, radius)
        }
    }
    mainCard.clipToOutline = true
}

这个方法直接为视图生成精准的圆角轮廓并强制裁切，在低版本系统中兼容性更强。

额外注意点

• 如果子MaterialCardView设置了elevation，低版本中阴影可能仍会溢出。可暂时将子Card的elevation设为0dp，或使用cardElevation属性（低版本对阴影裁切支持有限）。
• 确保主MaterialCardView的strokeWidth和strokeColor设置不会干扰裁切，避免边框溢出。

内容的提问来源于stack exchange，提问作者AndroidDev123