ปรับแต่ง 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 เมื่อช่องโครงข่ายกำหนด เลย์เอาต์ของรายการสินค้าเพื่อให้ OEM ปรับแต่งได้ การปรับแต่งสำหรับ ListItem จะระบุไว้ในการปรับแต่ง ตัวเลือกของ 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 โดยรวมแล้ว มุมมองทั้ง 4 มุมมอง ที่กำหนดไว้ในข้อมูลพร็อพเพอร์ตี้

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

เลย์เอาต์นี้มีอยู่ในคอนเทนเนอร์ 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 ที่คุณสร้าง