ปรับแต่ง CarUiRecyclerView

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

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

หน้านี้ถือว่ามีความรู้เกี่ยวกับ APK เป้าหมายการซ้อนทับทรัพยากรรันไทม์ (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 โดยรวมแล้ว มุมมองทั้งสี่นี้ถูกกำหนดไว้ภายในมุมมอง:

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>

ตัวอย่าง

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

1. ภาพซ้อนทับ 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>
   

2. หากต้องการกำหนดทรัพยากรที่จะซ้อนทับโดย 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>
   

3. หากต้องอัปเดตการเลื่อนขึ้น ลง หรือนิ้วหัวแม่มือ ก็ควรซ้อนทับด้วยเช่นกัน
4. หากมีการใช้ทรัพยากรใหม่ในแพ็คเกจ RRO ที่ไม่มีอยู่แล้ว ควรกำหนดทรัพยากรเหล่านี้ใน RRO APK ที่คุณสร้างด้วย