แถบควบคุมมีการควบคุมที่เกี่ยวข้องกับข้อมูลพร็อพเพอร์ตี้แต่ละรายการ โดยจะแสดงตัวควบคุมสูงสุด 5 รายการในเวอร์ชันที่ยังไม่ขยาย และตัวควบคุมเพิ่มเติมสูงสุด 5 รายการเมื่อขยาย
ในแอปสื่อ แถบควบคุมจะใช้ในมุมมองการเล่นสำหรับการควบคุมเล่น/หยุดชั่วคราว ก่อนหน้า ถัดไป และการควบคุมอื่นๆ รวมถึงการควบคุมสำหรับการดำเนินการของบุคคลที่สามที่กำหนดเอง
กายวิภาคศาสตร์
แถบควบคุมมี 2 รูปแบบ ได้แก่ ยังไม่ขยายและขยายออก เวอร์ชันที่ยังไม่ขยายจะมีตัวควบคุมได้สูงสุด 5 รายการ ในแอปสื่อ หนึ่งในรายการเหล่านี้คือ "เล่น/หยุดชั่วคราว"
เมื่อขยายแล้ว แถบควบคุมจะมีตัวควบคุมเพิ่มเติมได้สูงสุด 5 รายการในแถวที่สอง ผู้ใช้จะเลือกปุ่มรายการเพิ่มเติมเพื่อขยายหรือยุบแถบควบคุมได้
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-anatomy-1.png?authuser=1&hl=th)
2. ส่วนที่ขยายของแถบการดำเนินการ
3. ตัวควบคุมแบบใดแบบหนึ่ง
4. ปุ่ม Overflow (ขยายและยุบแถบควบคุม)
ข้อกำหนด
แถบควบคุม
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-1.png?authuser=1&hl=th)
ขยายแถบควบคุมแล้ว
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-2.png?authuser=1&hl=th)
การวางตัวควบคุม 1-4 ตัวบนแถบควบคุมพร้อมตัวควบคุมตรงกลางแบบตรึงไว้
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-3.png?authuser=1&hl=th)
การวางตัวควบคุม 1-4 ตัวบนแถบควบคุมที่ไม่มีตัวควบคุมแบบยึดตำแหน่ง
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-4.png?authuser=1&hl=th)
การวางตัวควบคุม 6-9 ตัวบนแถบควบคุม
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-spec-5.png?authuser=1&hl=th)
การปรับขนาดเลย์เอาต์
เลย์เอาต์อ้างอิงเหล่านี้จะแสดงวิธีการปรับแถบควบคุมให้เหมาะสมกับหน้าจอที่มีความกว้างและความสูงที่หลากหลาย (หมวดหมู่ความกว้างและความสูงจะกำหนดอยู่ในส่วนการออกแบบ) โปรดทราบว่าค่าพิกเซลทั้งหมดจะเป็นพิกเซลที่แสดงผล ก่อนที่จะเกิดการสุ่มหรือสุ่มขึ้น
หน้าจอที่กว้างเป็นพิเศษโดยมีขอบระหว่างระยะขอบมากกว่า 1028dp
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-1.png?authuser=1&hl=th)
หน้าจอที่กว้างเป็นพิเศษโดยมีขอบระหว่างระยะขอบน้อยกว่า 1028dp
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-2.png?authuser=1&hl=th)
หน้าจอกว้าง
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-3.png?authuser=1&hl=th)
หน้าจอความกว้างมาตรฐาน
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-4.png?authuser=1&hl=th)
หน้าจอสั้น
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-0.png?authuser=1&hl=th)
แถบควบคุมขยายในหน้าจอที่สั้นกว่า 1,000dp
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-5.png?authuser=1&hl=th)
แถบควบคุมขยายออกบนหน้าจอสั้นๆ
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-7.png?authuser=1&hl=th)
แถบควบคุมขยายอยู่บนหน้าจอที่สูงกว่า 1,000dp
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-ar-6.png?authuser=1&hl=th)
รูปแบบ
สี
องค์ประกอบ | สี(โหมดวัน) | สี (โหมดกลางคืน) |
---|---|---|
ไอคอนหลัก | สีขาว | สีขาว @ 88% |
Scrim แบบเต็มหน้าจอ | ดำ @ 78% | สีดำ @ 84% |
Scrim การไล่ระดับสี | จะแจ้งภายหลัง | จะแจ้งภายหลัง |
ขนาด
องค์ประกอบ | ขนาด (dp) |
---|---|
แถบควบคุม | 96 (หน้าจอสั้น) / 128 (ความสูงมาตรฐานขึ้นไป) |
ไอคอนหลัก | 44 |
ตัวอย่าง
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-3.png?authuser=1&hl=th)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-4.png?authuser=1&hl=th)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-5.png?authuser=1&hl=th)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-1.png?authuser=1&hl=th)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-6.png?authuser=1&hl=th)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-mock-2.png?authuser=1&hl=th)
![](https://developers.google.cn/cars/design/automotive-os/components/images/action-bar-controlbar.gif?authuser=1&hl=th)