【Compose】平滑的解决圆角矩形长度过短的显示问题
by
张可
最近在用到圆角矩形时发现一个问题，如果控件宽度太小，小于圆角直径的话，Compose 会做一些特殊的处理，即按照比例缩小圆角半径，让其仍然看起来是个圆角矩形，如下图。
对于有些场景，例如上面的场景，这样做就不太合理了，我们希望圆角半径仍然保持不变，就是这样。
本篇文章内容就是关于如何实现上面的效果。
Shape
本来我是想直接通过 Canvas 来绘制，但发现这么做不够通用，Compose 中一般通过 *Shape* 来描述形状，而上面的情况也属于一种圆角矩形形状，那么如果我可以通过定义一个能解决上述情况的 Shape 的话就可以应用在很多地方了。
SlickRoundCornerShape
Compose 中提供了一个 Shape 接口，其中包含一个方法，我们自定义 Shape 时主要就是实现这个方法。
@Immutable
interface Shape {
/**
* Creates [Outline] of this shape for the given [size].
*
* @param size the size of the shape boundary.
* @param layoutDirection the current layout direction.
* @param density the current density of the screen.
*
* @return [Outline] of this shape for the given [size].
*/
fun createOutline(size: Size, layoutDirection: LayoutDirection, density: Density): Outline
}
入参就是当前控件的信息，size 是控件的大小，返回值是个 Outline。
在创建 Outline 时我们可以参考已有的 RoundedCornerShape.
override fun createOutline(
size: Size,
topStart: Float,
topEnd: Float,
bottomEnd: Float,
bottomStart: Float,
layoutDirection: LayoutDirection
) = if (topStart + topEnd + bottomEnd + bottomStart == 0.0f) {
Outline.Rectangle(size.toRect())
} else {
Outline.Rounded(
RoundRect(
rect = size.toRect(),
topLeft = CornerRadius(if (layoutDirection == Ltr) topStart else topEnd),
topRight = CornerRadius(if (layoutDirection == Ltr) topEnd else topStart),
bottomRight = CornerRadius(if (layoutDirection == Ltr) bottomEnd else bottomStart),
bottomLeft = CornerRadius(if (layoutDirection == Ltr) bottomStart else bottomEnd)
)
)
}
我们要处理的是 RoundedCornerShape 的特殊情况，即宽度小于圆角直径的情况，所以在这基础上我们需要添加一个判断分支来处理。
if (topStart + topEnd + bottomEnd + bottomStart == 0.0f) {
Outline.Rectangle(size.toRect())
} else if (topStart == bottomStart && size.width < (topStart * 2F)) {
...
} else {
Outline.Rounded(
RoundRect(
rect = size.toRect(),
topLeft = CornerRadius(if (layoutDirection == Ltr) topStart else topEnd),
topRight = CornerRadius(if (layoutDirection == Ltr) topEnd else topStart),
bottomRight = CornerRadius(if (layoutDirection == Ltr) bottomEnd else bottomStart),
bottomLeft = CornerRadius(if (layoutDirection == Ltr) bottomStart else bottomEnd)
)
)
}
这里为了简单起见，我们只处理 topStart == bottomStart 的情形。
现在新增的 if 分支就是我们要处理的场景了。
这里还包含了两种情况：
- 控件高度小于等于圆角直径，此时左侧只有一个半圆。
- 控件高度大于圆角直径，此时左侧包含上下两个圆角和一条连接直线。
针对上述两种情况，我们可以通过构建不同的 Path 来实现。
val radius = topStart
val path = Path()
if (height > radius * 2) {
buildSlickRoundCornerPath(path, size, radius)
} else {
buildSingleArcPath(path, size, radius)
}
Outline.Generic(path)
第一种情况是比较容易处理的。
private fun buildSingleArcPath(path: Path, size: Size, radius: Float) {
path.moveTo(size.width, 0F)
path.arcTo(
rect = Rect(0F, 0F, radius * 2F, radius * 2F),
startAngleDegrees = 90F,
sweepAngleDegrees = 180F,
forceMoveTo = true,
)
path.close()
}
逻辑比较简单，先移动到空间的右上角，然后绘制一个圆弧，这个圆弧的半径就是圆角半径，然后再闭合这个 Path 就行了。
我们主要来看第二种情况。
比较麻烦的是需要根据空间的宽度动态调整控件绘制区域的高度。
图中黄色线断表示控件的宽度，此时我们需要计算红线的长度，然后绘制这部分的圆弧。
还好我们有老祖宗的智慧：勾股定理。
val arcHeight = sqrt(radius * radius - (radius - width) * (radius - width))
那么圆弧到控件顶部和底部的距离就是：
val yOffset = radius - arcHeight
因此上半部分的圆弧可以这么绘制出来：
path.arcTo(
rect = Rect(
left = 0F,
top = yOffset,
right = width * 2F,
bottom = yOffset + arcHeight * 2F,
),
startAngleDegrees = 180F,
sweepAngleDegrees = 90F,
forceMoveTo = true,
)
然后我们把 Path 移动到下面圆弧的最底端：
val bottomArcBottom = height - yOffset
path.lineTo(x = width, y = bottomArcBottom)
path.arcTo(
rect = Rect(
left = 0F,
top = bottomArcBottom - arcHeight * 2,
right = width * 2F,
bottom = bottomArcBottom,
),
startAngleDegrees = 90F,
sweepAngleDegrees = 90F,
forceMoveTo = true,
)
上下两个圆弧的大小一致，参数也都差不多，就不用详细介绍了。
然后再封闭 Path 即可。
path.lineTo(0F, yOffset + arcHeight)
path.close()
这样差不多就能实现上面的效果了。
使用起来也跟普通的 Shape 一样。
modifier
.clipToBounds()
.background(
color = Color.Blue.copy(alpha = 0.3F),
shape = SlickRoundedCornerShape(radius),
)
// or
modifier
.clip(SlickRoundedCornerShape(radius))
.background(color = Color.Blue.copy(alpha = 0.3F))
好了，这篇文章就这么多了，实现总体上比较简单，但有些小细节需要注意，所以直接把它分享出来，大家遇到这个问题的话可以直接拿去用。
Compose 发展比较晚，生态还不是特别完善，在应对复杂需求时可能会遇到很多诸如此类的小问题，原本用 View 可以快速实现的东西到了 Compose 这里就需要花不少时间，所以 Compose 社区生态还是要靠我们开发者逐渐完善。
点击这里查看完整代码。