媒体进度指示器组件是媒体应用独有的组件。
进度指示器直观显示媒体来源的时长和已播放时长。播放期间,它会显示在媒体应用中。
解剖学
媒体进度指示器由两个部分组成:一是表示媒体来源时长的无效轨道(以灰色显示),另一组以强调色显示的有效轨道,与非活跃轨道叠加以指示已播放时长。
![媒体进度指示器剖析](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-Anatomy.png?authuser=6&hl=hu)
2. 无效轨道
媒体进度指示器可以是线性或圆形。
![线性媒体进度指示器](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-Linearbar.png?authuser=6&hl=hu)
线性进度指示器在横轴上显示时长和已播放时间。轨道的可见部分位于 76dp 触摸目标区域的中心。点按或拖动经过的时间可允许用户移至媒体来源中的不同位置。线性媒体进度指示器适用于高度为 800dp 或更高的屏幕。
![循环进度指示器剖析](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-Circularbar.png?authuser=6&hl=hu)
圆形进度指示器以圆形的形式显示时长和经过的时间。通过点按或拖动经过的时间,无法移动到其他位置。圆形媒体进度指示器适用于高度小于 800dp 的屏幕,以及当媒体播放控件最小化时使用。
媒体进度指示器状态
在播放过程中,进度指示器处于以下四种状态之一:
- 正在播放:媒体正在播放,有效曲目会跳过无效曲目,以表示已播放时长。
- 已暂停:用户暂停了播放。当前曲目在播放暂停处处于静止状态。
- 正在缓冲:媒体应用正在加载要播放的内容。该指示器会显示一条白线,当内容加载时,该白线反复穿过无效轨道。
- 错误:无法播放媒体。没有有效轨道,且无效轨道已停用。
![当媒体播放时,有效轨道会跨越无效轨道](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-active.gif?authuser=6&hl=hu)
![暂停媒体播放时,当前曲目处于静止状态](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-restingState.png?authuser=6&hl=hu)
![内容加载时,一条白线反复穿过无效轨道](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-buffering.gif?authuser=6&hl=hu)
![发生 medai 播放错误时,无效曲目会被停用](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-error.png?authuser=6&hl=hu)
规格
线性媒体进度指示器
![线性媒体进度指示器红线](https://developers.google.cn/cars/design/automotive-os/components/images/ProgressBarLinearRedline.png?authuser=6&hl=hu)
圆形媒体进度指示器
![圆形媒体进度指示器红线](https://developers.google.cn/cars/design/automotive-os/components/images/Redline_circular.jpg?authuser=6&hl=hu)
自定义
在媒体播放期间,系统会使用强调色显示媒体进度指示器的活动轨道。默认的强调色是蓝色阴影。应用开发者可以选择提供能够反映其媒体品牌的应用强调色。同样,OEM 可以提供能够反映其汽车品牌的强调色。如果提供强调色,则 OEM 强调色优先于应用的强调色。
![线性媒体进度条,显示了使用默认颜色、第三方强调色和 OEM 强调色的有效轨道](https://developers.google.cn/cars/design/automotive-os/components/images/default_linear.jpg?authuser=6&hl=hu)
![使用默认、第三方和 OEM 强调色显示活动轨道的圆形媒体进度条](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-theme-styling.png?authuser=6&hl=hu)
车载设备界面库集成指南提供了有关自定义组件的 OEM 指南。
有关使用颜色自定义组件的具体指南,请参阅颜色。
示例
![实际应用中的线性媒体进度指示器](https://developers.google.cn/cars/design/automotive-os/components/images/02DMediaPlaybackView.png?authuser=6&hl=hu)
![实际使用的圆形媒体进度指示器](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-circular-indicator-example.png?authuser=6&hl=hu)