หน้านี้ได้รับการแปลโดย Cloud Translation API

การปรับแต่ง CarUiRecyclerView

บทความนี้อธิบายขั้นตอนการปรับแต่ง CarUiRecyclerView และแถบเลื่อน

ข้อกำหนดเบื้องต้น

บทความนี้สันนิษฐานว่ามีความรู้เกี่ยวกับ APK เป้าหมาย Runtime Resource Overlay (RRO) หากต้องการเรียนรู้เพิ่มเติมโปรดดูการ ปรับแต่งแอป

เกี่ยวกับ CarUiRecyclerView

เมื่อตั้งค่า car_ui_scrollbar_enable เป็น false ใน bools.xml CarUiRecyclerView จะไม่ขยายแถบเลื่อน ที่กล่าวว่าเฉพาะ androidx.recyclerview เท่านั้นที่สูงเกินจริงด้วยสไตล์ที่ปรับแต่งได้ตามที่กำหนดไว้ด้านล่าง เมื่อตั้งค่า car_ui_scrollbar_enable เป็น true CarUiRecyclerView จะขยายคอนเทนเนอร์ด้วยแถบเลื่อนที่ติดตั้งอยู่ภายใน androidx.recyclerview ภายหลังจะถูกเพิ่มเข้าไปในคอนเทนเนอร์เดียวกัน

CarUiRecyclerView สามารถใช้อะแดปเตอร์ใดก็ได้เพื่อแสดงข้อมูล แต่คำแนะนำคือให้ใช้ CarUiListItemAdapter โดยที่แชสซี lib กำหนดโครงร่างสำหรับ listItems และด้วยเหตุนี้ OEM จึงสามารถปรับแต่งได้ การปรับแต่งสำหรับ ListItems ถูกกำหนดไว้ใน CarUiListItem

โดยค่าเริ่มต้น car_ui_scrollbar_margin จะใช้เป็นความกว้างของมุมมองแถบเลื่อน ขอบนี้ยังเพิ่มเป็น android:endMargin ของ CarUiRecyclerView ดังนั้นจึงมีระยะขอบเท่ากันที่จุดเริ่มต้นและจุดสิ้นสุดของข้อมูล หากนักพัฒนาใช้ enableDivider=true แล้ว OEM จะสามารถควบคุมวิธีการแสดงตัวแบ่งได้ ขนาดที่สามารถปรับได้สำหรับ CarUiRecyclerView ได้แก่ :

  <dimen name="car_ui_recyclerview_divider_height">0dp</dimen>
  <dimen name="car_ui_recyclerview_divider_start_margin">0dp</dimen>
  <dimen name="car_ui_recyclerview_divider_end_margin">0dp</dimen>
  <dimen name="car_ui_recyclerview_divider_top_margin">0dp</dimen>
  <dimen name="car_ui_recyclerview_divider_bottom_margin">0dp</dimen>

แถบเลื่อน

ไฟล์เลย์เอาต์สำหรับแถบเลื่อน CarUiRV ถูกกำหนดใน car_ui_recyclerview_scrollbar.xml โดยรวมแล้วมุมมองทั้งสี่นี้ถูกกำหนดไว้ภายในมุมมอง:

มุมมอง
`Car_ui_scrollbar_page_up`	กำหนดปุ่มขึ้นของแถบเลื่อน
`Car_ui_scrollbar_page_down`	กำหนดปุ่มลงของแถบเลื่อน
`Car_ui_scrollbar_thumb`	ความสูงจะคำนวณแบบไดนามิกขึ้นอยู่กับจำนวนรายการใน Recycler View (RV)
`Car_ui_scrollbar_track`	ความสูงทั้งหมดที่กำหนดขอบเขตที่นิ้วหัวแม่มือจะขยับ

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

รูปแบบนี้จะรวมอยู่ใน CarUiRV ภาชนะ car_ui_recycler_view.xml เฉพาะในกรณีที่ car_ui_scrollbar_enable เป็น true

