Jetpack Compose - CircularProgressIndicator、LinearProgressIndicator

技術標籤：Jetpack-Compose Jetpack Compose ProgressIndicat ProgressBar Indicator

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來實現圓角的線性進度指示器。

Jetpack Compose - CircularProgressIndicator、LinearProgressIndicator