Jetpack Compose - CircularProgressIndicator、LinearProgressIndicator

0、介绍
1、属性一览
2、使用示例
- 2.1、CircularProgressIndicator 无限循环
- 2.1、CircularProgressIndicator按进度变化
- 2.3、LinearProgressIndicator无限循环
- 2.4、LinearProgressIndicator按进度变化
- 2.5、为进度添加动画
3、版本更新
4、未解决问题

Compose系列文章，请点原文阅读。原文，是时候学习Compose了！

0、介绍

CircularProgressIndicator

CircularProgressIndicator是一个圆形进度指示器，它通过绘制一个从0到360度的弧线来表示进度。它分为有确定进度和没有确定进度的两种指示器。默认情况下进度值之间没有动画，可以使用ProgressIndicatorDefaults.ProgressAnimationSpec作为默认的AnimationSpec。

LinearProgressIndicator

LinearProgressIndicator是一个线形进度指示器，它通过绘制一条水平线来表示进度。它分为有确定进度和没有确定进度的两种指示器。默认情况下进度值之间没有动画，可以使用ProgressIndicatorDefaults.ProgressAnimationSpec作为默认的AnimationSpec。

1、属性一览

【目前基于alpha09版本】

CircularProgressIndicator函数：

@Composable fun CircularProgressIndicator(@FloatRange(0.0, 1.0) progress: Float, modifier: Modifier = Modifier, color: Color = MaterialTheme.colors.primary, strokeWidth: Dp = ProgressIndicatorDefaults.StrokeWidth
): Unit

@Composable fun CircularProgressIndicator(modifier: Modifier = Modifier, color: Color = MaterialTheme.colors.primary, strokeWidth: Dp = ProgressIndicatorDefaults.StrokeWidth
): Unit

属性参数含义：

参数	含义
modifier: Modifier = Modifier	应用于布局的修饰符
progress: Float	此进度指示器的进度，其中0.0表示没有进度，1.0表示已完成进度。超出此范围的值将强制使用该范围。
color: Color = MaterialTheme.colors.primary	进度指示器的颜色
strokeWidth: Dp = ProgressIndicatorDefaults.StrokeWidth	进度指示器的宽度

对于第一个函数没有progress参数，表明它是一个没有确定进度的指示器，所以显示在页面上是一个无线循环的圆形指示器，见下文示例。

LinearProgressIndicator函数

@Composable fun LinearProgressIndicator(@FloatRange(0.0, 1.0) progress: Float, modifier: Modifier = Modifier, color: Color = MaterialTheme.colors.primary, backgroundColor: Color = color.copy(alpha = IndicatorBackgroundOpacity)
): Unit

@Composable fun LinearProgressIndicator(modifier: Modifier = Modifier, color: Color = MaterialTheme.colors.primary, backgroundColor: Color = color.copy(alpha = IndicatorBackgroundOpacity)
): Unit

属性参数含义：

参数	含义
modifier: Modifier = Modifier	应用于布局的修饰符
progress: Float	此进度指示器的进度，其中0.0表示没有进度，1.0表示已完成进度。超出此范围的值将强制使用该范围。
color: Color = MaterialTheme.colors.primary	进度指示器的颜色
backgroundColor: Color = color.copy(alpha = IndicatorBackgroundOpacity)	指示器后面的背景颜色，当进度尚未达到整个指示器的区域时可见

2、使用示例

2.1、CircularProgressIndicator 无限循环

@Composable
fun ProgressCircularLoopDemo() {Column(horizontalAlignment = Alignment.CenterHorizontally,modifier = Modifier.fillMaxWidth()) {CircularProgressIndicator()}
}

效果如下所示：

2.1、CircularProgressIndicator按进度变化

我们通过点击按钮，让进度条每次递增10%的进度，目前没有添加动画的实现：

@Composable
fun ProgressCircularDemo() {val rememberProgress = remember { mutableStateOf(0.1f) }Column(horizontalAlignment = Alignment.CenterHorizontally,modifier = Modifier.fillMaxWidth()) {CircularProgressIndicator(progress = rememberProgress.value)Spacer(Modifier.height(30.dp))TextButton(onClick = {if (rememberProgress.value < 1f) rememberProgress.value += 0.1f}) {Text(text = "增加进度")}}
}

效果如下所示：

2.3、LinearProgressIndicator无限循环

@Composable
fun ProgressCircularLoopDemo() {Column(horizontalAlignment = Alignment.CenterHorizontally,modifier = Modifier.fillMaxWidth()) {CircularProgressIndicator()}
}

效果如下所示：

2.4、LinearProgressIndicator按进度变化

我们同样通过点击按钮来让进度依次递增10%来实现，代码如下：

@Composable
fun ProgressLinearDemo() {val rememberProgress = remember { mutableStateOf(0.1f) }Column(horizontalAlignment = Alignment.CenterHorizontally,modifier = Modifier.fillMaxWidth()) {LinearProgressIndicator(progress = rememberProgress.value)Spacer(Modifier.height(30.dp))TextButton(onClick = {if (rememberProgress.value < 1f) rememberProgress.value += 0.1f}) {Text(text = "增加进度")}}
}

效果如下所示：

2.5、为进度添加动画

关于动画这一块我们还没有研究完整，动画的文章还在整理中，但是我们目前需要快速入门一个动画函数：

@Composable
fun animate(target: Float,animSpec: AnimationSpec<Float> = defaultAnimation,visibilityThreshold: Float = 0.01f,endListener: ((Float) -> Unit)? = null
):

第一个参数表示动画的目标值，第二个是用于改变数值的动画，根据官方的描述我们可以使用ProgressIndicatorDefaults.ProgressAnimationSpec，目前就使用这个函数两个参数搭配线性进度指示器，我们来看下代码：

@Composable
fun ProgressLinearDemo() {val rememberProgress = remember { mutableStateOf(0.1f) }//添加动画val animatedProgress = animate(target = rememberProgress.value,animSpec = ProgressIndicatorDefaults.ProgressAnimationSpec)Column(horizontalAlignment = Alignment.CenterHorizontally,modifier = Modifier.fillMaxWidth()) {LinearProgressIndicator(progress = animatedProgress)Spacer(Modifier.height(30.dp))TextButton(onClick = {if (rememberProgress.value < 1f) rememberProgress.value += 0.1f}) {Text(text = "增加进度")}}
}

效果如下所示：

可以看到比之前生硬改变进度的效果柔和了许多，有了一个渐变增加进度的效果。

3、版本更新

暂无

4、未解决问题

基本的进度条效果已经实现了，但是目前相比XML中的进度条还少了第一进度第二进度的概念，这在视频应用中可能比较常见，最底层是视频时长总进度，第二进度是视频缓冲进度，第一进度是当前观看的进度。
但是我们通过查看LinearProgressIndicator的源码可以看到这些都是继承自Canvas实现的，而且我们可以根据源码很简单的就能模拟实现上述功能，大家可以自行尝试下。再往下可以看到线性指示器最终是通过drawLine来实现的，大胆假设下，我们同样也可以通过drawRoundRect来实现圆角的线性进度指示器。