แถบควบคุมมีการควบคุมที่เกี่ยวข้องกับข้อมูลพร็อพเพอร์ตี้แต่ละรายการ โดยจะแสดงตัวควบคุมสูงสุด 5 รายการในเวอร์ชันที่ยังไม่ขยาย และตัวควบคุมเพิ่มเติมสูงสุด 5 รายการเมื่อขยาย
ในแอปสื่อ แถบควบคุมจะใช้ในมุมมองการเล่นสำหรับการควบคุมเล่น/หยุดชั่วคราว ก่อนหน้า ถัดไป และการควบคุมอื่นๆ รวมถึงการควบคุมสำหรับการดำเนินการของบุคคลที่สามที่กำหนดเอง
กายวิภาคศาสตร์
แถบควบคุมมี 2 รูปแบบ ได้แก่ ยังไม่ขยายและขยายออก เวอร์ชันที่ยังไม่ขยายจะมีตัวควบคุมได้สูงสุด 5 รายการ ในแอปสื่อ หนึ่งในรายการเหล่านี้คือ "เล่น/หยุดชั่วคราว"
เมื่อขยายแล้ว แถบควบคุมจะมีตัวควบคุมเพิ่มเติมได้สูงสุด 5 รายการในแถวที่สอง ผู้ใช้จะเลือกปุ่มรายการเพิ่มเติมเพื่อขยายหรือยุบแถบควบคุมได้

2. ส่วนที่ขยายของแถบการดำเนินการ
3. ตัวควบคุมแบบใดแบบหนึ่ง
4. ปุ่ม Overflow (ขยายและยุบแถบควบคุม)
ข้อกำหนด
แถบควบคุม

ขยายแถบควบคุมแล้ว

การวางตัวควบคุม 1-4 ตัวบนแถบควบคุมพร้อมตัวควบคุมตรงกลางแบบตรึงไว้

การวางตัวควบคุม 1-4 ตัวบนแถบควบคุมที่ไม่มีตัวควบคุมแบบยึดตำแหน่ง

การวางตัวควบคุม 6-9 ตัวบนแถบควบคุม

การปรับขนาดเลย์เอาต์
เลย์เอาต์อ้างอิงเหล่านี้จะแสดงวิธีการปรับแถบควบคุมให้เหมาะสมกับหน้าจอที่มีความกว้างและความสูงที่หลากหลาย (หมวดหมู่ความกว้างและความสูงจะกำหนดอยู่ในส่วนการออกแบบ) โปรดทราบว่าค่าพิกเซลทั้งหมดจะเป็นพิกเซลที่แสดงผล ก่อนที่จะเกิดการสุ่มหรือสุ่มขึ้น
หน้าจอที่กว้างเป็นพิเศษโดยมีขอบระหว่างระยะขอบมากกว่า 1028dp

หน้าจอที่กว้างเป็นพิเศษโดยมีขอบระหว่างระยะขอบน้อยกว่า 1028dp

หน้าจอกว้าง

หน้าจอความกว้างมาตรฐาน

หน้าจอสั้น

แถบควบคุมขยายในหน้าจอที่สั้นกว่า 1,000dp

แถบควบคุมขยายออกบนหน้าจอสั้นๆ

แถบควบคุมขยายอยู่บนหน้าจอที่สูงกว่า 1,000dp

รูปแบบ
สี
องค์ประกอบ | สี(โหมดวัน) | สี (โหมดกลางคืน) |
---|---|---|
ไอคอนหลัก | สีขาว | สีขาว @ 88% |
Scrim แบบเต็มหน้าจอ | ดำ @ 78% | สีดำ @ 84% |
Scrim การไล่ระดับสี | จะแจ้งภายหลัง | จะแจ้งภายหลัง |
ขนาด
องค์ประกอบ | ขนาด (dp) |
---|---|
แถบควบคุม | 96 (หน้าจอสั้น) / 128 (ความสูงมาตรฐานขึ้นไป) |
ไอคอนหลัก | 44 |
ตัวอย่าง






