媒体控件
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
媒体控件界面对于帮助用户控制正在收听的媒体内容至关重要。使用 5 按钮布局创建媒体控件，以验证是否符合最小点按目标要求。在 225 dp 或更大的屏幕上，您可以添加快捷按钮来执行重要操作（例如播放队列），从而提升价值。
布局部分
媒体控件屏幕的高度是固定的。它由三个垂直部分组成，这些部分具有不同的自适应布局和行为。
- 顶部部分：包含媒体详情
- 中间部分：媒体控件
- 底部部分：可配置的辅助按钮
大屏设备注意事项
媒体的大屏适配仅专注于媒体控件界面。所有其他元素都包含在芯片、按钮和对话框项中，或者包含在列表（大屏行为细分）中。
您可以添加一个重要操作（例如播放队列）的快捷按钮来增加价值。使用溢出菜单可验证无论屏幕尺寸如何，额外功能是否仍然一致且可访问。在 225 dp 分界点之后，底部部分会增加一个按钮插槽，从而使按钮的最大数量在较小屏幕上为 2 个，在较大屏幕上为 3 个。
主要控制
主要控件通常是播放和暂停按钮。在 225 dp 分界点之后，控件的尺寸会从 64dp 扩展到 80dp，从而增加其中所有控件的点按目标。
较小的屏幕（小于 225 dp）
- 进度环 = 64 x 64 dp / 3 dp 笔画
- 按钮 = 54 x 54 dp / 26 图标大小
大屏幕（225 dp 及更大）
- 进度环 = 80 x 80 dp / 4 dp 描边
- 按钮 = 70 x 70 dp / 32 图标大小
为了遵循触摸目标尺寸原则，在 225 dp 分界点之前仅显示双按钮布局，在分界点之后显示三按钮布局。
以下示例展示了不同的按钮配置：
<img 1.2%="" 14 dp="" 18 dp="" 24 dp="" 32 dp="" 44 dp="" 60 dp="" 6 dp="" aligned.""="" alt="" and="" area="" be="" beneath="" bottom="" button="" center="" dots="" entire="" equal="" have="" height.="" high="" icon="" icon,="" main="" margin="" of="" optional="" right="" screen's="" secondary="" should="" square,="" src="/static/wear/images/design/media-1-button-small.png" the="" to="" top="" wide.="" with="" />
采用溢出的 1 按钮布局，屏幕较小 (192 dp)
<img 14 dp="" 18 dp="" 24 dp="" 44 dp="" 48 dp="" 72.5 dp="" aligned.""="" alt="" and="" area="" be="" bottom="" button="" center="" entire="" high="" icon="" icon,="" main="" of="" optional="" right="" secondary="" should="" square,="" src="/static/wear/images/design/media-1-button-large.png" the="" to="" top="" wide.="" with="" />
具有溢出的 1 按钮布局，屏幕较大 (225 dp)
采用溢出的 2 按钮布局，屏幕较小 (192 dp)
具有溢出的 2 按钮布局，屏幕较大 (225 dp)
最多 2 个按钮的布局（带溢出），较小屏幕 (192 dp)
具有溢出的 3 按钮布局，较大屏幕 (225 dp)
跑马灯行为
标题进行了一些更新，以提高可读性和整体体验：
- 在较小屏幕上，顶部边距为 12%；在较大屏幕上，顶部边距为 13.2%。
- 歌曲标题的侧边距为 17.6%
- 在较小屏幕上，艺术家标题边距为 12.5%；在较大屏幕上，艺术家标题边距为 14.5%。
- 艺术家名称会截断，而 8dp 渐变用于滚动歌曲名称。如果存在图标，则歌曲标题与图标之间会额外间隔 8 dp。（该图标不会随歌曲名滚动。）
带有图标
较小屏幕 (192 dp) 上的非滚动（短）歌曲名称
大屏幕 (225 dp) 上的非滚动（短）歌曲标题
小屏幕 (192 dp) 上滚动显示（长）歌曲名称（左对齐）
大屏幕 (225 dp) 上的滚动（长）歌曲名称（左对齐）
小屏幕 (192 dp) 上的滚动（长）歌曲名称（居中对齐）
在大屏幕 (225 dp) 上滚动显示（长）歌曲名称（居中对齐）
不含图标
较小屏幕 (192 dp) 上的非滚动（短）歌曲名称
大屏幕 (225 dp) 上的非滚动（短）歌曲标题
小屏幕 (192 dp) 上的左对齐 / 非滚动（长）歌曲名称
大屏幕 (225 dp) 上左对齐 / 不可滚动（长）的歌曲名称
小屏幕 (192 dp) 上的滚动（长）歌曲名称（居中对齐）
在大屏幕 (225 dp) 上滚动显示（长）歌曲名称（居中对齐）
点按目标
主要控件和底部按钮会利用可用空间最大限度地扩大点按目标。在 Wear OS 设备上，点按目标的最小尺寸为 48 x 48 dp，图标和按钮与点按目标的中心对齐。
主要控制
小屏幕 (192dp)：
- 主控件 = 64 x 64 dp
- 侧边控件 = 64 x 64 dp
大屏设备 (225dp)：
- 主控件 = 80 x 80 dp
- 侧边控件 = 72.5 x 80 dp
底部控件
较小的屏幕 (192 dp)，最多可显示 2 个按钮：
左右两键 = 68 x 60 dp
较大屏幕（225 dp），最多可显示 3 个按钮：
所有按钮 = 58 x 72.5 dp
本页面上的内容和代码示例受内容许可部分所述许可的限制。Java 和 OpenJDK 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC)：2025-08-13。
[[["易于理解","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-08-13。"],[],[],null,["# Media controls\n\nThe media controls screen is essential to help users control the media that\nthey're listening to. Create media controls using a 5-button layout to verify\nthat minimum tap targets are met. On larger screens that are 225 dp or larger,\nyou can add value by including a shortcut button for an important action such as\nplayback queue.\n\nLayout sections\n---------------\n\nThe media controls screen is a fixed height screen. It's made up of three\nvertical sections that have different responsive layouts and behavior.\n\n1. **Top section:** Contains media details\n2. **Middle section:** Media controls\n3. **Bottom section:** Configurable secondary buttons\n\nConsiderations for larger screen\n--------------------------------\n\nThe large screen adaptations for media are solely focused on the media controls\nscreen. All other elements are captured in chip, button, and dialog items or in\nthe lists breakdown of large screen behavior.\n\n### Buttons\n\nYou can add value by including a shortcut button for an important action, such\nas playback queue. Using the overflow menu verifies that the additional\nfunctionality is still consistent and accessible no matter what's the screen\nsize. The bottom section gains an additional slot for a button after the 225 dp\nbreakpoint making the maximum number of buttons 2 on smaller screens and 3 on\nlarger screens.\n\n### Main control\n\nThe main control is usually a play and pause button. After the 225 dp\nbreakpoint, the control scales from 64dp to 80dp, which increases tap targets\nfor all controls within it.\n\nSmaller screen (smaller than 225 dp)\n\n\u003cbr /\u003e\n\n- **Progress ring** = 64 x 64 dp / 3 dp stroke\n- **Button** = 54 x 54 dp / 26 icon size \nLarger screen (225 dp and larger)\n\n\u003cbr /\u003e\n\n- **Progress ring** = 80 x 80 dp / 4 dp stroke\n- **Button** = 70 x 70 dp / 32 icon size\n\n\u003cbr /\u003e\n\nButton configuration\n--------------------\n\nTo follow touch target size principles, show only the 2-button layout before the\n225 dp breakpoint and 3-button layouts past it.\n\nThe following examples show different button configurations: \n\n\u003cbr /\u003e\n\n1 Button Layout with overflow, smaller screen (192 dp)\n\n\u003cbr /\u003e\n\n1 Button Layout with overflow, larger screen (225 dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n2 Button Layout with overflow, smaller screen (192 dp)\n\n\u003cbr /\u003e\n\n2 Button Layout with overflow, larger screen (225 dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n2 Button (max) Layout with overflow, smaller screen (192 dp)\n\n\u003cbr /\u003e\n\n3 Button Layout with overflow, larger screen (225 dp)\n\n\u003cbr /\u003e\n\nMarquee behavior\n----------------\n\nThe header has a number of updates to improve readability and general\nexperience:\n\n- A top margin of 12% on smaller screens and 13.2% on larger screens.\n- Side margins for the song title of 17.6%\n- Artist title margin of 12.5% on smaller screens and 14.5% on larger screens.\n- Artist title truncates, while 8-dp gradients are used for scrolling song titles. If an icon is present, an additional 8 dp gap separates the song title from the icon. (The icon doesn't scroll with the song title.)\n\n### With an icon\n\n\u003cbr /\u003e\n\nNon-scrolling (short) song title on smaller screens (192 dp)\n\n\u003cbr /\u003e\n\nNon-scrolling (short) song title on larger screens (225 dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nScrolling (long) song title (left-aligned) on smaller screens (192 dp)\n\n\u003cbr /\u003e\n\nScrolling (long) song title (left-aligned) on larger screens (225 dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nScrolling (long) song title (center-aligned) on smaller screens (192 dp)\n\n\u003cbr /\u003e\n\nScrolling (long) song title (center-aligned) on larger screens (225 dp)\n\n\u003cbr /\u003e\n\n### Without an icon\n\n\u003cbr /\u003e\n\nNon-scrolling (short) song title on smaller screens (192 dp)\n\n\u003cbr /\u003e\n\nNon-scrolling (short) song title on larger screens (225 dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nLeft aligned / non-scrolling (long) song title on smaller screens (192 dp)\n\n\u003cbr /\u003e\n\nLeft aligned / non-scrolling (long) song title on larger screens (225 dp)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nScrolling (long) song title (center-aligned) on smaller screens (192 dp)\n\n\u003cbr /\u003e\n\nScrolling (long) song title (center-aligned) on larger screens (225 dp)\n\n\u003cbr /\u003e\n\nTap targets\n-----------\n\nMain controls and bottom buttons use the available space to maximize the tap\ntarget. The minimum tap target size is 48 x 48 dp on Wear OS devices, with\nicons and buttons aligned to the center of the tap target.\n\n### Main controls\n\n\u003cbr /\u003e\n\nSmall screen (192dp):\n\n- **Main control** = 64 x 64 dp\n- **Side controls** = 64 x 64 dp \n\nLarge screen (225dp):\n\n- **Main control** = 80 x 80 dp\n- **Side controls** = 72.5 x 80 dp\n\n### Bottom controls\n\n\u003cbr /\u003e\n\nSmaller screens (192 dp) with a maximum of 2 buttons:\n\n**Both buttons** = 68 x 60 dp\n\n\u003cbr /\u003e\n\nLarger screens (225 dp) with a maximum of 3 buttons:\n\n**All buttons** = 58 x 72.5 dp\n\n\u003cbr /\u003e"]]
