ภาพรวม UI ที่ปรับขนาดได้

ใช้ UI ที่ปรับขนาดได้เพื่อสร้างประสบการณ์ของผู้ใช้ที่ซับซ้อน ไดนามิก และหลายแผงในรถยนต์ UI ที่รองรับการปรับขนาด:

  • มีระบบการแสดงหน้าต่างที่ยืดหยุ่น

  • ลดความเสี่ยง ต้นทุน และความซับซ้อนด้านวิศวกรรมที่เกิดจาก ชุดเครื่องมือทดสอบความเข้ากันได้ (CTS) สำหรับการติดตั้งใช้งานอินเทอร์เฟซผู้ใช้

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

Android 17 เปิดตัวฟีเจอร์ต่อไปนี้ที่เจาะจง การแสดงหน้าต่างขั้นสูง

ประสบการณ์การใช้งานตัวอย่าง

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

พื้นหลังของแผนที่พร้อมแอปที่ลอยอยู่

การกำหนดค่าพื้นหลังแผนที่ที่มีแอปพลิเคชันอื่นๆ ลอยอยู่ด้านบน

พื้นหลังของแอป

การกำหนดค่าพื้นหลังของแอปพลิเคชันที่มีแผงลอย

แอปที่ปักหมุดไว้ในส่วน "แอปอื่นๆ"

แอปพลิเคชันที่ปักหมุด เช่น คอนเทนเนอร์วิดเจ็ต พร้อมแอปพลิเคชันอื่นๆ ที่เปิดอยู่ด้านบน

แผงแบบลอยตามเงื่อนไข

แผงลอยแบบมีเงื่อนไขซึ่งจะปรากฏเมื่อเป็นไปตามเงื่อนไขที่เฉพาะเจาะจงเท่านั้น เช่น เมื่อมีการเล่นสื่อหรือเมื่อมีการทริกเกอร์การแจ้งเตือน

แอปที่ปักหมุดไว้ใกล้กับผู้ขับ

แอปพลิเคชันที่ปักหมุดจะอยู่ใกล้กับผู้ขับมากขึ้น

เลย์เอาต์การแยกหน้าจอ

เลย์เอาต์การแยกหน้าจอที่แสดงแอปพลิเคชัน 2 รายการข้างกัน

การแยกหน้าจอแบบอินเทอร์แอกทีฟ

เลย์เอาต์แบบแยกหน้าจอแบบอินเทอร์แอกทีฟที่ช่วยให้ปรับขนาดแบบไดนามิกได้

เลย์เอาต์หลายจุดยึดสำหรับหน้าจอขนาดใหญ่

เลย์เอาต์แบบหลายจุดยึดที่ออกแบบมาสำหรับหน้าจอขนาดใหญ่

เลย์เอาต์หน้าจอหลักที่มีภาพสไลด์ของแอปพลิเคชัน

สิทธิประโยชน์และการปฏิบัติตามข้อกำหนด

ข้อดีของ UI ที่รองรับการปรับขนาดมีดังนี้

  • ลดความเสี่ยงในการทดสอบ: เฟรมเวิร์กได้รับการรับรองล่วงหน้าและเป็นไปตาม CTS ซึ่งช่วยลดความเสี่ยงหลักที่ทำให้การทดสอบล้มเหลวในช่วงท้ายของวงจรโปรแกรม UI ที่ปรับขนาดได้ช่วยประหยัดเวลาในการทำงานด้านวิศวกรรมได้หลายเดือนและเร่งการปฏิบัติตามข้อกำหนด

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

  • ความซับซ้อนในการติดตั้งใช้งานน้อยลง: การแยกรายละเอียดเป็นโมเดล XML ระดับสูงที่ขับเคลื่อนด้วยการกำหนดค่า จะช่วยลดอุปสรรคในการเข้าถึงตรรกะการแบ่งหน้าต่างที่กำหนดเอง

  • ประสิทธิภาพดีขึ้น: UI ที่ปรับขนาดได้ทำงานบนพื้นฐานการจัดหน้าต่างที่มีประสิทธิภาพสูง ซึ่งผสานรวมกับ Android มาตรฐานอย่างเต็มรูปแบบ การเปลี่ยนฉากจะไหลลื่น ช่วยให้เพิ่มประสิทธิภาพได้โดยตรง

