CarUiRecyclerView 맞춤설정

이 문서에서는 CarUiRecyclerView 및 스크롤바를 맞춤설정하는 프로세스를 설명합니다.

기본 요건

이 문서는 런타임 리소스 오버레이(RRO) 타겟 APK에 관한 이해를 전제로 합니다. 자세히 알아보려면 앱 맞춤설정을 참고하세요.

CarUiRecyclerView 정보

bools.xml에서 car_ui_scrollbar_enable이 false로 설정되었을 때 CarUiRecyclerView는 스크롤바를 확장하지 않습니다. 즉, androidx.recyclerview만 아래에 정의된 대로 맞춤설정 가능한 스타일로 확장됩니다. car_ui_scrollbar_enable이 true로 설정되었을 때 CarUiRecyclerView는 내부에 설치된 스크롤바로 컨테이너를 확장합니다. 또한 androidx.recyclerview는 나중에 동일한 컨테이너 내에 추가됩니다.

CarUiRecyclerView는 데이터를 표시하기 위해 어떤 어댑터라도 사용할 수 있습니다. 그러나 CarUiListItemAdapter를 사용하는 것이 좋습니다. 이 어댑터에서 chassis lib는 ListItem의 레이아웃을 정의하므로 OEM에서 맞춤설정할 수 있습니다. ListItem의 맞춤설정은 CarUiListItem에 정의되어 있습니다.

기본적으로 car_ui_scrollbar_margin은 스크롤바 뷰의 너비로 사용됩니다. 이 여백은 CarUiRecyclerView의 android:endMargin으로 추가되므로 데이터 시작과 끝 부분에 동일한 여백이 있습니다. 개발자가 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개의 뷰가 정의됩니다.

뷰
Car_ui_scrollbar_page_up 스크롤바의 위로 버튼을 정의합니다.
Car_ui_scrollbar_page_down 스크롤바의 아래로 버튼을 정의합니다.
Car_ui_scrollbar_thumb 높이는 RV(Recycler View)의 목록 항목 수에 따라 동적으로 계산됩니다.
Car_ui_scrollbar_track thumb이 움직일 한계를 정의하는 총 높이입니다.

OEM은 이 레이아웃 파일을 오버레이하여 스크롤바를 맞춤설정해야 합니다. 트랙 뷰는 thumb이 움직일 한계를 정의하므로 신중하게 배치되어야 합니다. thumb 높이는 RV의 목록 항목 및 ViewHolder의 높이에 따라 동적으로 계산됩니다.

이 레이아웃은 car_ui_scrollbar_enable이 true인 경우에만 CarUiRV 컨테이너인 car_ui_recycler_view.xml에 포함됩니다.

그 밖에 스크롤바에 대해 조정할 수 있는 수치는 다음과 같습니다.

  <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. Up, Down 또는 thumb 드로어블을 업데이트해야 한다면 이러한 드로어블도 오버레이해야 합니다.
  4. 아직 존재하지 않는 새 리소스가 RRO 패키지에서 사용되는 경우 이러한 리소스는 개발자가 생성하는 RRO APK에도 정의되어야 합니다.