มิติข้อมูลอื่น ๆ ที่สามารถปรับเปลี่ยนสำหรับแถบเลื่อน ได้แก่ :

  <dimen name="car_ui_scrollbar_container_width">@dimen/car_ui_margin</dimen>
  <dimen name="car_ui_scrollbar_button_size">@dimen/car_ui_touch_target_width</dimen>
  <dimen name="car_ui_scrollbar_thumb_width">7dp</dimen>
  <dimen name="car_ui_scrollbar_separator_margin">16dp</dimen>
  <dimen name="car_ui_scrollbar_margin">@dimen/car_ui_margin</dimen>
  <dimen name="car_ui_scrollbar_thumb_radius">100dp</dimen>

  <item name="car_ui_button_disabled_alpha" format="float" type="dimen">0.2</item>
  <item name="car_ui_scrollbar_milliseconds_per_inch" format="float" type="dimen">150.0</item>
  <item name="car_ui_scrollbar_deceleration_times_divisor" format="float" type="dimen">0.45</item>
  <item name="car_ui_scrollbar_decelerate_interpolator_factor" format="float" type="dimen">1.8</item>

  <dimen name="car_ui_scrollbar_padding_start">0dp</dimen>
  <dimen name="car_ui_scrollbar_padding_end">0dp</dimen>

ตัวอย่าง

ตัวอย่างเช่นในการนำทั้งลูกศรขึ้นและลงพร้อมกันที่ด้านล่างของหน้าจอ:

ภาพซ้อนทับ car_ui_recyclerview_scrollbar.xml :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="@dimen/car_ui_margin"
    android:layout_height="match_parent"
    android:id="@+id/car_ui_scroll_bar">

    <!-- View height is dynamically calculated during layout. -->
    <View
        android:id="@+id/car_ui_scrollbar_thumb"
        android:layout_width="7dp"
        android:layout_height="20dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/car_ui_recyclerview_scrollbar_thumb"/>

    <View
        android:id="@+id/car_ui_scrollbar_track"
        android:layout_width="10dp"
        android:layout_height="match_parent"
        android:layout_marginTop="10dp"
        android:layout_centerHorizontal="true"
        android:layout_above="@+id/car_ui_scrollbar_page_up"/>

    <ImageView
        android:id="@+id/car_ui_scrollbar_page_up"
        android:layout_width="76dp"
        android:layout_height="76dp"
        android:focusable="false"
        android:hapticFeedbackEnabled="false"
        android:src="@drawable/car_ui_recyclerview_ic_up"
        android:scaleType="centerInside"
        android:layout_centerHorizontal="true"
        android:layout_above="@+id/car_ui_scrollbar_page_down"/>

    <ImageView
        android:id="@+id/car_ui_scrollbar_page_down"
        android:layout_width="76dp"
        android:layout_height="76dp"
        android:focusable="false"
        android:hapticFeedbackEnabled="false"
        android:src="@drawable/car_ui_recyclerview_ic_down"
        android:scaleType="centerInside"
        android:layout_centerHorizontal="true"
      android:layout_alignParentBottom="true"/>
</RelativeLayout>

ในการกำหนดรีซอร์สที่จะซ้อนทับโดย RRO ให้เพิ่ม Overlays.xml :

<overlay>
    <item target="id/car_ui_scroll_bar" value="@id/car_ui_scroll_bar"/>
    <item target="id/car_ui_scrollbar_thumb" value="@id/car_ui_scrollbar_thumb"/>
    <item target="id/car_ui_scrollbar_track" value="@id/car_ui_scrollbar_track"/>
    <item target="id/car_ui_scrollbar_page_up" value="@id/car_ui_scrollbar_page_up"/>
    <item target="id/car_ui_scrollbar_page_down" value="@id/car_ui_scrollbar_page_down"/>
    <item target="layout/car_ui_recyclerview_scrollbar" value="@layout/car_ui_recyclerview_scrollbar"/>
</overlay>

หากต้องอัปเดต Up, Down หรือ Thumb Drawable ก็ควรวางทับด้วย
หากมีการใช้ทรัพยากรใหม่ในแพ็คเกจ RRO ที่ไม่มีอยู่แล้วทรัพยากรเหล่านี้ควรถูกกำหนดไว้ใน RRO APK ที่คุณสร้างด้วย