คอมโพเนนต์ตัวบอกสถานะความคืบหน้าของสื่อจะไม่ซ้ำกันในแอปสื่อ
สัญญาณบอกสถานะความคืบหน้าคือการแสดงระยะเวลาและเวลาที่เล่นที่ผ่านไปของแหล่งที่มาของสื่อ โดยจะปรากฏในแอปสื่อในระหว่างการเล่น
กายวิภาคศาสตร์
สัญญาณบอกสถานะความคืบหน้าของสื่อประกอบด้วยแทร็กที่ไม่ได้ใช้งาน (แสดงเป็นสีเทา) ซึ่งแสดงระยะเวลาของแหล่งที่มาของสื่อ และแทร็กที่ใช้งานอยู่ (แสดงด้วยสีเฉพาะจุด) ที่วางซ้อนแทร็กที่ไม่ได้ใช้งานเพื่อระบุเวลาที่ผ่านไปในการเล่น
![กายวิภาคของตัวระบุความคืบหน้าของสื่อ](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-Anatomy.png?authuser=1&hl=th)
2. แทร็กที่ไม่ได้ใช้งาน
สัญญาณบอกสถานะความคืบหน้าของสื่ออาจเป็นแบบเชิงเส้นหรือแบบวงกลมก็ได้
![สัญญาณบอกสถานะความคืบหน้าของสื่อแบบเชิงเส้น](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-Linearbar.png?authuser=1&hl=th)
ตัวบ่งชี้ความคืบหน้าแบบเชิงเส้นจะแสดงระยะเวลาและเวลาที่ผ่านไปบนแกนแนวนอน ส่วนที่มองเห็นได้ของแทร็กจะอยู่ตรงกลางในพื้นที่เป้าหมายการสัมผัส 76dp การแตะหรือลากเวลาที่ผ่านไปช่วยให้ผู้ใช้เลื่อนไปยังตำแหน่งต่างๆ ในแหล่งที่มาของสื่อได้ สัญญาณบอกสถานะความคืบหน้าของสื่อแบบเชิงเส้นมีไว้สำหรับหน้าจอที่มีความละเอียด 800dp ขึ้นไป
![สัญญาณบอกสถานะความคืบหน้าแบบวงกลม](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-Circularbar.png?authuser=1&hl=th)
สัญญาณบอกสถานะความคืบหน้าแบบวงกลมแสดงระยะเวลาและเวลาที่ผ่านไปเป็นวงกลม ระบบไม่รองรับการแตะหรือการลากเวลาที่ผ่านไปสำหรับการย้ายไปยังตำแหน่งอื่น สัญญาณบอกสถานะความคืบหน้าของสื่อแบบวงกลมมีไว้สำหรับหน้าจอที่มีความสูงน้อยกว่า 800dp และสำหรับใช้เมื่อย่อขนาดตัวควบคุมการเล่นสื่อ
สถานะสัญญาณบอกสถานะความคืบหน้าของสื่อ
ในระหว่างการเล่น สัญญาณบอกสถานะความคืบหน้าจะอยู่ในสถานะใดสถานะหนึ่งจาก 4 สถานะต่อไปนี้
- กำลังเล่น: สื่อกำลังเล่นอยู่และแทร็กที่ใช้งานอยู่จะเลื่อนไปข้างหน้าในแทร็กที่ไม่ได้ใช้งานเพื่อระบุเวลาที่ผ่านไป
- หยุดชั่วคราว: ผู้ใช้หยุดเล่นชั่วคราว แทร็กที่กำลังใช้งานจะอยู่กับที่ในจุดที่หยุดเล่นชั่วคราว
- บัฟเฟอร์: แอปสื่อกำลังโหลดเนื้อหาเพื่อเล่น สัญญาณบอกสถานะจะแสดงเส้นสีขาวที่เลื่อนผ่านแทร็กที่ไม่ได้ใช้งานในขณะที่เนื้อหาโหลด
- ข้อผิดพลาด: เล่นสื่อไม่ได้ ไม่มีแทร็กที่ใช้งานอยู่และแทร็กที่ไม่ได้ใช้งานถูกปิดใช้งาน
![แทร็กที่ใช้งานอยู่จะเลื่อนผ่านแทร็กที่ไม่ได้ใช้งานขณะที่เล่นสื่อ](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-active.gif?authuser=1&hl=th)
![แทร็กที่ใช้งานอยู่หยุดนิ่งขณะที่ตัวควบคุมสื่อหยุดชั่วคราว](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-restingState.png?authuser=1&hl=th)
![เส้นสีขาวจะเลื่อนผ่านแทร็กที่ไม่ได้ใช้งานในขณะที่เนื้อหาโหลด](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-buffering.gif?authuser=1&hl=th)
![แทร็กที่ไม่ได้ใช้งานจะถูกปิดใช้เมื่อเกิดข้อผิดพลาดในการเล่น Medai](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-error.png?authuser=1&hl=th)
ข้อกำหนด
สัญญาณบอกสถานะความคืบหน้าของสื่อแบบเชิงเส้น
![เส้นสีแดงของตัวบ่งชี้ความคืบหน้าของสื่อแบบเชิงเส้น](https://developers.google.cn/cars/design/automotive-os/components/images/ProgressBarLinearRedline.png?authuser=1&hl=th)
สัญญาณบอกสถานะความคืบหน้าของสื่อรูปวงกลม
![เส้นสีแดงของสัญญาณบอกสถานะความคืบหน้าของสื่อรูปวงกลม](https://developers.google.cn/cars/design/automotive-os/components/images/Redline_circular.jpg?authuser=1&hl=th)
การปรับแต่งช่อง
ขณะเล่นสื่อ แทร็กบอกสถานะความคืบหน้าของสื่อที่ใช้งานอยู่จะแสดงโดยใช้สีเฉพาะจุด สีเฉพาะจุดเริ่มต้นคือเฉดสีน้ำเงิน นักพัฒนาแอปสามารถเลือกระบุสีเฉพาะจุดสำหรับแอปที่สะท้อนแบรนด์สื่อของตนแทนได้ ในทำนองเดียวกัน OEM อาจจัดหาสีเฉพาะจุดที่สะท้อนถึงแบรนด์รถยนต์ของตน หากระบุ สีเฉพาะจุดของ OEM จะมีความสำคัญเหนือกว่าสีเฉพาะจุดของแอป
![แถบความคืบหน้าของสื่อเชิงเส้นแสดงแทร็กที่ใช้งานอยู่โดยใช้สีเฉพาะจุดตามค่าเริ่มต้น ของบุคคลที่สาม และ OEM](https://developers.google.cn/cars/design/automotive-os/components/images/default_linear.jpg?authuser=1&hl=th)
![แถบความคืบหน้าของสื่อรูปวงกลมที่แสดงแทร็กที่ใช้งานอยู่โดยใช้สีเฉพาะจุดตามค่าเริ่มต้น ของบุคคลที่สาม และ OEM](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-theme-styling.png?authuser=1&hl=th)
คู่มือการผสานรวมไลบรารี UI ของรถจะให้คําแนะนํา OEM สําหรับการปรับแต่งคอมโพเนนต์
สำหรับคำแนะนำเฉพาะในการใช้สีเพื่อปรับแต่งคอมโพเนนต์ โปรดไปที่สี
ตัวอย่าง
![การทํางานของสัญญาณบอกสถานะความคืบหน้าของสื่อแบบเชิงเส้น](https://developers.google.cn/cars/design/automotive-os/components/images/02DMediaPlaybackView.png?authuser=1&hl=th)
![ตัวบอกสถานะความคืบหน้าของสื่อรูปวงกลมทํางานอยู่](https://developers.google.cn/cars/design/automotive-os/components/images/Pi-circular-indicator-example.png?authuser=1&hl=th)