進行状況インジケーターは、オペレーションのステータスを視覚的に表示します。モーションを使用する プロセスがどの程度完了しそうなのか、ユーザーの注意を引きます。たとえば、 データを読み込んで処理しますまた 処理に時間がかかり 完了にどれだけ近いかは言及せず
進行状況インジケーターを使用する 3 つのユースケースを考えてみましょう。
- コンテンツの読み込み: コンテンツをネットワークから取得するとき(読み込みなど) ユーザー プロフィールの画像やデータ
- ファイルのアップロード: アップロードにかかる時間について、ユーザーにフィードバックします。
- 長時間処理: アプリが大量のデータを処理している間、 全体の量がどの程度まで完了しているかをユーザーに伝える。
マテリアル デザインには、次の 2 種類の進行状況インジケーターがあります。
- 確定: 進捗状況を正確に表示します。
- 不確定: 進行状況に関係なく継続的にアニメーション化します。
同様に、進行状況インジケーターも以下の 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) } }
読み込みが部分的に完了すると、前のスライドの線形インジケーターが 次のようになります。
同様に、円形インジケーターは次のように表示されます。
不確定インジケーター
不確定インジケーターはオペレーションの完了にどれだけ近いかを反映していない あります処理が進行中であることをユーザーに知らせます。 完了度は指定しません。
不確定の進行状況インジケーターを作成するには、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, ) }
インジケーターがアクティブな場合のこの実装の例を次に示します。
同じ実装の例を以下に示します。ただし、
CircularProgressIndicator
を LinearProgressIndicator
に変更。