สื่ออยู่ในชุดแอประบบ (เช่น Dialer และ App Launcher) แอปเหล่านี้แชร์สไตล์และเนื้อหาทั่วไปที่กำหนดไว้ในระดับต่างๆ ในโครงสร้าง AOSP
-
framework/base
สไตล์พื้นฐานของ Android ทั้งหมดถูกกำหนดไว้ที่นี่ -
packages/services/Car/car_product/overlay
. ประกอบด้วยการซ้อนทับเวลาบิลด์ที่แก้ไขทรัพยากรเฟรมเวิร์ก/ฐานมาตรฐานเพื่อสร้างรูปลักษณ์และความรู้สึก AOSP ของ Android Automotive OS OEM อาจเลือกที่จะไม่รวมโอเวอร์เลย์นี้และใช้ของตัวเองได้ -
packages/apps/Car/libs/car-ui-lib
ไลบรารีนี้กำหนดส่วนประกอบ AAOS และทรัพยากรทั่วไปสำหรับแอประบบและแอปที่ไม่ได้รวมกลุ่มซึ่งออกแบบมาเพื่อการปรับแต่ง สำหรับรายละเอียด โปรดดู คู่มือการรวมไลบรารี UI ของรถยนต์ -
packages/apps/Car/libs/car_app_common
สีและสไตล์ทั่วไปที่แชร์ระหว่างแอประบบยานยนต์ OEM สามารถใช้โอเวอร์เลย์เพื่อปรับแต่งองค์ประกอบเหล่านี้ได้ (คล้ายกับcar_product/overlay
ที่อธิบายไว้ข้างต้น) -
packages/apps/Car/libs/car_media_common
มีองค์ประกอบที่ใช้ร่วมกันระหว่างสื่อและ UI สื่ออื่นๆ ตัวอย่างเช่น วิดเจ็ตสื่อบนหน้าจอหลัก packages/apps/Car/Media.
แอประบบทั้งหมดใช้ธีมของตัวเอง ซึ่งขยายมาจากTheme.CarUi
ตามที่กำหนดไว้ในcar-ui-lib
Android Automotive AOSP มีการนำเสนอสื่อสองรายการ
- สื่อ UI ช่วยให้ผู้ใช้สามารถลงชื่อเข้าใช้ เรียกดูเนื้อหา และใช้การควบคุมการเล่นโดยละเอียด
- วิดเจ็ตสื่อบนหน้าจอหลัก เปิดใช้งานการใช้คุณสมบัติการควบคุมการเล่นสื่อหลักไปยังหน้าจอหลัก
ส่วนติดต่อผู้ใช้มีเดีย
รูปนี้อธิบายโครงสร้างของ UI สื่อ:
รูปที่ 1. ส่วนติดต่อผู้ใช้สื่อ
สำหรับรายละเอียดเกี่ยวกับหลักเกณฑ์ UX และ UI รวมถึงโครงสร้างเชิงพื้นที่ขององค์ประกอบต่างๆ ของสื่อ โปรดดู แบบจำลองเชิงพื้นที่
AppBarView: แถบเครื่องมือ
แถบเครื่องมือ Media UI เป็นส่วนประกอบที่แชร์กับแอประบบอื่นๆ เช่น Dialer และ Radio หากต้องการเรียนรู้วิธีปรับแต่งแถบเครื่องมือ โปรดดู คู่มือการรวมไลบรารี UI ของรถยนต์
ขนาดอาร์ตเวิร์คสูงสุดของสื่อ
หากต้องการแจ้งเตือนแอปสื่อถึงขนาดสูงสุดของอาร์ตเวิร์กที่จะดึงข้อมูล คุณสามารถวางซ้อนmedia_items_bitmap_max_size_px
ในระบบของคุณได้ โดยส่ง EXTRA_MEDIA_ART_SIZE_HINT_PIXELS
เป็นคำใบ้หลัก ด้วยเหตุนี้ คุณจะประหยัดแบนด์วิธเมื่อดาวน์โหลดภาพ หากต้องการเรียนรู้เพิ่มเติม โปรดดู MediaConstants บน Developer.android.comเรียกดูส่วนต่างๆ
การเรียกดูประกอบด้วย Car UI RecyclerView เป็นหลัก ซึ่งจัดการตำแหน่งของแถบเลื่อน ลูกศร และระยะขอบ และสามารถเรียกดูรายการประเภทต่างๆ ได้ เช่น ส่วนหัว รายการตาราง รายการตารางไอคอน รายการ และรายการไอคอน
การควบคุมการเล่นที่ย่อเล็กสุด
เมื่อมีการแสดงส่วนการเรียกดู และเมื่อรายการสื่อถูกเลือก มุมมอง การควบคุมการเล่นแบบย่อเล็กสุด จะปรากฏขึ้น รูปภาพต่อไปนี้แสดงโครงสร้างของมุมมองนี้:
รูปที่ 2 การควบคุมการเล่นที่ย่อเล็กสุด
เรียกดูรายการ
นักพัฒนาสามารถใช้ชุด คำใบ้ สไตล์ (ดู ใช้สไตล์เนื้อหา ) เพื่อปรับแต่งการนำเสนอเนื้อหาเรียกดูสื่อ OEM จะต้องยึดถือสไตล์เหล่านี้ โดยปรับการนำเสนอให้เข้ากับระบบการออกแบบของตน
ประเภทรายการที่รองรับและเค้าโครงที่เกี่ยวข้องมีดังนี้:
-
LIST_ITEM
(media_browse_list_item.xml
) โดยทั่วไปใช้สำหรับตอนต่างๆ ในพ็อดคาสท์ เช่น รายการเพลย์ลิสต์ และรายการโปรด -
ICON_LIST_ITEM
(media_browse_list_icons_item.xml
) ใช้สำหรับหมวดหมู่หรือตัวเลือกเมนู ซึ่งรูปภาพที่มาพร้อมกับรายการสื่อไม่ใช่ปกอัลบั้มจริง แต่เป็นไอคอน -
GRID_ITEM
(media_browse_grid_item.xml
) มักใช้กับรายการที่เล่นได้ เช่น เพลงหรือเพลย์ลิสต์ -
ICON_GRID_ITEM
(media_browse_grid_icons_item.xml
) ใช้สำหรับหมวดหมู่ที่คล้ายกับICON_LIST_ITEM
-
HEADER
(media_browse_header_item.xml
) ใช้เพื่อจัดระเบียบรายการสื่อออกเป็นส่วนๆ
หน้าจอการเล่น
หากต้องการแสดงหน้าจอนี้ ให้ขยายส่วนควบคุมการเล่นที่ย่อเล็กสุด:
- กำลังเล่นข้อมูลเมตาของรายการสื่อ (รวมถึงชื่อเรื่องและคำบรรยาย)
- การควบคุมการเล่นที่สมบูรณ์
- คิวการเล่น (ใช้เพื่อแสดงรายการที่เพิ่งเล่นหรือรายการถัดไปที่จะเล่น)
ส่วนประกอบของหน้าจอการเล่นมีการระบุไว้ในภาพด้านล่าง
รูปที่ 3 หน้าจอการเล่น
หน้าจอการเล่นไม่แชร์แถบเครื่องมือกับส่วนที่เหลือของแอพ แต่หน้าจอนี้จะจัดการองค์ประกอบที่ด้านบนของหน้าจอทีละรายการแทน
การระบุแหล่งที่มาของการจัดรูปแบบเสียง
เมื่อแอปตั้งค่า KEY_CONTENT_FORMAT_TINTABLE_LARGE_ICON_URI
หรือ KEY_CONTENT_FORMAT_TINTABLE_SMALL_ICON_URI
เป็นส่วนเสริมของรายการสื่อที่กำลังเล่นอยู่ OEM ต้องเรนเดอร์เวกเตอร์ที่เหมาะสมตามที่ URI ระบุ
ต้องใช้ไอคอนรูป แบบเนื้อหา เวอร์ชันขนาดใหญ่ในมุมมองการเล่นหลัก ในมุมมองรอง เช่น แถบการเล่นที่เล็กกว่า OEM สามารถใช้ไอคอนรูป แบบเนื้อหา เวอร์ชันที่เล็กกว่าได้ ContentFormatView
แสดงผลไอคอนที่เหมาะสมที่สุดตามแอตทริบิวต์ logoSize
ลิงค์การเล่น
เมื่อแอปตั้งค่าKEY_SUBTITLE_LINK_MEDIA_ID
หรือ KEY_DESCRIPTION_LINK_MEDIA_ID
OEM จะต้องแสดงคำบรรยายหรือคำอธิบายในลักษณะที่แนะนำว่าสามารถแตะได้ จากนั้นเปิดมุมมองเรียกดูเพื่อแสดงรายการสื่อที่เชื่อมโยงเมื่อผู้ใช้แตะการควบคุมการเล่น
หน้าจอการเล่นประกอบด้วยชุดควบคุมการเล่นเพิ่มเติม ซึ่งจัดอยู่ใน แถวควบคุม แถวรอง (แสดงด้านล่างเป็นแถวด้านบน) จะแสดงเฉพาะในกรณีที่พื้นที่ในแถวแรกไม่เพียงพอที่จะแสดงการกระทำทั้งหมดที่ส่งกลับโดยแอปสื่อจาก PlaybackStateCompat#getActions()
รูปที่ 4 ส่วนควบคุมการเล่น
OEM สามารถปรับแต่งไอคอนของการดำเนินการมาตรฐานได้ แต่จะต้องนำเสนอไอคอนการดำเนินการแบบกำหนดเองตามที่แอปสื่อจัดเตรียมไว้ให้
วิดเจ็ตสื่อบนหน้าจอหลัก
วิดเจ็ตนี้ถูกนำมาใช้เป็นส่วนย่อยใน car-media-common
ส่วนนี้ประกอบด้วยหน้าจอการเล่นเวอร์ชันย่อขนาดตามที่อธิบายไว้ข้างต้น ใช้กฎและความสามารถการปรับแต่งเดียวกันทั้งหมด
รูปที่ 5. วิดเจ็ตสื่อบนหน้าจอหลัก
ปุ่มตัวเลือกแอปที่แสดงด้านบนใช้ฟังก์ชัน สวิตช์ ที่อธิบายไว้ใน ขั้นตอนผู้ใช้การสลับแหล่งที่มาของสื่อ
หากต้องการใช้ไอคอน Media Source ปัจจุบันสำหรับปุ่ม App Selector ให้ซ้อนทับแฟล็ก use_media_source_logo_for_app_selector
ที่กำหนดใน platform/packages/apps/Car/libs/car-media-common/res/values/bools.xml
และตั้งค่าเป็น true
ด้วยการเปลี่ยนแปลงนี้ ไอคอนแหล่งสื่อที่ฝั่งตรงข้ามของแถบเครื่องมือแอพจะถูกซ่อน การปรับแต่งยังใช้กับแอป Media Center และแอปวิทยุอ้างอิงด้วย
รูปที่ 6 ปุ่มเลือกแอปมีเดีย
รูปแบบปุ่มเล่น หยุดชั่วคราว และหยุด
เค้าโครงปุ่มเล่น/หยุด/หยุด สามารถปรับแต่งได้สำหรับ "กำลังเล่น" และมุมมองการควบคุมการเล่นที่ย่อเล็กสุด เค้าโครงทั้งสองถูกกำหนดไว้ใน packages/apps/Car/libs/car-media-common/res/layout/
หากต้องการปรับแต่งเลย์เอาต์ของปุ่ม ให้ใช้การวางซ้อนเวลาบิลด์กับ play_pause_stop_button_layout.xml
และ minimized_play_pause_stop_button_layout.xml
ไฮไลท์รายการปัจจุบันในคิวการเล่น
สถานะของรายการคิวการเล่นปัจจุบันถูกตั้งค่าเป็น selected
ดังนั้นจึงสามารถปรับแต่งได้โดยใช้ทรัพยากรของรัฐ เช่น รายการสถานะสี (ดู ทรัพยากรรายการสถานะสี ) และรายการสถานะที่ถอนออกได้ (ดู ทรัพยากรที่วาดได้ ) หากต้องการใช้การเปลี่ยนแปลงสไตล์ที่จำเป็น คุณสามารถแทนที่เค้าโครงรายการคิว packages/apps/Car/Media/res/layout/queue_list_item.xml หรือแยกต่างหาก
คุณยังสามารถแสดงไอคอนถัดจากรายการคิวการเล่นปัจจุบันได้:
- ซ้อนทับ
show_icon_for_now_playing_queue_list_item
ธงบูลีนที่กำหนดใน packages/apps/Car/Media/res/layout/queue_list_item.xml หรือแยกต่างหากหากต้องการซ่อนตัวจับเวลาการเล่น ให้ตั้งค่า
show_time_for_now_playing_queue_list_item
เป็นfalse
- ใช้สถานะที่วาดได้ เช่น เบื้องหน้าหรือพื้นหลังของมุมมองรูทรายการ (ดูที่ packages/apps/Car/Media/res/layout/queue_list_item.xml หรือมุมมองแยกต่างหากในลำดับชั้นมุมมองของรายการ
รูปที่ 7 รายการปัจจุบันที่ไฮไลต์ในคิวการเล่น