MaterialCardView 的圆角仅作用于自身背景，内部子视图默认不被裁剪；需通过自定义 View 重写 draw() 方法并结合 clipPath() 手动实现精确的圆角裁剪。
materialcardview 的圆角仅作用于自身背景，内部子视图默认不被裁剪；需通过自定义 view 重写 `draw()` 方法并结合 `clippath()` 手动实现精确的圆角裁剪。
在 Android 开发中，MaterialCardView 是构建现代卡片式 UI 的首选组件。但一个常见却易被忽视的问题是：即使为 MaterialCardView 设置了非对称圆角（如不同半径的四角），其内部子视图（如 TextInputLayout、按钮等）仍会溢出边界，导致视觉上“圆角失效” —— 这并非渲染 Bug，而是 Android 视图系统的默认行为：CardView/MaterialCardView 本身不自动裁剪子视图内容（android:clipChildren="true" 对 MaterialCardView 内部的嵌套层级无效）。
根本原因在于：
- MaterialCardView 基于 ShapeableImageView 衍生，其圆角由 ShapeAppearanceModel 控制，仅影响背景绘制区域；
- 子视图（如 LinearLayout）的绘制不受父容器 Shape 影响，系统不会自动为其应用路径裁剪；
- 即使设置 android:clipChildren="true" 在父 FrameLayout 上，也无法穿透到 MaterialCardView 内部生效。
✅ 正确解决方案：继承 MaterialCardView 并手动在 draw() 中执行 Canvas 裁剪
以下是一个健壮、可复用的自定义类 RoundedCornerLayout（实际为增强型 MaterialCardView）：
public class RoundedCornerLayout extends MaterialCardView {
private final Path path = new Path();
private final RectF rect = new RectF();
private final float[] cornerRadii = new float[8]; // [tlx, tly, trx, try, brx, bry, blx, bly]
public RoundedCornerLayout(Context context) {
super(context);
init(context, null);
}
public RoundedCornerLayout(Context context, AttributeSet attrs) {
super(context, attrs);
init(context, attrs);
}
public RoundedCornerLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context, attrs);
}
private void init(Context context, AttributeSet attrs) {
if (attrs != null) {
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.RoundedCornerLayout);
float tl = a.getDimension(R.styleable.RoundedCornerLayout_cornerRadiusTopLeft, 0f);
float tr = a.getDimension(R.styleable.RoundedCornerLayout_cornerRadiusTopRight, 0f);
float br = a.getDimension(R.styleable.RoundedCornerLayout_cornerRadiusBottomRight, 0f);
float bl = a.getDimension(R.styleable.RoundedCornerLayout_cornerRadiusBottomLeft, 0f);
a.recycle();
// 构建 8 值数组：每角 x/y 半径（Android Path.addRoundRect 要求）
cornerRadii[0] = cornerRadii[1] = tl;
cornerRadii[2] = cornerRadii[3] = tr;
cornerRadii[4] = cornerRadii[5] = br;
cornerRadii[6] = cornerRadii[7] = bl;
// 同步更新 ShapeAppearanceModel（确保阴影/涟漪等效果匹配）
ShapeAppearanceModel model = getShapeAppearanceModel()
.toBuilder()
.setTopLeftCorner(CornerFamily.ROUNDED, tl)
.setTopRightCorner(CornerFamily.ROUNDED, tr)
.setBottomRightCorner(CornerFamily.ROUNDED, br)
.setBottomLeftCorner(CornerFamily.ROUNDED, bl)
.build();
setShapeAppearanceModel(model);
}
setWillNotDraw(false); // 必须启用自定义绘制
}
@Override
public void draw(Canvas canvas) {
canvas.save();
rect.set(0, 0, getWidth(), getHeight());
path.reset();
path.addRoundRect(rect, cornerRadii, Path.Direction.CW);
canvas.clipPath(path); // 关键：裁剪画布区域
super.draw(canvas); // 绘制卡片（含子视图）
canvas.restore();
}
}? 使用前准备：
-
在 res/values/attrs.xml 中声明自定义属性：
<declare-styleable name="RoundedCornerLayout"> <attr name="cornerRadiusTopLeft" format="dimension" /> <attr name="cornerRadiusTopRight" format="dimension" /> <attr name="cornerRadiusBottomRight" format="dimension" /> <attr name="cornerRadiusBottomLeft" format="dimension" /> </declare-styleable>
-
在布局中替换原 MaterialCardView：
<com.yourpackage.RoundedCornerLayout android:layout_width="match_parent" android:layout_height="wrap_content" app:cornerRadiusTopLeft="24dp" app:cornerRadiusTopRight="8dp" app:cornerRadiusBottomRight="16dp" app:cornerRadiusBottomLeft="0dp" app:cardElevation="12dp" app:shapeAppearanceOverlay="@null"> <!-- 禁用 overlay 避免冲突 --> <!-- 子视图保持不变 --> <LinearLayout ... > ... </LinearLayout> </com.yourpackage.RoundedCornerLayout>
⚠️ 重要注意事项：
- ✅ clipPath() 在 Android 8.0+ 性能良好，但旧版本可能轻微降帧；若需兼容 API < 26，建议 fallback 到 setClipToOutline(true) + setOutlineProvider()（仅支持统一圆角）；
- ❌ 不要覆盖 onMeasure()/onLayout()（示例中该部分非必需，且易引发测量异常；MaterialCardView 自身已正确处理）；
- ? 若同时使用 app:cardPreventCornerOverlap="false" 和自定义圆角，请确保 ShapeAppearanceModel 与 clipPath 参数严格一致，否则阴影/触摸反馈可能出现错位；
- ? 如需动态修改圆角，暴露 setCornerRadius(float tl, float tr, float br, float bl) 方法并触发 invalidate() 即可。
通过此方案，你将获得像素级精准的非对称圆角裁剪效果——无论子视图是否带背景、是否超出卡片高度，均被严丝合缝地约束在指定轮廓内，真正实现设计稿所见即所得。
