Halaman ini merinci opsi penyesuaian untuk item daftar CarUiListItem .
Paradigma yang diterima dalam menggunakan pustaka Car UI untuk menampilkan daftar item adalah dengan menggunakan CarUiRecyclerView bersama dengan objek CarUiListItemAdapter dan CarUiListItem . Kustomisasi CarUiRecyclerView tercakup dalam caruirecyclerview .
Prasyarat
Konten berikut mengasumsikan pemahaman tentang hamparan sumber daya waktu proses (RRO) yang dijelaskan dalam Menyesuaikan aplikasi .
Tentang CarUiListItem
Item daftar dapat berupa salah satu dari dua tipe tingkat tinggi, header atau content . Masing-masing dijelaskan di bawah ini.
Tajuk
CarUiListItemAdapter mengikat objek bertipe CarUiHeaderListItem ke tampilan yang diperluas dari file tata letak car_ui_header_list_item , yang berisi tampilan berikut:
| Tampilan | |
|---|---|
title | Judul TextView |
body | Tampilan Teks Tubuh |
Misalnya, item daftar header di bawah dikonfigurasi untuk menampilkan judul dan teks isi:
Isi
CarUiListItemAdapter mengikat objek bertipe CarUiHeaderListItem ke tampilan yang diperluas dari file tata letak car_ui_list_item . File ini berisi tampilan berikut:
| Tampilan | |
|---|---|
icon_container | Wadah untuk ikon utama |
title | Judul TextView |
body | Tampilan Teks Tubuh |
action_container | Wadah untuk tampilan tindakan |
Misalnya, item daftar konten di bawah dikonfigurasi untuk menampilkan ikon dan tombol:
Ikon
Bergantung pada tipe ikon yang dikonfigurasi untuk item daftar, salah satu dari tiga tampilan berikut digunakan untuk ikon utama:
| Tampilan | |
|---|---|
icon | Ikon standar ImageView |
content_icon | Ikon konten ImageView |
avatar_icon | Ikon Avatar Tampilan Gambar |
Elemen tindakan
Paling banyak, salah satu tampilan elemen tindakan berikut ini ditampilkan, berdasarkan jenis tindakan untuk item daftar:
| Tampilan | |
|---|---|
switch_widget | Switch |
checkbox_widget | CheckBox |
radio_button_widget | RadioButton |
supplemental_icon | ImageView |
Sesuaikan teks
Penataan gaya teks di header dan item daftar konten dikontrol oleh gaya tampilan teks yang ditentukan di pustaka UI Mobil. Untuk mengganti gaya teks item daftar, ganti gaya terkait yang tercantum di bawah.
Untuk menyesuaikan gaya tajuk :
| Gaya tajuk | |
|---|---|
| Teks judul | @style/TextAppearance.CarUi.ListItem |
| Teks isi | @style/TextAppearance.CarUi.ListItem.Body |
Untuk menyesuaikan gaya konten :
| Gaya konten | |
|---|---|
| Teks judul | @style/TextAppearance.CarUi.ListItem.Header |
| Teks isi | @style/TextAppearance.CarUi.ListItem.Body |
Sesuaikan ikon
Item daftar konten dapat berisi ikon utama dan tambahan.
Ikon utama
Meskipun ada tiga objek ImageView yang ditentukan dalam wadah ikon dalam tata letak item daftar konten, paling banyak satu ikon ditampilkan berdasarkan jenis ikon item daftar yang ditentukan. Pada waktu pengikatan item, CarUiListItemAdapter menetapkan visibilitas yang sesuai untuk objek ikon ImageView.
Lebar dan tinggi ikon dikontrol oleh nilai dimensi yang dapat dihamparkan untuk mengontrol ukurannya. Nilai dimensi yang menentukan lebar dan tinggi untuk berbagai tipe ikon tercantum di bawah.
Ikon standar
Secara default, ikon standar memiliki tinggi dan lebar yang sama.
| Ikon standar | |
|---|---|
| Lebar | car_ui_list_item_icon_size |
| Tinggi | car_ui_list_item_icon_size |
Ikon konten
| Ikon konten | |
|---|---|
| Lebar | car_ui_list_item_content_icon_width |
| Tinggi | car_ui_list_item_content_icon_height |
ikon avatar
Secara default, ikon utama dipusatkan dalam tampilan wadah ikon, yang memiliki lebar yang ditentukan oleh nilai dimensi car_ui_list_item_icon_container_width .
| ikon avatar | |
|---|---|
| Lebar | car_ui_list_item_content_icon_width |
| Tinggi | car_ui_list_item_content_icon_height |
Ikon tambahan
Ikon tambahan berada di tengah tampilan kontainer tindakan. Lebar dan tinggi ikon tambahan ditentukan oleh nilai dimensi car_ui_list_item_supplemental_icon_size . Hamparkan nilai dimensi ini untuk mengubah ukuran ikon tambahan.