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

สื่ออยู่ในชุดแอปพลิเคชันระบบ (เช่น 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 ให้ผู้ใช้ลงชื่อเข้าใช้ เรียกดูเนื้อหา และใช้การควบคุมการเล่นโดยละเอียด
  • วิดเจ็ตสื่อบนหน้าจอหลัก เปิดใช้งานการใช้คุณสมบัติการควบคุมการเล่นสื่อหลักในหน้าจอหลัก

อินเทอร์เฟซผู้ใช้สื่อ

รูปนี้อธิบายโครงสร้างของ Media 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 ) ใช้เพื่อจัดระเบียบรายการสื่อเป็นส่วนๆ

หน้าจอการเล่น

หากต้องการแสดงหน้าจอนี้ ให้ขยายส่วนควบคุมการเล่นที่ย่อเล็กสุด:

  • กำลังเล่นข้อมูลรายการสื่อ (รวมถึงชื่อและคำบรรยาย)
  • ควบคุมการเล่นให้สมบูรณ์
  • คิวการเล่น (ใช้เพื่อแสดงรายการที่เล่นล่าสุดหรือรายการถัดไปที่จะเล่น)

ส่วนประกอบของหน้าจอ Playback ระบุไว้ในรูปด้านล่าง

หน้าจอการเล่น

รูปที่ 3 หน้าจอการเล่น

หน้าจอการเล่นไม่แชร์แถบเครื่องมือกับส่วนที่เหลือของแอปพลิเคชัน แต่องค์ประกอบที่ด้านบนของหน้าจอจะได้รับการจัดการทีละรายการโดยหน้าจอนี้

การควบคุมการเล่น

หน้าจอการเล่นประกอบด้วยชุดควบคุมการเล่นแบบขยาย ซึ่งจัดอยู่ใน แถวควบคุม แถวรอง (แสดงด้านล่างเป็นแถวด้านบน) จะแสดงก็ต่อเมื่อพื้นที่ในแถวแรกไม่เพียงพอที่จะแสดงการดำเนินการทั้งหมดที่ส่งคืนโดยแอปสื่อจาก PlaybackStateCompat#getActions()

การควบคุมการเล่น

รูปที่ 4 การควบคุมการเล่น

OEM สามารถปรับแต่งไอคอนของการดำเนินการมาตรฐานได้ แต่ต้องแสดงไอคอนการดำเนินการที่กำหนดเองตามที่ได้รับจากแอปพลิเคชันสื่อ

วิดเจ็ตสื่อบนหน้าจอหลัก

วิดเจ็ตนี้ใช้งานเป็นส่วนย่อยใน car-media-common ส่วนนี้รวมถึงเวอร์ชันย่อของหน้าจอการเล่นที่อธิบายไว้ข้างต้น ใช้กฎและความสามารถในการปรับแต่งที่เหมือนกันทั้งหมด

วิดเจ็ตสื่อบนหน้าจอหลัก

รูปที่ 5. วิดเจ็ตสื่อหน้าจอหลัก

ปุ่มตัวเลือกแอปที่แสดงด้านบนนี้ใช้ฟังก์ชัน สวิตช์ ที่อธิบายไว้ใน Media Source Switching User Flow

ในการใช้ไอคอน 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 และแอพ Radio อ้างอิง

ปุ่มเลือกแอปสื่อ

รูปที่ 6. ปุ่ม Media App Selection

รูปแบบปุ่มเล่น หยุดชั่วคราว และหยุด

เค้าโครงปุ่มเล่น/หยุดชั่วคราว/หยุดสามารถกำหนดเองได้สำหรับ "กำลังเล่น" และมุมมองการควบคุมการเล่นที่ย่อเล็กสุด เค้าโครงทั้งสองถูกกำหนดไว้ใน packages/apps/Car/libs/car-media-common/res/layout/

ในการปรับแต่งเลย์เอาต์ของปุ่ม ให้ใช้การซ้อนทับเวลาบิลด์กับ play_pause_stop_button_layout.xml และ minimized_play_pause_stop_button_layout.xml _play_pause_stop_button_layout.xml

ไฮไลท์รายการปัจจุบันในคิวการเล่น

สถานะของรายการคิวการเล่นปัจจุบันถูกตั้งค่าเป็นที่ selected ดังนั้นจึงสามารถปรับแต่งได้โดยใช้ทรัพยากรของรัฐ เช่น รายการสถานะสี (ดู ทรัพยากรรายการสถานะสี ) และรายการที่สามารถถอนออกได้ (ดู ทรัพยากรที่ วาดได้ ) ในการใช้การเปลี่ยนแปลงการจัดรูปแบบที่จำเป็น คุณสามารถแทนที่เค้าโครงรายการคิว ( package/apps/Car/Media/res/layout/queue_list_item.xml )

คุณยังสามารถแสดงไอคอนถัดจากรายการคิวการเล่นปัจจุบัน:

  • วางซ้อนแฟล็กบูลีน show_icon_for_now_playing_queue_list_item ที่กำหนดไว้ใน package/apps/Car/Media/res/values/bools.xml ด้วย true

    หากต้องการซ่อนตัวจับเวลาการเล่น ให้ตั้งค่า show_time_for_now_playing_queue_list_item false

  • ใช้ state drawable เช่น เบื้องหน้าหรือเบื้องหลังของมุมมอง root ของรายการ (ดู packages/apps/Car/Media/res/layout/queue_list_item.xml ) หรือมุมมองแยกต่างหากในลำดับชั้นการดูของรายการ

รูปที่ 7 ไฮไลท์รายการปัจจุบันในคิวการเล่น