องค์ประกอบหลักในการสร้างสรรค์

UI ที่ปรับขนาดได้ช่วยลดความจำเป็นในการใช้โค้ดเฉพาะ OEM, เพิ่มความสะดวกในการอัปเดต และ ลดความเสี่ยงในการเปิดตัวด้วยการหลีกเลี่ยงข้อผิดพลาดและลดปัญหาการรับรอง

แนวทางที่ขับเคลื่อนด้วย XML ช่วยแก้ปัญหาที่พบบ่อยเมื่อจัดการระบบการแสดงผลที่ซับซ้อนใน AAOS เช่น การวางตำแหน่งที่แม่นยำ ความขัดแย้งของลำดับ Z และโฟกัสของแอป

Scalable UI มีองค์ประกอบหลักเหล่านี้

แผง

แผงคือคอนเทนเนอร์สี่เหลี่ยมผืนผ้าพื้นฐานบนหน้าจอ แต่ละแผงจะ แมปกับงานรูทเฉพาะสำหรับการจัดการที่เป็นอิสระ แผงสามารถโฮสต์ งานของแอป (TaskPanel) หรือเนื้อหาตามมุมมอง เช่น วิดเจ็ต (DecorPanel) ดูข้อมูลเพิ่มเติมได้ที่กำหนดค่าแผง

ตัวแปร

รูปแบบจะกำหนดสถานะภาพที่เฉพาะเจาะจงสำหรับแผง และมีพร็อพเพอร์ตี้ต่างๆ เช่น bounds (ตำแหน่งและขนาด), visibility, layer (ลำดับ Z) และรัศมี corner แผงเดียวอาจมีตัวแปร เช่น opened, closed หรือ minimized ดูข้อมูลเพิ่มเติมได้ที่ใช้ตัวแปรเพื่อออกแบบสถานะภาพ

ทรานซิชัน

การเปลี่ยนภาพจะกำหนดวิธีที่แผงย้ายจากสถานะปัจจุบัน fromVariant ไปยังสถานะใหม่ toVariant Event จะทริกเกอร์การเปลี่ยนผ่าน ซึ่งกำหนดภาพเคลื่อนไหวที่แผงใช้ระหว่างการเปลี่ยนสถานะ แผงควรเปลี่ยนจากสถานะปัจจุบันเป็นtoVariant สำหรับการซิงโครไนซ์ Core Window Manager จะเคลื่อนไหวและประสานงานการเปลี่ยนภาพทั้งหมด

  • เหตุการณ์: ทริกเกอร์ที่เริ่มการเปลี่ยนแปลง UI OEM หรือระบบสามารถ กำหนดทริกเกอร์ล่วงหน้าได้ เช่น _System_OnHomeEvent, _System_TaskOpenEvent หรือการกดปุ่มนำทางที่กำหนดเอง

เช่น Scalable UI ใช้เหตุการณ์เพื่อทริกเกอร์การเปลี่ยน การเปลี่ยนเหล่านี้จะเคลื่อนไหวแผงจากรูปแบบหนึ่งไปยังอีกรูปแบบหนึ่งเพื่อแสดงการเปลี่ยนแปลงแบบไดนามิกใน UI UI ที่ปรับขนาดได้จะสื่อสารการเปลี่ยนแปลงเหล่านี้กับแอปอื่นๆ ของระบบ เพื่อปรับเนื้อหาตามต้องการ การกำหนดความสัมพันธ์ของ UI ใน XML ช่วยให้คุณทำสิ่งต่อไปนี้ได้

  • ระบุลักษณะการทำงานของ UI ที่ซับซ้อน: กำหนดการโต้ตอบที่ซับซ้อนของอินเทอร์เฟซผู้ใช้

  • จัดเรียงระบบการแสดงหน้าต่าง: ควบคุมการจัดตำแหน่งและการวางเลเยอร์ของหน้าต่าง

  • ใช้ธีมภาพ: ใช้การสร้างแบรนด์และสุนทรียะที่สอดคล้องกัน

  • ลดความซับซ้อนของโค้ด: ลดความจำเป็นในการพัฒนาโค้ดที่กำหนดเองอย่างกว้างขวาง

