การปรับแต่ง Toolbar ด้วย Runtime Resource Overlays

ภาพรวมเค้าโครงพื้นฐาน

แถบเครื่องมือ car-ui-lib ถูกปรับแต่งผ่านไฟล์โครงร่าง car_ui_base_layout_toolbar.xml เรียกว่าแถบเครื่องมือ "เลย์เอาต์พื้นฐาน" เนื่องจากไฟล์เลย์เอาต์นี้มี FrameLayout พร้อม id car_ui_base_layout_content_container ซึ่งจะบรรจุเนื้อหาทั้งหมดของแอปหลังจากเลย์เอาต์พองตัวไม่นาน โครงสร้างนี้อนุญาตให้ OEM วางแถบเครื่องมือในตำแหน่งอื่นที่ไม่ใช่ด้านบนของหน้าจอ

รูปแบบที่เป็นไปได้
เค้าโครงแถบเครื่องมือ 1เค้าโครงแถบเครื่องมือ2เค้าโครงแถบเครื่องมือ3
เค้าโครงแถบเครื่องมือ4เค้าโครงแถบเครื่องมือ 5เค้าโครงแถบเครื่องมือ6

โดยการเปลี่ยนพารามิเตอร์เลย์เอาต์บน car_ui_base_layout_content_container แอปสามารถบีบอัดลงในพื้นที่ที่เล็กลงเพื่อให้มีที่ว่างสำหรับแถบเครื่องมือ อย่างไรก็ตาม การปรับแต่งบางอย่างอาจต้องการให้แถบเครื่องมือมีความโปร่งใสและซ้อนทับที่ด้านบนของแอป ในกรณีนี้ มุมมองสามารถติดแท็กด้วย car_ui_top/bottom/left/right_inset หาก car-ui-lib ตรวจพบมุมมองด้วยแท็กดังกล่าว มันจะสื่อสารตำแหน่งและขนาดของมุมมองนั้นไปยังแอป เพื่อให้สามารถเยื้องเนื้อหาเข้าด้านในด้วยจำนวนนั้น แต่ยังคงรักษาพื้นหลังที่เหมาะสมไว้ในพื้นที่ใต้แถบเครื่องมือ . ตัวอย่างเช่น แอพส่วนใหญ่จะมีรายการแรกใน CarUiRecyclerView โดยเริ่มต้นที่ด้านล่างสิ่งที่ใส่เข้าไปที่ระบุ แต่ยังคงมองเห็นได้หลังแถบเครื่องมือเมื่อผู้ใช้เลื่อนลง

การสนับสนุนโรตารี่

เพื่อรองรับตัวควบคุมแบบโรตารี่ เลย์เอาต์พื้นฐานต้องมี FocusParkingView โดยเร็วที่สุดในเลย์เอาต์ มุมมองนี้คือสิ่งที่ได้รับการโฟกัสเมื่อไม่มีการโฟกัสที่ผู้ใช้มองเห็น แถบเครื่องมือจะต้องถูกรวมไว้ใน FocusParkingView ซึ่งระบุว่าเป็นโซนสะกิดแยกต่างหากสำหรับตัวควบคุมแบบโรตารี่ หากไม่ได้รวมอยู่ใน FocusParkingView ผู้ใช้จะไม่สามารถโต้ตอบกับแถบเครื่องมือด้วยตัวควบคุมแบบหมุนได้

แท็บ

แท็บแถบเครื่องมือปรับแต่งโดยไฟล์โครงร่าง car_ui_toolbar_tab_item.xml หรือ car_ui_toolbar_tab_item_flexible.xml ไม่มีความแตกต่างในการทำงานระหว่างไฟล์ car_ui_toolbar_tab_flexible_layout Boolean เป็นตัวกำหนดว่าไฟล์ใดถูกใช้ ด้วยเหตุนี้ ขอแนะนำให้ตั้งค่า car_ui_toolbar_tab_flexible_layout false และปรับแต่งเฉพาะไฟล์เลย์เอาต์ปกติเท่านั้น

ImageView ของแท็บจะถูกแต้มด้วยสี car_ui_toolbar_tab_item_selector ในโค้ด Java ดังนั้น car_ui_toolbar_tab_item_selector จึงต้องปรับแต่งควบคู่ไปกับเลย์เอาต์ แอปสามารถขอไม่ให้ไอคอนของแท็บมีสีนี้ได้เช่นกัน

TextView ของแท็บมีการตั้งค่าลักษณะข้อความเป็น TextAppearance.CarUi.Widget.Toolbar.Tab หรือ TextAppearance.CarUi.Widget.Toolbar.Tab.Selected ในโค้ด Java ดังนั้นลักษณะข้อความที่ตั้งค่าไว้ในไฟล์โครงร่างจะไม่มีผล ต้องปรับแต่งสไตล์เหล่านี้ด้วย

MenuItems คือปุ่มที่มุมบนขวาของแถบเครื่องมือเริ่มต้น อาจเป็นข้อความ ไอคอน ไอคอนและข้อความ หรือสวิตช์ รูปแบบเหล่านี้ล้วนเป็นส่วนหนึ่งของไฟล์เลย์เอา car_ui_toolbar_menu_item เนื่องจาก MenuItems จำเป็นต้องสามารถเปลี่ยนแปลงระหว่างแต่ละรูปแบบได้หากแอปร้องขอ

MenuItems สามารถเป็น car_ui_toolbar_menu_item_primary ซึ่งขยายไฟล์โครงร่างที่แตกต่างกัน: car_ui_toolbar_menu_item_primary MenuItem หลักต้องมีลักษณะที่แตกต่างจาก MenuItem ปกติ เช่น ผ่านปุ่มแบบมีขอบ/ไม่มีขอบ โดยค่าเริ่มต้น car_ui_toolbar_menu_item_primary เพียงเปลี่ยนเส้นทางไปที่ car_ui_toolbar_menu_item ดังนั้นจึงดูเหมือนกัน

MenuItems สามารถ เปิดใช้งาน ได้ ซึ่งเป็นอีกสถานะภาพที่บ่งชี้ว่า MenuItem ถูกสลับ สถานะนี้ใช้งานโดยการเรียก setActivated(true) ในมุมมอง MenuItem ซึ่งเพิ่มสถานะ state_activated ให้กับ drawables ทั้งหมดในมุมมองของ MenuItem สถานะที่สามารถถอนได้นี้สามารถตอบสนองต่อตัวเลือกที่ถอนได้ใน RRO

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

แถบค้นหาอยู่ในไฟล์เลย์เอา car_ui_toolbar_search_view แยกต่างหาก เพื่อปรับปรุงประสิทธิภาพการเติมเลย์เอาต์ของเลย์เอาต์สำหรับแอปที่ไม่ต้องการแถบค้นหา FrameLayout ที่มี id car_ui_toolbar_search_view_container จะมีแถบค้นหาเมื่อขยายออก