[[["易于理解","easyToUnderstand","thumb-up"],["解决了我的问题","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["没有我需要的信息","missingTheInformationINeed","thumb-down"],["太复杂/步骤太多","tooComplicatedTooManySteps","thumb-down"],["内容需要更新","outOfDate","thumb-down"],["翻译问题","translationIssue","thumb-down"],["示例/代码问题","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["最后更新时间 (UTC)：2025-07-27。"],[],[],null,["# Customization options for CarUiListItem\n\nThis page details the customization options for `CarUiListItem` list items.\n\nThe accepted paradigm for using the Car UI library to display a list of items\nis to use a `CarUiRecyclerView` in conjunction with a\n`CarUiListItemAdapter` and `CarUiListItem` objects.\n`CarUiRecyclerView` customization is covered in\n[caruirecyclerview](/docs/automotive/hmi/car_ui/caruirecyclerview).\n\nPrerequisites\n-------------\n\nThe following content presumes an understanding of runtime resource overlays (RRO) described\nin [Customize apps](/docs/automotive/hmi/car_ui/customize#overlay).\n\nAbout CarUiListItem\n-------------------\n\nList items can be one of two high-level types, *header* or *content*. Each is\ndescribed below.\n\n### Header\n\n`CarUiListItemAdapter` binds objects of type `CarUiHeaderListItem`\nto a view inflated from the `car_ui_header_list_item` layout file, which contains\nthese views:\n\n| Views ||\n|---------|----------------|\n| `title` | Title TextView |\n| `body` | Body TextView |\n\nFor example, the header list item below is configured to display a title\n*and* body text:\n\n### Content\n\n`CarUiListItemAdapter` binds objects of type `CarUiHeaderListItem`\nto a view inflated from the `car_ui_list_item` layout file. This file\ncontains these views:\n\n| Views ||\n|--------------------|--------------------------------|\n| `icon_container` | Container for the primary icon |\n| `title` | Title TextView |\n| `body` | Body TextView |\n| `action_container` | Container for the action view |\n\nFor example, the content list item below was configured to display an icon\n*and* a switch:\n\n#### Icons\n\nDepending on the icon type configured for the list item, one of the following three\nviews is used for the primary icon:\n\n| Views ||\n|----------------|-------------------------|\n| `icon` | Standard icon ImageView |\n| `content_icon` | Content icon ImageView |\n| `avatar_icon` | Avatar icon ImageView |\n\n#### Action elements\n\nAt most, one of the following action element views is displayed, based on the\naction type for the list item:\n\n| Views ||\n|-----------------------|-----------------------------------------------------------------------------------|\n| `switch_widget` | [Switch](https://developer.android.com/reference/android/widget/Switch) |\n| `checkbox_widget` | [CheckBox](https://developer.android.com/reference/android/widget/CheckBox) |\n| `radio_button_widget` | [RadioButton](https://developer.android.com/reference/android/widget/RadioButton) |\n| `supplemental_icon` | [ImageView](https://developer.android.com/reference/android/widget/ImageView) |\n\nCustomize text\n--------------\n\nText styling in both header and content list items is controlled by text\nappearances styles defined in the Car UI library. To override the text styling\nof list items, override the corresponding styles listed below.\n\nTo customize *header* styles:\n\n| Header styles ||\n|------------|---------------------------------------------|\n| Title text | `@style/TextAppearance.CarUi.ListItem` |\n| Body text | `@style/TextAppearance.CarUi.ListItem.Body` |\n\nTo customize *content* styles:\n\n| Content styles ||\n|------------|-----------------------------------------------|\n| Title text | `@style/TextAppearance.CarUi.ListItem.Header` |\n| Body text | `@style/TextAppearance.CarUi.ListItem.Body` |\n\nCustomize icons\n---------------\n\nContent list items can contain both a primary *and* a supplemental icon.\n\n### Primary icon\n\nAlthough there are three ImageView objects defined within the icon container\nin the content list item layout, at most one icon is displayed based on the list\nitem's specified icon type. At item bind time, `CarUiListItemAdapter` sets the\nappropriate visibility for the icon ImageView objects.\n\nThe width and height of icons are controlled by dimension values that can be\noverlaid to control the sizing. The dimension values that specify the width and\nheight for the various icon types are listed below.\n\n#### Standard icon\n\nBy default, standard icons have equal height and width.\n\n| Standard icon ||\n|--------|------------------------------|\n| Width | `car_ui_list_item_icon_size` |\n| Height | `car_ui_list_item_icon_size` |\n\n#### Content icon\n\n| Content icon ||\n|--------|----------------------------------------|\n| Width | `car_ui_list_item_content_icon_width` |\n| Height | `car_ui_list_item_content_icon_height` |\n\n#### Avatar icon\n\nBy default, primary icons are centered within the icon container view, which\nhas a width defined by the `car_ui_list_item_icon_container_width`\ndimension value.\n\n| Avatar icon ||\n|--------|----------------------------------------|\n| Width | `car_ui_list_item_content_icon_width` |\n| Height | `car_ui_list_item_content_icon_height` |\n\n| **Note:** The shape of the Avatar icon is clipped to the shape defined in `car_ui_list_item_avatar_icon_outline`.\n\n### Supplemental icon\n\nThe supplemental icon is centered within the action container view. Both the\nwidth and height of the supplemental icon are defined by the\n`car_ui_list_item_supplemental_icon_size` dimension value. Overlay this dimension\nvalue to change the size of the supplemental icon."]]
