Na tej stronie szczegółowo opisano opcje dostosowywania elementów listy CarUiListItem
.
Przyjętym paradygmatem używania biblioteki Car UI do wyświetlania listy elementów jest użycie CarUiRecyclerView
w połączeniu z obiektami CarUiListItemAdapter
i CarUiListItem
. Dostosowywanie CarUiRecyclerView
jest omówione w caruirecyclerview
.
Warunki wstępne
Poniższa treść zakłada zrozumienie nakładek zasobów środowiska wykonawczego (RRO) opisanych w sekcji Dostosowywanie aplikacji .
Informacje o CarUiListItem
Elementy listy mogą należeć do jednego z dwóch typów wysokiego poziomu: nagłówka lub treści . Każdy z nich został opisany poniżej.
nagłówek
CarUiListItemAdapter
wiąże obiekty typu CarUiHeaderListItem
z widokiem powiększonym z pliku układu car_ui_header_list_item
, który zawiera następujące widoki:
Wyświetlenia | |
---|---|
title | Tytuł TextView |
body | Widok tekstu treści |
Na przykład poniższy element listy nagłówków jest skonfigurowany tak, aby wyświetlał tytuł i treść:
Treść
CarUiListItemAdapter
wiąże obiekty typu CarUiHeaderListItem
z widokiem powiększonym z pliku układu car_ui_list_item
. Ten plik zawiera następujące widoki:
Wyświetlenia | |
---|---|
icon_container | Kontener na ikonę główną |
title | Tytuł TextView |
body | Widok tekstu treści |
action_container | Kontener dla widoku akcji |
Na przykład poniższy element listy treści został skonfigurowany tak, aby wyświetlał ikonę i przełącznik:
Ikony
W zależności od typu ikony skonfigurowanego dla elementu listy, dla ikony podstawowej używany jest jeden z trzech widoków:
Wyświetlenia | |
---|---|
icon | Standardowa ikona ImageView |
content_icon | Ikona treści ImageView |
avatar_icon | Ikona awatara ImageView |
Elementy akcji
Wyświetlany jest co najwyżej jeden z następujących widoków elementów akcji, w zależności od typu akcji dla elementu listy:
Wyświetlenia | |
---|---|
switch_widget | Switch |
checkbox_widget | CheckBox |
radio_button_widget | RadioButton |
supplemental_icon | ImageView |
Dostosuj tekst
Stylami tekstu zarówno w nagłówku, jak i elementach listy treści sterują style wyglądu tekstu zdefiniowane w bibliotece interfejsu użytkownika samochodu. Aby zastąpić styl tekstu elementów listy, zastąp odpowiednie style wymienione poniżej.
Aby dostosować style nagłówka :
Style nagłówków | |
---|---|
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 |
Dostosuj ikony
Elementy listy zawartości mogą zawierać zarówno ikonę podstawową , jak i dodatkową.
Ikona podstawowa
Mimo że w kontenerze ikon w układzie elementu listy zawartości zdefiniowano trzy obiekty ImageView, w zależności od typu ikony określonego elementu listy jest wyświetlana najwyżej jedna ikona. W momencie wiązania elementu CarUiListItemAdapter
ustawia odpowiednią widoczność dla obiektów ImageView ikony.
Szerokość i wysokość ikon są kontrolowane przez wartości wymiarów, które można nakładać w celu kontrolowania rozmiaru. Wartości wymiarów określające szerokość i wysokość różnych typów ikon są wymienione poniżej.
Standardowa ikona
Domyślnie standardowe ikony mają jednakową wysokość i szerokość.
Standardowa ikona | |
---|---|
Szerokość | car_ui_list_item_icon_size |
Wysokość | car_ui_list_item_icon_size |
Ikona treści
Ikona treści | |
---|---|
Szerokość | car_ui_list_item_content_icon_width |
Wysokość | car_ui_list_item_content_icon_height |
Ikona awatara
Domyślnie ikony główne są wyśrodkowane w widoku kontenera ikon, 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 |
Wysokość | car_ui_list_item_content_icon_height |
Dodatkowa ikona
Dodatkowa ikona jest wyśrodkowana w widoku kontenera akcji. Zarówno szerokość, jak i wysokość ikony dodatkowej są definiowane przez wartość wymiaru car_ui_list_item_supplemental_icon_size
. Nałóż tę wartość wymiaru, aby zmienić rozmiar dodatkowej ikony.