ปรับแต่งการตั้งค่า UI ของรถยนต์

หน้านี้อธิบายวิธีใช้และปรับแต่งองค์ประกอบในแพ็คเกจ com.android.car.ui.preference ซึ่งรวมถึงองค์ประกอบ UI ที่สามารถใช้เพื่อนำเสนอการตั้งค่าสำหรับแอพต่างๆ

องค์ประกอบส่วนใหญ่เป็นคลาสย่อยคลาส com.androidx.preference ที่คุณเพิ่มการปรับแต่ง CarUi ในกรณีส่วนใหญ่ คุณสามารถใช้องค์ประกอบในแพ็คเกจ com.android.car.ui.preferences ได้โดยใช้ com.android.car.PreferenceFragment PreferenceFragment จะแทนที่องค์ประกอบ androidx.preference ทั้งหมดด้วยองค์ประกอบที่เทียบเท่าใน car.ui.preferences หากต้องการดูฟังก์ชันการทำงานเหล่านี้ โปรดดูแอปอ้างอิง car-ui-lib Paintbooth ตัวอย่างเช่น:

รูปที่ 1 เค้าโครงการตั้งค่า UI ของรถยนต์

ประเภทการตั้งค่าที่มีอยู่

ส่วนนี้จะอธิบายประเภทการตั้งค่า UI ของรถยนต์

การตั้งค่าFragment

PreferenceFragment เป็นคลาสย่อยของ androidx.preference.PreferenceFragmentCompat และเป็นคลาสพื้นฐานที่ไคลเอ็นต์ควรใช้ ในระหว่างการเรียก setPreferenceScreen คลาสนี้จะแทนที่องค์ประกอบจาก androidx.preference โดยอัตโนมัติด้วยองค์ประกอบที่เทียบเท่าจาก car.ui.preference องค์ประกอบ

<style name="PreferenceFragment.CarUi">
        <item name="android:divider">?android:attr/listDivider</item>
        <item name="android:layout">@layout/car_ui_preference_fragment_with_toolbar</item>
</style>

การตั้งค่ารถยนต์

นี่คือ CarUi ที่เทียบเท่ากับคลาส androidx.preference.Preference ที่รองรับแอตทริบิวต์ต่อไปนี้ ซึ่งสามารถปรับแต่งได้โดยใช้ Runtime Resource Overlay (RRO) องค์ประกอบ CarUi อื่นๆ ทั้งหมดที่ใช้รูปแบบ CarUiPreference ที่ต่างกันยังรองรับแอตทริบิวต์ต่อไปนี้ด้วย

<declare-styleable name="CarUiPreference">
      <!-- Toggle for showing chevron -->
      <attr name="showChevron" format="boolean" />
      <!-- Show ripple when disabled preference is clicked -->
      <attr name="showRippleOnDisabledPreference" format="boolean" />
</declare-styleable>

ต่อไปนี้เป็นรูปแบบพื้นฐานสำหรับ com.android.car.ui.preference ซึ่งขยายธีม androidx.Preference chevron ที่ถอนออกได้ถูกกำหนดไว้ใน car_ui_preference_icon_chevron.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_enabled="false" android:drawable="@drawable/car_ui_preference_icon_chevron_disabled"/>
  <item android:state_enabled="true" android:drawable="@drawable/car_ui_preference_icon_chevron_enabled"/>
</selector>

ripple ถูกกำหนดไว้ใน car_ui_recyclerview_button_ripple_background

<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/car_ui_ripple_color" />

<style name="Preference.CarUi">
        <item name="allowDividerBelow">false</item>
        <item name="allowDividerAbove">false</item>
        <item name="android:layout">@layout/car_ui_preference</item>
</style>

หากเลย์เอาต์ในรูปแบบด้านบนถูกซ้อนทับ ลูกค้าจะต้องตรวจสอบให้แน่ใจว่าเลย์เอาต์ใหม่อย่างน้อยได้ระบุรหัสที่คาดหวังจากคลาส androidx ที่เกี่ยวข้อง นอกจากนี้ยังใช้กับองค์ประกอบอื่นๆ ที่ใช้รูปแบบพื้นฐานนี้ด้วย

การตั้งค่า CarUiDropDown

นี่คือ CarUi ที่เทียบเท่ากับคลาส androidx.preference.DropDownPreference และใช้สไตล์ต่อไปนี้:

<style name="Preference.CarUi.DropDown">
        <item name="android:layout">@layout/car_ui_preference_dropdown</item>
</style>

การตั้งค่าปุ่ม CarUiRadio

