Opcje dostosowywania CarUiListItem

Ta strona zawiera szczegółowe informacje o opcjach dostosowywania elementów listy CarUiListItem.

Zaakceptowana metoda wyświetlania listy elementów za pomocą biblioteki Car UI polega na użyciu obiektu CarUiRecyclerView w połączeniu z obiektami CarUiListItemAdapter i CarUiListItem. Personalizacja CarUiRecyclerView jest omawiana w artykule caruirecyclerview.

Wymagania wstępne

Poniższy materiał zakłada, że rozumiesz nakładki zasobów w czasie wykonywania (RRO) opisane w artykule Dostosowywanie aplikacji.

Informacje o CarUiListItem

Elementy listy mogą należeć do jednego z 2 ogólnych typów: nagłówek lub treści. Każdy z nich jest opisany poniżej.

CarUiListItemAdapter łączy obiekty typu CarUiHeaderListItem z widokiem utworzonym na podstawie pliku układu car_ui_header_list_item, który zawiera te widoki:

Wyświetlenia
title Title TextView
body Body TextView

Na przykład element listy nagłówków poniżej jest skonfigurowany tak, aby wyświetlać tytuł i tekst główny:

Treść

CarUiListItemAdapter łączy obiekty typu CarUiHeaderListItem z widokiem utworzonym na podstawie pliku układu car_ui_list_item. Ten plik zawiera te widoki:

Wyświetlenia
icon_container Kontener na ikonę główną
title Title TextView
body Body TextView
action_container Kontener widoku działania

Na przykład element listy treści poniżej został skonfigurowany tak, aby wyświetlać ikonę i przełącznik:

Ikony

W zależności od typu ikony skonfigurowanej dla elementu listy do ikony głównej jest używany jeden z tych widoków:

Wyświetlenia
icon Standardowa ikona ImageView
content_icon Ikona treści ImageView
avatar_icon Ikona awatara ImageView

Elementy działania

W zależności od typu działania elementu na liście wyświetlany jest co najwyżej jeden z tych widoków elementu działania:

Wyświetlenia
switch_widget Switch
checkbox_widget CheckBox
radio_button_widget RadioButton
supplemental_icon ImageView

Dostosowywanie tekstu

Styl tekstu w elementach nagłówka i listy treści jest kontrolowany przez style wyglądu tekstu zdefiniowane w bibliotece interfejsu Car UI. Aby zastąpić styl tekstu elementów listy, zastąp go odpowiednimi stylami wymienionymi poniżej.

Aby dostosować style nagłówka:

Style nagłówka
Tekst tytułu @style/TextAppearance.CarUi.ListItem
Tekst główny @style/TextAppearance.CarUi.ListItem.Body

Aby dostosować style treści:

Style treści
Tekst tytułu @style/TextAppearance.CarUi.ListItem.Header
Tekst główny @style/TextAppearance.CarUi.ListItem.Body

Dostosowywanie ikon

Elementy listy treści mogą zawierać zarówno ikonę główną, jak i dodatkową.

Ikona główna

Chociaż w kontenerze ikony w układzie elementu listy treści zdefiniowane są 3 obiekty ImageView, wyświetlana jest maksymalnie 1 ikona na podstawie określonego typu ikony elementu listy. Podczas wiązania elementu funkcja CarUiListItemAdapter ustawia odpowiednią widoczność dla obiektów ikony ImageView.

Szerokość i wysokość ikon są kontrolowane przez wartości wymiarów, które można nakładać, aby kontrolować rozmiar. Poniżej podajemy wartości wymiarów, które określają szerokość i wysokość różnych typów ikon.

Ikona standardowa

Domyślnie standardowe ikony mają równą wysokość i szerokość.

Ikona standardowa
Szerokość car_ui_list_item_icon_size
Wzrost car_ui_list_item_icon_size

Ikona treści

Ikona treści
Szerokość car_ui_list_item_content_icon_width
Wzrost car_ui_list_item_content_icon_height

Ikona awatara

Domyślnie ikony główne są wyśrodkowane w widoku kontenera ikony, którego szerokość jest zdefiniowana przez wartość wymiaru car_ui_list_item_icon_container_width.

Ikona awatara
Szerokość car_ui_list_item_content_icon_width
Wzrost car_ui_list_item_content_icon_height

Ikona dodatkowa

Ikona dodatkowa jest wyśrodkowana w widoku kontenera z działaniem. Zarówno szerokość, jak i wysokość ikony dodatkowej są zdefiniowane przez wartość wymiaru car_ui_list_item_supplemental_icon_size. Nakładanie tego wymiaru na wartość, aby zmienić rozmiar ikony dodatkowej.