สื่อเป็นของชุดแอประบบ (เช่น ตัวเปิดแอปและโทรศัพท์) แอปเหล่านี้ใช้รูปแบบและเนื้อหาที่เหมือนกันซึ่งกำหนดไว้ที่ระดับต่างกันในโครงสร้าง 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
มีองค์ประกอบที่แชร์ระหว่าง Media กับ UI ของสื่ออื่นๆ เช่น วิดเจ็ตสื่อในหน้าจอหลักpackages/apps/Car/Media.
แอประบบทั้งหมดใช้ธีมของตัวเองซึ่งขยายมาจากTheme.CarUi
ตามที่ระบุไว้ในcar-ui-lib
Android Automotive AOSP มีการนำเสนอสื่อ 2 รายการ
- UI ของสื่อ ช่วยให้ผู้ใช้ลงชื่อเข้าใช้ เรียกดูเนื้อหา และใช้การควบคุมการเล่นอย่างละเอียดได้
- วิดเจ็ตสื่อในหน้าจอหลัก เปิดใช้ฟีเจอร์หลักในการควบคุมการเล่นสื่อบนหน้าจอหลัก
อินเทอร์เฟซผู้ใช้ของสื่อ
รูปภาพนี้อธิบายโครงสร้างของ UI ของสื่อ
รูปที่ 1 อินเทอร์เฟซผู้ใช้สำหรับสื่อ
ดูรายละเอียดเกี่ยวกับหลักเกณฑ์ UX และ UI รวมถึงโครงสร้างเชิงพื้นที่ของคอมโพเนนต์ต่างๆ ของสื่อได้ที่โมเดลเชิงพื้นที่
AppBarView: แถบเครื่องมือ
แถบเครื่องมือ UI ของสื่อเป็นคอมโพเนนต์ที่แชร์กับแอปอื่นๆ ของระบบ เช่น แป้นโทรศัพท์และวิทยุ ดูวิธีปรับแต่งแถบเครื่องมือได้ที่คู่มือการผสานรวมไลบรารี 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 วิดเจ็ตสื่อในหน้าจอหลัก
ปุ่มตัวเลือกแอปที่แสดงด้านบนใช้ฟังก์ชันสวิตช์ตามที่อธิบายไว้ในขั้นตอนการเปลี่ยนแหล่งที่มาของสื่อ
หากต้องการใช้ไอคอนแหล่งที่มาของสื่อปัจจุบันสำหรับปุ่มตัวเลือกแอป ให้วางซ้อน Flag use_media_source_logo_for_app_selector
ที่กําหนดไว้ใน platform/packages/apps/Car/libs/car-media-common/res/values/bools.xml
แล้วตั้งค่าเป็น true
ในการเปลี่ยนแปลงนี้ ไอคอนแหล่งที่มาของสื่อที่ตรงข้ามกับแถบเครื่องมือแอปจะถูกซ่อน การปรับแต่งยังนำไปใช้กับแอป Media Center และแอปวิทยุอ้างอิงอีกด้วย
รูปที่ 6 ปุ่มเลือกแอปสื่อ
เลย์เอาต์ปุ่มเล่น หยุดชั่วคราว และหยุด
เลย์เอาต์ของปุ่มเล่น/หยุดชั่วคราว/หยุดสามารถปรับแต่งสำหรับ "กำลังเล่น" และมุมมองตัวควบคุมการเล่นที่ถูกย่อขนาดได้ เลย์เอาต์ทั้ง 2 รายการได้รับการกําหนดใน 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
Flag แบบบูลีนที่กําหนดไว้ใน 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 ไฮไลต์รายการปัจจุบันในคิวการเล่น