如何为MaterialCardView实现自定义EdgeTreatment创建圆角锯齿边框？

可行性结论 #

完全可以通过自定义EdgeTreatment实现你需要的顶部凹槽圆角形状，这是结合MaterialCardView的最优方案——既能复用它内置的阴影、交互反馈和Material Design行为，又能精准控制自定义形状。

修正后的EdgeTreatment代码（带圆角） #

你之前的代码用直线绘制路径，缺少圆角逻辑。下面的代码通过addArc方法实现凹槽的圆角效果，同时保留形状的完整性：

class MaterialCustomCardShape(
    private val middlePoint: Float, // 视图宽度的一半
    private val stepHeight: Float, // 凹槽深度
    private val cornerRadius: Float // 凹槽圆角半径
) : EdgeTreatment() {
    override fun getEdgePath(
        length: Float,
        center: Float,
        interpolation: Float,
        shapePath: ShapePath
    ) {
        // 从视图左上角(0,0)开始
        shapePath.moveTo(0f, 0f)
        
        // 直线绘制到凹槽左侧圆角的起点
        shapePath.lineTo(middlePoint - cornerRadius, 0f)
        
        // 绘制左侧圆角：从水平位置转到垂直向下的圆角
        shapePath.addArc(
            middlePoint - cornerRadius, 0f,
            middlePoint + cornerRadius, cornerRadius * 2,
            180f, 90f
        )
        
        // 直线绘制到凹槽底部的右侧圆角起点
        shapePath.lineTo(middlePoint, stepHeight - cornerRadius)
        
        // 绘制右侧圆角：从垂直位置转到水平向右的圆角
        shapePath.addArc(
            middlePoint - cornerRadius, stepHeight - cornerRadius * 2,
            middlePoint + cornerRadius, stepHeight,
            270f, 90f
        )
        
        // 直线绘制到视图右下角(length, stepHeight)
        shapePath.lineTo(length, stepHeight)
    }
}

应用到MaterialCardView #

需要创建ShapeAppearanceModel，将自定义EdgeTreatment绑定到CardView的顶部边缘，同时可以设置其他边缘的圆角样式：

val cardView = findViewById<MaterialCardView>(R.id.your_card_view_id)

// 注意：必须在视图测量完成后获取宽度，否则middlePoint会是0
cardView.viewTreeObserver.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener {
    override fun onGlobalLayout() {
        cardView.viewTreeObserver.removeOnGlobalLayoutListener(this)
        
        val dpToPx = { dp: Float ->
            dp * cardView.context.resources.displayMetrics.density
        }
        
        val cardWidth = cardView.width.toFloat()
        val middlePoint = cardWidth / 2f
        val stepHeight = dpToPx(32f) // 凹槽深度，可根据需求调整
        val cornerRadius = dpToPx(8f) // 凹槽圆角半径，可根据需求调整

        val shapeModel = ShapeAppearanceModel.builder()
            .setTopEdge(MaterialCustomCardShape(middlePoint, stepHeight, cornerRadius))
            // 为其他边缘设置统一圆角（可选）
            .setAllCorners(CornerFamily.ROUNDED, dpToPx(16f))
            .build()

        cardView.shapeAppearanceModel = shapeModel
        // 设置CardView主体背景色为黄色
        cardView.setCardBackgroundColor(ContextCompat.getColor(cardView.context, R.color.yellow))
    }
})

实现白色镜像效果 #

针对你提到的"黄色主体及白色镜像"样式，有两种简单实现方式：

• 方案1：内部填充白色View：给CardView设置paddingTop = stepHeight，然后在内部添加一个铺满的白色View，这样凹槽区域就会显示白色，和黄色主体形成对比。
• 方案2：双层CardView叠加：在黄色CardView的凹槽位置，放置一个白色的小型View，形状和凹槽完全匹配，模拟镜像效果。

其他可选方案对比 #

• 自定义Drawable+Outline：可以用Path绘制自定义形状并通过Outline实现阴影，但需要手动处理阴影偏移、交互反馈，不如MaterialCardView省心。
• SVG背景：用SVG绘制形状作为背景，但SVG的阴影效果不如系统级阴影自然，且无法复用Material的交互特性。

综上，自定义EdgeTreatment结合MaterialCardView是最优雅、最高效的实现方案。

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