ดูข้อมูลเพิ่มเติมได้ที่กำหนดค่าการเปลี่ยนผ่าน

ปุ่ม UI ของระบบ

นอกเหนือจากการทริกเกอร์ Intent แล้ว CarSystemBarButtons ยังทริกเกอร์เหตุการณ์ UI ที่ปรับขนาดได้เมื่อแตะโดยใช้แอตทริบิวต์ event, selectedEvent และ unselectedEvent

event อธิบายเหตุการณ์ที่จะทริกเกอร์เมื่อแตะปุ่ม หากต้องการควบคุมเหตุการณ์อย่างละเอียดมากขึ้น ให้ใช้แอตทริบิวต์ selectedEvent และ unselectedEvent เพื่อระบุเหตุการณ์ที่จะทริกเกอร์เมื่อเลือกหรือยกเลิกการเลือกปุ่มตามลำดับ

เมื่อใดที่ควรใช้ UI ของระบบ

ส่วนนี้จะอธิบายการใช้งาน UI ที่ปรับขนาดได้ที่เหมาะสม

สร้างเลย์เอาต์หลายแผงแบบถาวร

สร้างประสบการณ์แบบหลายโซนที่ส่วนต่างๆ ของหน้าจอ จะทุ่มเทให้กับฟังก์ชันที่เฉพาะเจาะจงอย่างถาวร เช่น แถบควบคุมสื่อโดยเฉพาะ แถบควบคุมสภาพอากาศ หรือแผนที่แบบเต็มหน้าจอ

ใช้ TaskPanels สำหรับแอปหลัก (เช่น การนำทาง) และ DecorPanels สำหรับ องค์ประกอบ UI ในรูปแบบของมุมมองที่ต้องวางไว้ระหว่าง TaskPanels

ใช้ฉากหน้าแรกแบบไดนามิก

ใช้ฉากหน้าแรกที่ประกอบด้วยแผงแอปหลายแผงที่มองเห็นได้พร้อมกันและโต้ตอบได้ เช่น แผนที่ มีเดียเพลเยอร์ และตารางกริดสำหรับแอป

หากต้องการเปลี่ยนแผงที่เกี่ยวข้องทั้งหมดเป็นตัวแปรหน้าแรกของ opened หรือ default ให้กำหนดค่า _System_HomeEvent

ใช้การวางซ้อนตามบริบท

วางองค์ประกอบ UI ที่ไม่ใช่แอป เช่น วิดเจ็ตเชิงบริบท การสร้างแบรนด์ที่กำหนดเอง และแถบที่ลากได้ ซึ่งสามารถเคลื่อนไหวร่วมกับงานของแอป

ใช้ DecorPanels สำหรับองค์ประกอบที่ใช้ตกแต่งหรือโฮสต์วิดเจ็ตโดยเฉพาะ หากวิดเจ็ตโฮสต์แอปที่ใช้งานได้เต็มรูปแบบและเปิดใช้ได้ Panel > TaskPanel จะเป็นตัวเลือกที่ดีที่สุด ใช้ DecorPanels สำหรับองค์ประกอบ UI ที่อิงตามมุมมองเมื่อต้องซิงค์เลเยอร์กับเลเยอร์ TaskPanel

ออกแบบการโต้ตอบกับแผงที่ซับซ้อน

