メディア進行状況インジケーター コンポーネントは、メディアアプリに固有のコンポーネントです。
進行状況インジケーターは、メディアソースの再生時間と経過時間を視覚的に表したものです。再生中にメディアアプリに表示されます。
構造
メディアの進行状況インジケーターは、メディアソースの再生時間を表す非アクティブなトラック(グレーで表示)と、非アクティブなトラックに重ねて表示される再生時間を示すアクティブなトラック(アクセント カラー付き)で構成されます。
![メディアの進行状況インジケーターの構造](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-Anatomy.png?authuser=6&hl=ja)
2. 無効なトラック
メディアの進行状況インジケーターは、線形または円形のいずれかで表示されます。
![リニアメディアの進行状況インジケーター](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-Linearbar.png?authuser=6&hl=ja)
線形進行状況インジケーターでは、横軸に時間と経過時間が表示されます。トラックの表示部分が、76 dp のタップ ターゲット領域の中央に配置される。経過時間をタップまたはドラッグすることで、メディアソース内の別の場所に移動できます。リニア メディア進行状況インジケーターは、800 dp 以上の画面を対象としています。
![循環型進行状況インジケーターの構造](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-Circularbar.png?authuser=6&hl=ja)
円形の進行状況インジケーターには、継続時間と経過時間が円で表示されます。別の場所に移動するのに、経過時間をタップまたはドラッグすることはできません。円形のメディア進行状況インジケーターは、高さが 800 dp 未満の画面でメディア再生コントロールを最小化した場合に使用します。
メディアの進行状況インジケーターの状態
再生中、進行状況インジケーターは 4 つの状態のいずれかになります。
- 再生中: メディアを再生中。アクティブなトラックが非アクティブなトラックを進み、経過時間が表示されます。
- 一時停止: ユーザーが再生を一時停止しました。アクティブなトラックは、再生が一時停止した時点で静止している。
- Buffering(バッファリング): メディアアプリが再生するコンテンツを読み込んでいます。インジケーターには、コンテンツの読み込み中に非アクティブなトラックに沿って繰り返し進む白い線が表示されます。
- エラー: メディアを再生できません。有効なトラックがなく、無効なトラックが無効になっている。
![メディアの再生に伴い、アクティブ トラックは非アクティブ トラックを横切って進みます](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-active.gif?authuser=6&hl=ja)
![メディア プレイブロックが一時停止している間、アクティブなトラックは静止している](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-restingState.png?authuser=6&hl=ja)
![コンテンツの読み込み中に非アクティブなトラックを白い線が繰り返し横切る](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-buffering.gif?authuser=6&hl=ja)
![メダイの再生エラーが発生した場合、非アクティブなトラックは無効になります。](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-error.png?authuser=6&hl=ja)
仕様
リニアメディアの進行状況インジケーター
![リニアメディア進行状況インジケーターのレッドライン](https://developers.google.cn/cars/design/automotive-os/components/images/ProgressBarLinearRedline.png?authuser=6&hl=ja)
メディアの円形の進行状況インジケーター
![円形のメディア進行状況インジケーターのレッドライン](https://developers.google.cn/cars/design/automotive-os/components/images/Redline_circular.jpg?authuser=6&hl=ja)
カスタマイズ
メディアの再生中は、メディア進行状況インジケーターのアクティブなトラックがアクセント カラーで表示されます。デフォルトのアクセント カラーは青の色調です。アプリ デベロッパーは、メディア ブランドを反映したアクセント カラーをアプリに提供することもできます。同様に、OEM は自動車ブランドを反映したアクセント カラーを指定できます。OEM のアクセント カラーを指定すると、アプリのアクセント カラーよりも優先されます。
![デフォルト、サードパーティ、OEM のアクセント カラーを使用したアクティブなトラックを示すリニア メディアの進行状況バー](https://developers.google.cn/cars/design/automotive-os/components/images/default_linear.jpg?authuser=6&hl=ja)
![デフォルト、サードパーティ、OEM のアクセント カラーを使用したアクティブなトラックを示す円形のメディア進行状況バー](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-theme-styling.png?authuser=6&hl=ja)
Car UI ライブラリ統合ガイドには、コンポーネントのカスタマイズに関する OEM のガイダンスが記載されています。
色を使用してコンポーネントをカスタマイズする具体的なガイダンスについては、色をご覧ください。
例
![リニアメディア進行状況インジケーターの動作](https://developers.google.cn/cars/design/automotive-os/components/images/02DMediaPlaybackView.png?authuser=6&hl=ja)
![メディアの進行状況を示す円形インジケーターの動作](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-circular-indicator-example.png?authuser=6&hl=ja)