Compose自定义条形进度条

Posted 2022-10-22 宿罪

前言

Compose自定义View其实比View系统更方便简单，比如接下来本文要介绍的就是使用Compose实现View系统中常见的条形进度条。

自定义进度条

Compose material包中提供了CircularProgressIndicator实现View系统中的圆形进度条，因为Compose没有现成的条形进度条，所以我们需要自己定义。实现方式有很多种，本文采用的是Canvas自绘制的方式。

效果图

代码实现比较简单，采用的是绘制叠加图形的方式

@Composable
fun ProgressBar(
    modifier: Modifier,
    progress: Float,
    color: Color,
    cornerRadius: Dp,
    backgroundColor: Color,
) 
    Surface(
        shape = RoundedCornerShape(cornerRadius),
        color = backgroundColor,
        modifier = modifier
            .clip(RoundedCornerShape(cornerRadius)) // 裁剪矩形区域为圆角矩形，将超出圆角矩形的部分绘制去掉
            .drawWithContent 
                drawContent() // 先绘制内容后绘制自定义图形，这样我们绘制的图形将显示在内容区域上方
                val progressWidth = drawContext.size.width * progress
                drawRect(
                    color = color,
                    size = drawContext.size.copy(width = progressWidth),
                )
            ,
        content = 
    )

需要注意的是我们对整个Surface进行了圆角矩形的裁剪，这样将超出圆角矩形背景区域的矩形部分裁剪掉了。这里是一个小技巧，无论是View系统还是Compose可以用图形叠加必要时进行裁剪轻松实现很多不同的效果。

其中Modifier#drawWithContent 方法可以让我们选择在内容前或者内容后进行绘制我们的图形，关键在于我们调用drawContent方法的时机，Compose还提供了drawBehind方法，不过drawBehind方法的内部将在内容区域后面绘制我们的图形，源码中可以体现

/**
 * Draw into a [Canvas] behind the modified content.
 */
fun Modifier.drawBehind(
    onDraw: DrawScope.() -> Unit
) = this.then(
    DrawBackgroundModifier(
        onDraw = onDraw,
        inspectorInfo = debugInspectorInfo 
            name = "drawBehind"
            properties["onDraw"] = onDraw
        
    )
)

private class DrawBackgroundModifier(
    val onDraw: DrawScope.() -> Unit,
    inspectorInfo: InspectorInfo.() -> Unit
) : DrawModifier, InspectorValueInfo(inspectorInfo) 

    override fun ContentDrawScope.draw() 
        onDraw()
        drawContent() // 在绘制图形后绘制内容，也就是我们绘制的图形会显示在内容区域之后（下方）
    

    override fun equals(other: Any?): Boolean 
        if (this === other) return true
        if (other !is DrawBackgroundModifier) return false

        return onDraw == other.onDraw
    

    override fun hashCode(): Int 
        return onDraw.hashCode()
    

使用示例

ProgressBar(
   modifier = Modifier
        .fillMaxWidth() // 指定进度条宽度
        .height(6.dp), // 指定进度条高度
    progress = 0.3f,
    color = Color.Red,
    cornerRadius = 3.dp, 
    backgroundColor = Color.Gray
)

以上进度条组件已经用于个人基于Compose开发的Billbook记账软件中。Billbook已经在酷安市场上线，下载地址：https://www.coolapk.com/apk/295644，有兴趣的同学欢迎下载Billbook记账软件体验并吐槽哈~，后续将分享更多关于Compose和Billbook记账软件开发使用到的技术，有关Compose的问题大家也可以在博客下方留言，将在第一时间回复。

进度条实际效果