進行状況インジケーター

CircularProgressIndicator コンポーネントは、プロセスの長さやその他の不特定の待ち時間を表示する円形のディスプレイです。

進行状況インジケーターで、完了したタスクの割合を表示します。進行状況を表示するために、インジケーターが時計回りに円形のトラックに沿ってアニメーション化されます。

再生ボタンなどのコンポーネントに進行状況インジケーターを適用できます。

構造

A. トラック
B. トラックの進行状況

設計に関する推奨事項

空白のある進行状況インジケーター

時刻などの重要な情報を表示する余地を残すため、空白のある進行状況インジケーターを作成します。空白を作成するには、進行状況インジケーターの startAngle と endAngle を変更します。

次の例に示すように、空白のある進行状況インジケーターを作成します。

CircularProgressIndicator(
    progress = 0.4f,
    modifier = Modifier.fillMaxSize(),
    startAngle = 290f,
    endAngle = 250f,
    strokeWidth = 4.dp
)

小さな進行状況インジケーター

表示される進行状況がボタンのアクションに直接関係している場合や、画面のスペースが限られている場合は、小さな進行状況インジケーターをボタンに直接適用します。

次の例に示すように、小さな進行状況インジケーターを作成できます。

CircularProgressIndicator(
    progress = 0.75,
    modifier = Modifier.fillMaxSize(),
    startAngle = 0,
    indicatorColor = MaterialTheme.colors.secondary,
    trackColor = MaterialTheme.colors.onBackground.copy(alpha = 0.1f),
    strokeWidth = 4.dp
)

不確定形式の進行状況インジケーター

進行状況インジケーターが設定時間がない状況で使用される場合は、アニメーション値が表示される進行状況インジケーターを使用します。これは「スピナー」とも呼ばれます。認識される待ち時間が長くなる可能性があるため、スピナーを高頻度で使用することは避けてください。

次の例に示すように、不確定形式の進行状況インジケーターを作成できます。

CircularProgressIndicator(
    indicatorColor = MaterialTheme.colors.secondary,
    trackColor = MaterialTheme.colors.onBackground.copy(alpha = 0.1f),
    strokeWidth = 4.dp
)

使用方法

進行状況インジケーターの例を次に示します。