คลาสย่อยของ androidx.preference.TwoStatePreference จะขยายโครงร่าง car_ui_radio_button_preference_widget ระหว่างการเริ่มต้น หากโครงร่างนี้ถูกซ้อนทับใน RRO โครงร่างใหม่จะต้องมีองค์ประกอบประเภท android.widget.RadioButton พร้อมด้วย id R.id.radio_button และต้องมีองค์ประกอบและ id อื่น ๆ ที่จำเป็นสำหรับคลาสฐานด้วย

การตั้งค่า CarUiSwitch

นี่คือ CarUi ที่เทียบเท่ากับคลาส androidx.preference.SwitchPreference ข้อแตกต่างคือเมื่อไม่ได้เปิดใช้งานองค์ประกอบนี้ ข้อความอวยพรจะปรากฏขึ้น ข้อความโทสต์สามารถปรับแต่งได้โดยการเรียกเมธอด setMessageToShowWhenDisabledPreferenceClicked ใน Android 10 และ Android 11 องค์ประกอบนี้ใช้สไตล์ต่อไปนี้:

<style name="Preference.CarUi.SwitchPreference">
        <item name="android:widgetLayout">@layout/car_ui_preference_widget_switch</item>
        <item name="android:switchTextOn">@string/car_ui_preference_switch_on</item>
        <item name="android:switchTextOff">@string/car_ui_preference_switch_off</item>
</style>

CarUiTwoActionการตั้งค่า

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

<declare-styleable name="CarUiTwoActionPreference">
        <!-- Determines if the secondary action is initially shown -->
        <attr name="actionShown" format="boolean"/>
</declare-styleable>

องค์ประกอบนี้ใช้สไตล์เดียวกันกับคลาสพื้นฐาน และต้องใช้ R.id.action_widget_container และ android.R.id.widget_frame

CarUiDialogFragment

คลาสนี้ยืม มา จาก androidx.preference.PreferenceDialogFragmentCompat พร้อมด้วยส่วนเพิ่มเติมบางอย่างสำหรับ CarUi โดยเฉพาะ ลูกค้าควรใช้คลาสย่อยของคลาสนี้เพื่อนำเสนอแพลตฟอร์มที่มีธีม AlertDialog

PreferenceDialogFragment

คลาสย่อยโดยตรงของ CarUiDialogFragment ลูกค้าควรซับคลาสคลาสนี้เพื่อนำเสนอแพลตฟอร์มที่มีธีม AlertDialog

CarUiEditTextการตั้งค่า

นี่คือ CarUi ที่เทียบเท่ากับคลาส androidx.preference.EditTextPreference :

<style name="Preference.CarUi.DialogPreference.EditTextPreference">
        <item name="android:dialogLayout">@layout/car_ui_preference_dialog_edittext</item>
</style>

หากเค้าโครงในรูปแบบด้านบนถูกซ้อนทับ ลูกค้าจะต้องตรวจสอบให้แน่ใจว่าเค้าโครงใหม่มีรหัสที่คาดหวังโดยคลาส androidx.preference.EditTextPreference

แก้ไข TextPreferenceDialogFragment

คลาสย่อยโดยตรงของ PreferenceDialogFragment นอกจากนี้ CarUi เทียบเท่ากับคลาส androidx.preference.PreferenceDialogFragments ลูกค้าควรใช้คลาสนี้เพื่อนำเสนอแพลตฟอร์มที่มีธีม AlertDialog

CarUiSeekBarDialogการตั้งค่า

การใช้งานคลาส androidx.preference.DialogPreference ซึ่งมีฟังก์ชัน SeekBar :

<style name="Preference.CarUi.SeekBarPreference">
        <item name="android:layout">@layout/car_ui_preference_widget_seekbar</item>
        <item name="adjustable">true</item>
        <item name="showSeekBarValue">false</item>
</style>

SeekBarPreferenceDialogFragment

ส่วนที่ให้เค้าโครงด้วย SeekBar ในกล่องโต้ตอบ

CarUiListPreference

CarUi เทียบเท่ากับคลาส androidx.preference.ListPreference

ListPreferenceFragment

แฟรกเมนต์ที่ให้เลย์เอาต์ที่มี androidx.preference.ListPreference อยู่ในนั้น

CarUiMultiSelectListPreference

CarUi เทียบเท่ากับคลาส androidx.preference.Preference

MultiSelectListPreferenceFragment

แฟรกเมนต์ที่ให้เลย์เอาต์ที่มี com.android.car.ui.CarUiMultiSelectListPreference อยู่ในนั้น