应用栏和标题
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
如未另行说明，那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可，并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情，请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC)：2025-07-25。
[null,null,["最后更新时间 (UTC)：2025-07-25。"],[[["\u003cp\u003eThe app bar & header component, implemented as "toolbar" in the Car UI Library, sits at the top of the app and can be customized to display branding, navigation, and app controls.\u003c/p\u003e\n"],["\u003cp\u003eIt can be configured as an app header, primarily displaying a screen title and back arrow, or as an app bar, which can include icons, tabs, and buttons for navigation and controls.\u003c/p\u003e\n"],["\u003cp\u003eOEMs can customize the app bar & header's visual appearance using runtime overlays to reflect their brand, modifying elements like icons, fonts, and button styles.\u003c/p\u003e\n"],["\u003cp\u003eBoth app header and app bar can include app controls such as in-app search, settings, and other relevant functions for easy access.\u003c/p\u003e\n"]]],[],null,["# App bar & header\n\n\u003cbr /\u003e\n\nThe app bar \\& header component is a dedicated bar at the top of the app canvas that can be customized to display important app-related functions, such as branding, top-level navigation, and access to app controls.\n\nUse consistent app bar \\& header layouts to place key controls, such as in-app search, in a standard location throughout the UI.\n| **Note:** The app bar \\& header component is part of the Car UI Library, where it is implemented as \"toolbar.\" To use the app bar \\& header, you must [add the Car UI Library as a dependency](https://source.android.com/devices/automotive/hmi/car_ui/integrate) to your app.\n\n*** ** * ** ***\n\nAnatomy\n-------\n\nThe app bar \\& header can include a variety of elements. It can be configured in either of these ways:\n\n- **App header:** When configured as an app header, the component contains space for optional text, with minimal use of icons and buttons. Typically, it includes a screen title and back arrow.\n- **App bar:** When configured as an app bar, it can include icons, [tabs](/cars/design/automotive-os/components/tabs), and [buttons](/cars/design/automotive-os/components/buttons). Typical elements include an app icon and navigational options.\n\nEither of these versions may also include app controls, such as in-app search and settings.\nTwo versions of an app header (top and middle) and one version of an app bar (bottom), featuring the following elements: \n1. Back arrow \n2. Screen title \n3. Button \n4. App controls \n5. App icon \n6. Primary navigation (tabs)\n\n*** ** * ** ***\n\nSpecs -- App bar\n----------------\n\n### App bar with primary navigation -- center aligned\n\n### App bar with primary navigation -- left aligned\n\n### App bar with primary navigation -- collapsed (drawer instead of tabs)\n\n*** ** * ** ***\n\nSpecs -- App header\n-------------------\n\n### App header with centered title\n\n### App header with single app control\n\n### App header with multiple app controls\n\n### App header with single button\n\n### App header with multiple buttons\n\n### App header with text overflow\n\n### App header with standalone tab bar\n\n*** ** * ** ***\n\nCustomization\n-------------\n\nOEMs can reflect their brand by modifying the visual appearance of the app bar \\& header. Modifications might include:\n\n- Custom icons\n- Custom fonts\n- Setting the appearance of active, inactive, and disabled buttons\n- Setting button dimensions and placements\n\n| **Note:** To customize the app bar \\& header, which is an implementation of the Car UI library toolbar, OEMs must use runtime overlays. Runtime overlays are explained in the [Car UI Library Integration Guide](https://source.android.com/devices/automotive/hmi/car_ui).\n\n[Design system](/cars/design/automotive-os/design-system/overview) provides guidance for customizing components using layout, color, typography, and sizing.\n\n*** ** * ** ***\n\nExamples\n--------\n\nApp header in sign-in App header in playback \nApp bar App bar when content is scrolled"]]