ออกแบบการดำเนินการขั้นสูงที่ขับเคลื่อนโดยผู้ใช้ เช่น การปรับขนาดแผงแอปแบบไดนามิก หรือการปรับมุมมองแผงหน้าปัดตามเนื้อหาที่แสดงหลัก

กำหนด Events ที่กำหนดเองเพื่อทริกเกอร์ Transitions ที่เฉพาะเจาะจงซึ่งไม่ใช่มาตรฐานของระบบ

ขยายเลย์เอาต์ IVI ไปยัง Unified Digital Cockpit

UI ที่ปรับขนาดได้จะจัดการการแสดงผลแบบหลายแผง (TaskPanel และ DecorPanel) บน จอแสดงผลสาระบันเทิงหลัก (display0) ใน SDV IVI VM คุณสามารถจับคู่ UI ที่ปรับขนาดได้กับความปลอดภัยในการแสดงผลเพื่ออัปเดตมุมมองแผงหน้าปัด เมื่อเลย์เอาต์การแสดงผลหลักเปลี่ยนแปลงได้โดยทำดังนี้

  • การดำเนินการ UI ที่ปรับขนาดได้ (SDV IVI VM): เมื่อสถานะแผงเปลี่ยนแปลงใน จอแสดงผลหลัก UI ที่ปรับขนาดได้จะส่ง Intent โดยใช้ <Action> ใน xml/scalable_ui_actions.xml เพื่อแจ้งให้คอมโพเนนต์คลัสเตอร์ทราบถึงการเปลี่ยนแปลงเลย์เอาต์หรือ โหมด ดูข้อมูลเพิ่มเติมได้ที่กำหนดค่าการดำเนินการ
  • DriverUI (VM SDV IVI): ทำงานบนจอแสดงผลคลัสเตอร์ (display1) เป็นแอปของระบบที่เปิดโดย ClusterHomeManager และสร้างด้วย automotive-design-compose DriverUI แสดงเนื้อหาคลัสเตอร์ที่ไม่ใช่คลัสเตอร์ความปลอดภัย (เช่น แผนที่ สื่อ และการโทร) และจัดการการอัปเดตสถานะ จากระบบ IVI
  • SDV Gateway ใน IVI (SDV IVI VM): DriverUI ใช้ SDV Gateway Client เพื่อเชื่อมต่อกับ High availability renderer (HAR) ผ่าน gRPC (driverui.proto) DriverUI จะส่งการอัปเดตสถานะคลัสเตอร์ (เช่น รูปแบบเลย์เอาต์ โทเค็นธีม และการเปลี่ยนแปลงภาษา) พร้อมกับข้อความ Heartbeat เป็นระยะ
  • HAR และSafety Monitor (SDV Media VM): ทำงานในSDV Media VM แยกต่างหากเพื่อแสดงองค์ประกอบที่สำคัญต่อความปลอดภัย (เช่น ความเร็ว เกียร์ ไฟเตือน เสียงกริ่ง และฟีดกล้องมองหลัง) ขณะที่รับสัญญาณชีพจาก DriverUI HAR จะทำให้ภูมิภาคคลัสเตอร์ Android โปร่งใสเพื่อให้เนื้อหา DriverUI ผสานรวมกับภาพซ้อนความปลอดภัยของ HAR หาก SDV IVI บูตอยู่หรือใช้งานไม่ได้ HAR จะแสดงตัวยึดตำแหน่งสำรอง
  • การกำหนดค่า OEM: หากต้องการตั้งค่าขั้นตอนการทำงานนี้ ให้กำหนดค่าทริกเกอร์ <Event> และ เจตนา <Action> ใน xml/scalable_ui_actions.xml บน SDV IVI อัปเดต ไฟล์การออกแบบ Figma และการแมปสัญญาณ Config.json สำหรับ ห่วงโซ่เครื่องมือออกแบบความปลอดภัย และใช้ Platform Abstraction Layer (PAL) ของ HAR สำหรับฮาร์ดแวร์เป้าหมาย