進行状況インジケーター

進行状況インジケーターは、オペレーションのステータスを視覚的に表示します。データの読み込みや処理などのプロセスの完了が近づいていることをユーザーに知らせるために、モーションを使用します。また、処理が進行中であることを示す場合もあります。この場合、処理がどの程度完了しているかは示されません。

進行状況インジケータを使用する 3 つのユースケースについて考えてみましょう。

  • コンテンツの読み込み: ネットワークからコンテンツを取得している間（ユーザー プロフィールの画像やデータを読み込むなど）。
  • ファイルのアップロード: アップロードにかかる時間について、ユーザーにフィードバックを提供します。
  • 長時間の処理: アプリが大量のデータを処理している間、処理の進捗状況をユーザーに伝えます。

マテリアル デザインでは、進行状況インジケーターに次の 2 種類があります。

  • 確定: 進行状況が正確に表示されます。
  • 不確定: 進行状況に関係なく継続的にアニメーション化します。

同様に、進行状況インジケーターは次のいずれかの形式になります。

  • リニア: 左から右に塗りつぶされる横棒。
  • 円形: 円の円周全体を囲むまでストロークの長さが長くなる円。
線形の進行状況インジケーターと円形の進行状況インジケーター。
図 1. 進行状況インジケーターの 2 つのタイプ。

API サーフェス

マテリアル デザインに準拠した進行状況インジケーターを作成するために使用できるコンポーザブルはいくつかありますが、パラメータは大きく異なりません。留意すべき主なパラメータは次のとおりです。

  • progress: インジケーターが表示する現在の進行状況。0.0～1.0 の Float を渡します。
  • color: 実際のインジケーターの色。つまり、進行状況を反映し、進行状況が完了したときにコンポーネントを完全に囲むコンポーネントの部分です。
  • trackColor: インジケータが描画されるトラックの色。

決定指標

確定インジケーターは、アクションの完了度を正確に反映します。LinearProgressIndicator または CircularProgressIndicator コンポーザブルのいずれかを使用して、progress パラメータの値を渡します。

次のスニペットは、比較的詳細な例を示しています。ユーザーがボタンを押すと、アプリは進行状況インジケーターを表示し、progress の値を徐々に増やすコルーチンを起動します。これにより、進行状況インジケーターが順番に反復処理されます。

@Composable
fun LinearDeterminateIndicator() {
    var currentProgress by remember { mutableStateOf(0f) }
    var loading by remember { mutableStateOf(false) }
    val scope = rememberCoroutineScope() // Create a coroutine scope

    Column(
        verticalArrangement = Arrangement.spacedBy(12.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxWidth()
    ) {
        Button(onClick = {
            loading = true
            scope.launch {
                loadProgress { progress ->
                    currentProgress = progress
                }
                loading = false // Reset loading when the coroutine finishes
            }
        }, enabled = !loading) {
            Text("Start loading")
        }

        if (loading) {
            LinearProgressIndicator(
                progress = { currentProgress },
                modifier = Modifier.fillMaxWidth(),
            )
        }
    }
}

/** Iterate the progress value */
suspend fun loadProgress(updateProgress: (Float) -> Unit) {
    for (i in 1..100) {
        updateProgress(i.toFloat() / 100)
        delay(100)
    }
}
ProgressIndicator.kt

読み込みが部分的に完了すると、上の例の線形インジケーターは次のように表示されます。

同様に、円形のインジケーターは次のように表示されます。

不確定インジケーター

未確定インジケーターは、オペレーションの完了度を反映しません。むしろ、処理が進行中であることをユーザーに示すためにモーションを使用し、完了度を指定しません。

進行状況インジケーターを作成するには、LinearProgressIndicator または CircularProgressIndicator コンポーザブルを使用しますが、progress の値は渡しません。次の例は、ボタンの押下で未確定インジケーターを切り替える方法を示しています。

@Composable
fun IndeterminateCircularIndicator() {
    var loading by remember { mutableStateOf(false) }

    Button(onClick = { loading = true }, enabled = !loading) {
        Text("Start loading")
    }

    if (!loading) return

    CircularProgressIndicator(
        modifier = Modifier.width(64.dp),
        color = MaterialTheme.colorScheme.secondary,
        trackColor = MaterialTheme.colorScheme.surfaceVariant,
    )
}
ProgressIndicator.kt

インジケーターがアクティブな場合の実装例を次に示します。

以下は、CircularProgressIndicator ではなく LinearProgressIndicator を使用した同じ実装の例です。

参考情報