ปรับแต่งสื่อ

สื่ออยู่ในชุดแอประบบ (เช่น 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 สื่อ:

สื่อ 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 รายการปัจจุบันที่ไฮไลต์ในคิวการเล่น