媒體進度指標元件是媒體應用程式獨有的元件。
進度指標會以視覺方式呈現媒體來源的持續時間和經過的播放時間。影片播放期間會顯示在媒體應用程式中。
圖解
媒體進度指標包含代表媒體來源時間長度的非使用中音軌 (以灰色顯示),以及重疊使用中音軌 (以強調色顯示) 的曲目 (以強調色表示已播放完畢),
![媒體進度指標剖析](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-Anatomy.png?authuser=7&hl=zh-tw)
2. 已停用的曲目
媒體進度指標可以是線性或圓形。
![線性媒體進度指標](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-Linearbar.png?authuser=7&hl=zh-tw)
線性進度指標會以水平軸顯示時間長度和經過的時間。曲目的可見部分位於 76dp 觸控目標區域的中央。使用者只要輕觸或拖曳經過時間,即可移動到媒體來源中的其他位置。線性媒體進度指標適用於 800dp 或更高的螢幕。
![圓形進度指標剖析](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-Circularbar.png?authuser=7&hl=zh-tw)
圓形進度指標會以圓圈顯示時間長度和經過時間。移動到其他位置時,無法使用輕觸或拖曳經過時間功能。圓形媒體進度指標適用於高度低於 800 dp 的螢幕,適合用於最小化媒體播放控制項。
媒體進度指標狀態
播放期間,進度指標會顯示下列四種狀態:
- 播放中:正在播放媒體,且使用中的曲目跨越非使用中的曲目推進表示經過的時間。
- 已暫停:使用者暫停播放。有效曲目會在暫停播放的時間點保持靜止,
- 緩衝處理:媒體應用程式正在載入要播放的內容。指標會在內容載入時,重複向已停用的曲目顯示一條白線。
- 錯誤:無法播放媒體。沒有使用中的測試群組,且已停用已停用的測試群組。
![主動播放的曲目隨著媒體播放,不斷推進已停用的曲目](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-active.gif?authuser=7&hl=zh-tw)
![當媒體播放暫停時,播放中的曲目處於靜止狀態](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-restingState.png?authuser=7&hl=zh-tw)
![載入內容時,一條白線在多個停用的曲目中不斷前進](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-buffering.gif?authuser=7&hl=zh-tw)
![發生 Medai 播放錯誤時,已停用無效的曲目](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-error.png?authuser=7&hl=zh-tw)
規格
線性媒體進度指標
![線性媒體進度指標的紅線](https://developers.google.cn/cars/design/automotive-os/components/images/ProgressBarLinearRedline.png?authuser=7&hl=zh-tw)
圓形媒體進度指標
![圓形媒體進度指標的紅線](https://developers.google.cn/cars/design/automotive-os/components/images/Redline_circular.jpg?authuser=7&hl=zh-tw)
自訂
在媒體播放期間,系統會用強調色顯示媒體進度指標的有效曲目。預設強調色為藍色的陰影。應用程式開發人員可以選擇提供能反映媒體品牌的應用程式強調色。同樣地,原始設備製造商 (OEM) 可以提供能反映其汽車品牌的強調色。如有提供,原始設備製造商 (OEM) 強調色優先於應用程式的強調色。
![顯示使用預設顏色、第三方和原始設備製造商 (OEM) 強調色的線性媒體進度列](https://developers.google.cn/cars/design/automotive-os/components/images/default_linear.jpg?authuser=7&hl=zh-tw)
![圓形媒體進度列,顯示使用預設顏色、第三方和原始設備製造商 (OEM) 強調色](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-theme-styling.png?authuser=7&hl=zh-tw)
Car UI 程式庫整合指南提供原始設備製造商 (OEM) 自訂元件的相關指引。
如需使用顏色自訂元件的具體指引,請參閱「顏色」。
範例
![實際使用線性媒體進度指標](https://developers.google.cn/cars/design/automotive-os/components/images/02DMediaPlaybackView.png?authuser=7&hl=zh-tw)
![圓形媒體進度指標的實際應用情形](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-circular-indicator-example.png?authuser=7&hl=zh-tw)