控制栏
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
如未另行说明，那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可，并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情，请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC)：2025-07-25。
[null,null,["最后更新时间 (UTC)：2025-07-25。"],[[["\u003cp\u003eThe control bar offers view-specific controls, displaying up to 5 initially and up to 5 more when expanded via an overflow button.\u003c/p\u003e\n"],["\u003cp\u003eIt's commonly used in media apps for playback control (Play/Pause, Previous, Next) and custom actions.\u003c/p\u003e\n"],["\u003cp\u003eControl bar adapts to different screen sizes, with layouts optimized for extra-wide, wide, and standard screens.\u003c/p\u003e\n"],["\u003cp\u003eVisual styles include color palettes for day/night modes and specific sizing for the bar and icons.\u003c/p\u003e\n"],["\u003cp\u003eExamples demonstrate control bar usage in playback and media queue views, showcasing its expanding/contracting functionality.\u003c/p\u003e\n"]]],[],null,["# Control bar\n\n\u003cbr /\u003e\n\nThe control bar provides controls associated with a particular view. It displays up to 5 controls in its unexpanded version, and up to 5 additional controls when expanded.\n\nIn media apps, the control bar is used in the playback view for Play/Pause, Previous, Next, and other controls, including those for custom third-party actions. \n[Minimized control bar component\nThe minimized control bar provides a minimal set of controls available across multiple views](/cars/design/automotive-os/components/minimized-control-bar)\n\n*** ** * ** ***\n\nAnatomy\n-------\n\nThe control bar has two formats: unexpanded and expanded. The unexpanded version can include up to 5 controls. In media apps,, one of these is Play/Pause.\n\nWhen expanded, the control bar can include up to 5 additional controls in a second row. Users can select the overflow button to expand or collapse the control bar.\n1. Control bar portion visible before expansion \n2. Expanded portion of action bar \n3. One of the controls \n4. Overflow button (expands and collapses control bar)\n\n*** ** * ** ***\n\nSpecs\n-----\n\n[Layout labels\nDefinitions of E, M, KL, P, Flex](/cars/design/intro-terms#layout_labels)\n\n### Control bar\n\n### Expanded control bar\n\n### Placement of 1--4 controls on control bar with anchored center control\n\nAn anchored center control is a control with a preferred placement in the center of the control bar, such as a music play/pause button.\n\n### Placement of 1--4 controls on control bar with no anchored control\n\n### Placement of 6--9 controls on control bar\n\n*** ** * ** ***\n\nScaling layouts\n---------------\n\nThese reference layouts show how to adapt the control bar to accommodate screens of various widths and heights. (Width and height categories are defined in the [Layout](/cars/design/automotive-os/design-system/layout) section.) Note that all pixel values are in rendered pixels, before any down-sampling or up-sampling occurs. \n[Layout\nMargins, keylines, and padding for various screen sizes](/cars/design/automotive-os/design-system/layout) \n[Layout labels\nDefinitions of E, M, KL, P, Flex](/cars/design/intro-terms#layout_labels)\n\n### Extra-wide screens with more than 1028dp between margins\n\nWhen the width between margins is greater than the maximum width of the control bar (1028dp), center the control bar horizontally. The control bar won't extend all the way to the margins.\n\n### Extra-wide screens with less than 1028dp between margins\n\n### Wide screens\n\n### Standard-width screens\n\nOn screens of standard width, center the control bar horizontally. The control bar will extend into the margins. On a standard width screen of exactly 690 dp, as in this example, use side padding of P5 between the edges of the control bar and the edges of the screen.\n\n### Short screens\n\n### Control bar expanded on screens shorter than 1000dp\n\n### Control bar expanded on short screens\n\n### Control bar expanded on screens taller than 1000dp\n\n*** ** * ** ***\n\nStyles\n------\n\n[Color guidelines\nPalettes, elevation and opacity values, and more](/cars/design/automotive-os/design-system/color)\n\n### Color\n\n| Element | Color(day mode) | Color (night mode) |\n|-------------------|-----------------|--------------------|\n| Primary icons | White | White @ 88% |\n| Full-screen scrim | Black @ 78% | Black @ 84% |\n| Gradient scrim | TBD | TBD |\n\n### Sizing\n\n| Element | Size (dp) |\n|--------------|------------------------------------------------------|\n| Control bar | 96 (short screens) / 128 (standard height and above) |\n| Primary icon | 44 |\n\n*** ** * ** ***\n\nExamples\n--------\n\nControl bar in playback view Expanded control bar in playback view \nControl bar in media queue Expanded control bar in media queue \nControl bar in media queue Expanded control bar in media queue\nControl bar expanding and contracting as a user taps the overflow button"]]
