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

สื่อเป็นของชุดแอประบบ (เช่น ตัวเปิดแอปและโทรศัพท์) แอปเหล่านี้ใช้รูปแบบและเนื้อหาที่เหมือนกันซึ่งกำหนดไว้ที่ระดับต่างกันในโครงสร้าง 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 ของสื่อ

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