Android CardView 圆角在 27 之前在 Android API 上被破坏

Question

我在具有圆角的父 CardView 中嵌入了卡片视图（我将此父 CardView 命名为 CV1）。当我滚动CV1的内容时，子cardview与CV1重叠并取消了CV1的圆角（如视频中的箭头所示），另一方面TextView，ImageView被很好地裁剪，我们总是看到圆角的地图。请参阅：线程年份： 注意：这只发生在 Android API 28 上一切正常。

即使我添加 app:cardPreventCornerOverlap="true" 和 app:cardUseCompatPadding="true"

代码如下

<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
fibe:cardCornerRadius="15dp"
android:layout_margin="32dp">

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        
        <include layout="@layout/item_list" />
        <include layout="@layout/item_list" />
        <include layout="@layout/item_list" />
        <include layout="@layout/item_list" />
        <include layout="@layout/item_list" />
        <include layout="@layout/item_list" />
        <include layout="@layout/item_list" />
        <include layout="@layout/item_list" />
    </LinearLayout>
</ScrollView>
</androidx.cardview.widget.CardView>

这里有视频。

Rendering on Tablet with Android API 24 : We have error here

Rendering on Tablet with Android API 28 : Everything is good here

更新 1：item_list 布局代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="216dp"
    android:layout_height="match_parent"
    android:layout_marginStart="16dp"
    android:orientation="vertical">

    <androidx.cardview.widget.CardView
        style="@style/RoundedCornersContentItem"
        android:layout_width="match_parent"
        android:layout_height="148dp"
        app:cardElevation="0dp"
 app:cardBackgroundColor="@color/content_item_badge_background"/>

    <TextView
        style="@style/FlowPanelHeaderTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:text="Very long title for my card" />

</LinearLayout>

Answer 1

这在 API 27 及更低版本上肯定被破坏了。这似乎是一个已知问题，但我没有看到任何解决方法。

以下布局，根据您的布局稍作修改，如果有人想查看，将重现该问题。

activity_main.xml

<androidx.cardview.widget.CardView 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="32dp"
    app:cardCornerRadius="15dp">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_blue_light"
            android:orientation="vertical">

            <include layout="@layout/item_list" />

            <include layout="@layout/item_list" />

            <include layout="@layout/item_list" />

            <include layout="@layout/item_list" />

            <include layout="@layout/item_list" />

            <include layout="@layout/item_list" />

            <include layout="@layout/item_list" />

            <include layout="@layout/item_list" />
        </LinearLayout>
    </ScrollView>
</androidx.cardview.widget.CardView>

item_list.xml

<androidx.cardview.widget.CardView 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="32dp"
    app:cardCornerRadius="15dp">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_blue_light"
            android:orientation="vertical">

            <include layout="@layout/item_list" />

            <include layout="@layout/item_list" />

            <include layout="@layout/item_list" />

            <include layout="@layout/item_list" />

            <include layout="@layout/item_list" />

            <include layout="@layout/item_list" />

            <include layout="@layout/item_list" />

            <include layout="@layout/item_list" />
        </LinearLayout>
    </ScrollView>
</androidx.cardview.widget.CardView>

这是一个 API 27 模拟器的演示：

我不能确切地说出问题是什么，奇怪的是嵌套的 CardView 覆盖了外部 CardView 的角，而 TextView em> 尊重那些角落。

代替彻底的修复，一种解决方法是创建一个自定义的CardView，它可以自己进行角落剪辑。这是这样一个自定义视图：

MyCardView.kt

class MyCardView @JvmOverloads 构造函数( 上下文：上下文，属性：属性集？ =空 ) : CardView(context, attrs) {

    private lateinit var mRectF: RectF
    private val mPath = Path()
    private var mCornerRadius = 0f

    init {
        val a = context.obtainStyledAttributes(
            attrs, R.styleable.CardView, 0,
            R.style.CardView
        )
        mCornerRadius = a.getDimension(androidx.cardview.R.styleable.CardView_cardCornerRadius, 0f)
        a.recycle()
    }

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        mRectF = RectF(0f, 0f, w.toFloat(), h.toFloat())
        resetPath()
    }

    override fun draw(canvas: Canvas) {
        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.P) {
            canvas.withClip(mPath) {
                super.draw(canvas)
            }
        }
    }

    private fun resetPath() {
        mPath.apply {
            reset()
            addRoundRect(mRectF, mCornerRadius, mCornerRadius, Path.Direction.CW)
            close()
        }
    }
}

这是在同一个 API 27 模拟器上使用自定义 CardView 的演示：