Compose中自定义水平和垂直进度条

水平进度条可以使用官方的直接替代，垂直进度条我找到的资料说是把水平进度条旋转90度，但是转完了之后感觉占用的布局控件怪怪的。

水平进度条

/**
 * 水平进度条
 * @param progress 进度条进度
 * @param color 进度条颜色
 * @param cornerRadius 进度条圆角值
 * @param modifier 
 */
@Composable
fun HorizontalProgressBar(
    progress: Float,
    color: Color,
    cornerRadius: Dp,
    modifier: Modifier
) {
    Surface(
        shape = RoundedCornerShape(cornerRadius),
        color = Color.Transparent,
        modifier = modifier
            .clip(RoundedCornerShape(cornerRadius)) // 裁剪矩形区域为圆角矩形，将超出圆角矩形的部分绘制去掉
            .drawWithContent {
                drawContent() // 先绘制内容后绘制自定义图形，这样我们绘制的图形将显示在内容区域上方
                val progressWidth = drawContext.size.width * progress
                drawRect(
                    color = color,
                    size = drawContext.size.copy(width = progressWidth),
                )
            },
        content = {
            Image(
                painter = painterResource(id = R.drawable.bg_horizontal_progress),
                contentDescription = null,
                Modifier.size(width = 280.dp, height = 32.dp)
            )
        }
    )
}

预览代码

@Preview
@Composable
fun view() {
    HorizontalProgressBar(
        0.3f,
        color = Color.Blue,
        60.dp,
        Modifier.size(width = 280.dp, height = 32.dp)
    )
}

先将surface裁剪然后使用drawRect进行上色，通过modifier确定宽度,预览效果如下：

垂直进度条

/**
 * 垂直进度条
 * @param progress 进度条进度
 * @param color 进度条颜色
 * @param cornerRadius 进度条圆角值
 */
@Composable
fun VerticalProgressBar(
    progress: Float,
    color: Color,
    cornerRadius: Dp,
    modifier: Modifier = Modifier
) {
    Box(contentAlignment = Alignment.CenterStart) {
        // 使用垂直方向的图片作为背景
        Image(
            painter = painterResource(id = R.drawable.bg_vertical_progress),
            contentDescription = null,
            modifier = Modifier.size(width = 32.dp, height = 280.dp) // 假设这是垂直进度条的背景图像
        )
        Surface(
            shape = RoundedCornerShape(cornerRadius),
            color = Color.Transparent,
            modifier = modifier
                .clip(RoundedCornerShape(cornerRadius))
                .graphicsLayer {
                    // 使用 graphicsLayer 的 translationY 来移动进度条
                    translationY = size.height * (1 - progress)
                }
                .drawWithContent {
                    drawContent()
                    drawRect(
                        color = color,
                        size = size.copy(height = size.height * progress),
                    )
                },
            content = {}
        )
    }
}

预览代码

@Preview
@Composable
fun view() {
    VerticalProgressBar(
        0.3f,
        color = Color.Blue,
        60.dp,
        Modifier.size(width = 32.dp, height = 280.dp)
    )
}

也是通过surface进行剪裁，但是套了一个box，如果Image放在surface里面的话会把进度条遮挡掉，预览效果如下：

可自定义项

• 背景图片：修改Image组件中的资源文件就可以进行改变，但是不要忘记同时修改modifier的尺寸，可以把modifier属性写上默认尺寸。
• 进度条颜色：可以修改笔刷的颜色改颜色，甚至可以通过分段绘制成五颜六色的。
• 是否圆角：可以改变裁剪surface的形状来控制是否是圆角