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