Jetpack Compose - CircularProgressIndicator、LinearProgressIndicator

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来实现圆角的线性进度指示器。