[英]MaterialCardView with top rounded corners should clip children
MaterialCardView
clips its children when using rounded corners.使用圆角时,
MaterialCardView
会剪裁其子项。 If I use cardCornerRadius = true
(which rounds all 4 corners of the card), the clipping behaves as expected -> children are not being drawn outside of the rounded area.如果我使用
cardCornerRadius = true
(它环绕卡片的所有 4 个角),剪裁将按预期运行 -> 子项不会绘制在圆形区域之外。 If I try to round less corners (ie. only top corners, using ShapeAppearanceModel
), then the clipping part is lost -> a top positioned child will be drawn over the rounded cornered area).如果我尝试减少圆角(即仅顶角,使用
ShapeAppearanceModel
),则剪辑部分将丢失 -> 将在圆角区域绘制位于顶部的子项)。
I realised that clip MaterialCardView calls setClipToOutline(shapeAppearanceModel.isRoundRect(getBoundsAsRectF()));
我意识到剪辑 MaterialCardView 调用
setClipToOutline(shapeAppearanceModel.isRoundRect(getBoundsAsRectF()));
inside of setShapeAppearanceModel
, where isRoundRect
returns true only if all four corners are rounded, so I tried applying clipToOutline = true
on the MaterialCardView
after setting the shapeAppearanceModel
with top corners rounded, but with no similar result - children were still able to be drawn over the rounded part of the parent card.在
setShapeAppearanceModel
内部,只有当所有四个角都圆角时, isRoundRect
返回 true,所以我尝试在设置shapeAppearanceModel
后在MaterialCardView
上应用clipToOutline = true
顶角圆角,但没有类似的结果 - 孩子们仍然能够被绘制在父卡的圆形部分。
What is actually triggering the clipping part and how can I force it on a top rounded shaped MaterialCardView?究竟是什么触发了裁剪部分,我如何将它强制放在顶部圆形的 MaterialCardView 上?
LE: trial and error code: 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()
Apply the following configurationsif you use shape appearance overlay in order to prevent the childs to overlapping from the corners:如果您使用形状外观叠加,请应用以下配置以防止子元素从角落重叠:
cardPreventCornerOverlap
to truecardPreventCornerOverlap
设置为 true
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.