このページは Cloud Translation API によって翻訳されました。

進行状況インジケーター

進行状況インジケーターは、オペレーションのステータスを視覚的に表示します。モーションを使用するプロセスがどの程度完了しそうなのか、ユーザーの注意を引きます。たとえば、データを読み込んで処理しますまた処理に時間がかかり完了にどれだけ近いかは言及せず

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

コンテンツの読み込み: コンテンツをネットワークから取得するとき（読み込みなど）ユーザープロフィールの画像やデータ
ファイルのアップロード: アップロードにかかる時間について、ユーザーにフィードバックします。
長時間処理: アプリが大量のデータを処理している間、全体の量がどの程度まで完了しているかをユーザーに伝える。

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

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

同様に、進行状況インジケーターも以下の 2 つの形式のいずれかになります。

線形: 左から右に塗りつぶされる水平のバー。
円形: ストロークが計算します。

線形の進行状況インジケーターと円形の進行状況インジケーター。 — **図 1.** 2 種類の進行状況インジケーター。

API サーフェス

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

progress: インジケーターが現在表示されている進行状況。Float を渡す 0.0～1.0 の間。
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。次の例は、BigQuery のボタンを押すと、不確定インジケーターが表示されます。

@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 に変更。

参考情報

マテリアル UI のドキュメント