หน้านี้อธิบายกระบวนการปรับแต่ง 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
โดยรวมแล้ว มุมมองทั้งสี่นี้ถูกกำหนดไว้ภายในมุมมอง:
จำนวนการดู | |
---|---|
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>
- หากต้องอัปเดตการเลื่อนขึ้น ลง หรือนิ้วหัวแม่มือ ก็ควรซ้อนทับด้วยเช่นกัน
- หากมีการใช้ทรัพยากรใหม่ในแพ็คเกจ RRO ที่ไม่มีอยู่แล้ว ควรกำหนดทรัพยากรเหล่านี้ใน RRO APK ที่คุณสร้างด้วย