材料景观和顶部的角落应夹住儿童

Question

材料cardview使用圆角时将其孩子剪辑。如果我使用cardCornerradius = true（将所有4个角圆形圆角），则剪辑的行为符合预期 - ＆gt;没有在圆形区域外吸引儿童。如果我尝试更小的角（即只有shapeappearancemodel>的顶部角落），那么剪辑部分就会丢失 - ＆gt;将在圆角区域上绘制一个顶级孩子）。

我意识到剪辑MaterialCardView调用 setCliptoOutline（shapeappearancemodel.isroundrect（getBoundSasRectf（）））; set setShapeAppeApeModel的内部，其中isROUNDRECT仅在所有四个角落都被四舍五入时返回true，因此我尝试在code>上应用cliptooutline = true在设置shapeappearancemodel带有圆角的shapeappearancemodel ，但没有类似的结果 - 仍然可以在父卡的圆形部分上绘制孩子。

什么实际触发了剪裁部分，我该如何将其强加于顶部的圆形材料贴图？

LE：反复试验：

// card is MaterialCardView
card.shapeAppearanceModel =   
    ShapeAppearanceModel()
        .toBuilder()
        .setTopRightCorner(CornerFamily.ROUNDED, cornerPx) // cornerPx = 24dp in pixels
        .setTopLeftCorner(CornerFamily.ROUNDED, cornerPx)
        .build()

card.apply {
    preventCornerOverlap = true
    clipChildren = true
    clipToOutline = true
}
card.invalidateOutline()
    

Answer 1

在调试材料浏览量源代码后，我提出了以下子类，这些子类将阻止额外的偏移到填充到填充物，并脱离轮廓。

/**
 * This view is for solving the MaterialCardView bug that in case that not all corner radius are of the same size
 * an additional offset is added to the card padding which causes undesired behavior(e.g certain child view of the card
 * that is aligned to the card top wont get it's corners rounded according to the card corner radius which will make it look like
 * it overlaps the card border at the corners).
 * Note that this bug does not occur when the corner radius is the same size for all corners!!!
 * [For more info](https://stackoverflow.com/questions/71824566/materialcardview-with-top-rounded-corners-should-clip-children)
 *
 * @constructor
 *
 * @param context
 * @param attributeSet
 * @param defStyleRes
 */
class AsymmetricRadiusCardView @JvmOverloads constructor(
    context: Context,
    attributeSet: AttributeSet? = null,
    defStyleRes: Int = R.attr.materialCardViewStyle
) : MaterialCardView(context, attributeSet, defStyleRes) {

    /*
    Method instance of MaterialCardView.setAncestorContentPadding via reflection.
    Invoking this method will allow us to set desired card content padding without
    the additional offset that is added when calling MaterialCardView.setContentPadding if
    the radius of all corners is not equal.
     */
    private val reflectedAncestorPaddingMethod: Method by lazy {
        MaterialCardView::class.java.getDeclaredMethod(
            "setAncestorContentPadding",
            Int::class.java,
            Int::class.java,
            Int::class.java,
            Int::class.java
        ).apply {
            isAccessible = true
        }
    }

    init {
        setContentPadding(contentPaddingLeft, contentPaddingTop, contentPaddingRight, contentPaddingBottom)
    }

    override fun setContentPadding(left: Int, top: Int, right: Int, bottom: Int) {
        //override this method so that after calling super method for content padding which
        //will add the undesired padding offset in case the radius is not the same size for all corners
        //we will invoke the reflected to enforce given padding without additional offset
        super.setContentPadding(left, top, right, bottom)
        try {
            reflectedAncestorPaddingMethod.invoke(this, left, top, right, bottom)
        } catch (e: Exception) {
            Timber.w(e)
        }
    }

    override fun setShapeAppearanceModel(shapeAppearanceModel: ShapeAppearanceModel) {
        //due to the fact that in super method if the radius is not the same size for all corners
        //the card wont be clipped to outline(which can cause overlap drawing of it's child views on card corners)
        //we enforce clipping to outline after calling super method
        super.setShapeAppearanceModel(shapeAppearanceModel)
        clipToOutline = true
    }
}

Answer 2

应用以下配置，如果您使用形状外观覆盖层以防止孩子从角落重叠：

• set cardpreventcorneroverlap true
• ，然后将与角落设置与默认设置相关的其他所有内容（只需删除在设计模式下的文本框中的值）。

然后，您应该看到这样的东西：