進行状況インジケーターは、オペレーションのステータスを視覚的に表示します。データの読み込みや処理などのプロセスの完了が近づいていることをユーザーに知らせるために、モーションを使用します。また、処理が進行中であることを示す場合もあります。この場合、処理がどの程度完了しているかは示されません。
進行状況インジケータを使用する 3 つのユースケースについて考えてみましょう。
- コンテンツの読み込み: ネットワークからコンテンツを取得している間（ユーザー プロフィールの画像やデータを読み込むなど）。
- ファイルのアップロード: アップロードにかかる時間について、ユーザーにフィードバックを提供します。
- 長時間の処理: アプリが大量のデータを処理している間、処理の進捗状況をユーザーに伝えます。
マテリアル デザインでは、進行状況インジケーターに次の 2 種類があります。
同様に、進行状況インジケーターは次のいずれかの形式になります。
- リニア: 左から右に塗りつぶされる横棒。
- 円形: 円の円周全体を囲むまでストロークの長さが長くなる円。
バージョンの互換性
この実装では、プロジェクトの minSDK を API レベル 21 以上に設定する必要があります。
依存関係
決定的インジケーターを作成する
確定インジケーターは、アクションの完了度を正確に反映します。LinearProgressIndicator または CircularProgressIndicator コンポーザブルのいずれかを使用して、progress パラメータの値を渡します。
次のスニペットは、比較的詳細な例を示しています。ユーザーがボタンを押すと、アプリは進行状況インジケーターを表示し、progress の値を徐々に増やすコルーチンを起動します。これにより、進行状況インジケーターが順番に反復処理されます。
結果
読み込みが部分的に完了すると、上の例の線形インジケーターは次のように表示されます。
同様に、円形のインジケーターは次のように表示されます。
未確定インジケーターを作成する
未確定インジケーターは、オペレーションの完了度を反映しません。むしろ、処理が進行中であることをユーザーに示すためにモーションを使用し、完了度を指定しません。
進行状況インジケーターを作成するには、LinearProgressIndicator または CircularProgressIndicator コンポーザブルを使用しますが、progress の値は渡しません。次の例は、ボタンの押下で未確定インジケーターを切り替える方法を示しています。
結果
インジケーターがアクティブな場合の実装例を次に示します。
以下は、CircularProgressIndicator ではなく LinearProgressIndicator を使用した同じ実装の例です。
要点
マテリアル デザインに準拠した進行状況インジケーターを作成するために使用できるコンポーザブルはいくつかありますが、パラメータは大きく異なりません。主なパラメータは次のとおりです。
progress: インジケーターが表示する現在の進行状況。0.0～1.0のFloatを渡します。color: インジケーターの色。進行状況を反映し、進行状況が完了するとコンポーネントを完全に囲むコンポーネントの部分です。trackColor: インジケータが描画されるトラックの色。
このガイドを含むコレクション
このガイドは、Android 開発の幅広い目標を網羅する、厳選されたクイックガイド コレクションの一部です。
インタラクティブなコンポーネントを表示する
リストまたはグリッドを表示する
