前言
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的问题大家也可以在博客下方留言，将在第一时间回复。
进度条实际效果
参考文章
您阅读本篇文章共花了：
发表评论