Android 深度实践

Appearance

按钮 (Buttons) ​

源：Buttons

按钮允许用户通过单击来执行操作并做出选择。

概览

目录

设计和 API 文档 ​

使用按钮 ​

在使用 Material 按钮之前，您需要在应用中添加 Material Components for Android 库的依赖。

注意： 当使用 Theme.Material3.* 主题时，<Button> 会通过 MaterialComponentsViewInflater 自动充气为 <com.google.android.material.button.MaterialButton>。

辅助功能 ​

按钮支持辅助功能标签，可被 TalkBack 等屏幕阅读器朗读。按钮中呈现的文本会自动提供给辅助功能服务，通常不需要额外的 contentDescription。

按钮类型 ​

共有五种常见的按钮类型：1. Elevated (悬浮), 2. Filled (填充), 3. Filled tonal (色调填充), 4. Outlined (轮廓), 5. Text (文本)。

此外，还有使用分段容器或图标的 Toggle button (切换按钮)。

按钮类型 - elevated, filled, filled tonal, outlined 和 text

Elevated button ​

Elevated buttons 本质上是带有阴影的轮廓按钮。为了防止阴影过度堆叠，仅在绝对必要时使用它们，例如当按钮需要与有图案的背景进行视觉分离时。

示例 ​

xml
<Button
    style="@style/Widget.Material3.Button.ElevatedButton"
    android:id="@+id/elevatedButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Elevated button"
/>
kotlin
elevatedButton.setOnClickListener {
    // 响应按钮点击
}

添加图标 ​

xml
<Button
    style="@style/Widget.Material3.Button.ElevatedButton.Icon"
    ...
    app:icon="@drawable/ic_add_24dp"
/>

带图标的悬浮按钮

Filled button ​

Filled button 的对比背景色使其成为除 FAB 之外最显著的按钮。它通常用于流程中的最终操作或关键操作。

注意： 如果未设置样式，填充按钮是默认样式。

示例 ​

xml
<Button
    android:id="@+id/filledButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Filled button"
/>

Filled tonal button ​

Filled tonal buttons 具有较浅的背景色和较深的标签颜色，其视觉显著性低于常规填充按钮。它们仍用于流程中的最终操作，但适用于强调程度较低的场景。

示例 ​

xml
<Button
    style="@style/Widget.Material3.Button.TonalButton"
    android:id="@+id/filledTonalButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Filled tonal button"
/>

Outlined button ​

Outlined buttons 用于需要引起注意但不是首要操作的行为，如“查看全部”或“加入购物车”。它也常用于给用户提供改变主意或退出流程的机会。

示例 ​

xml
<Button
    style="?attr/materialButtonOutlinedStyle"
    android:id="@+id/outlinedButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Outlined button"
/>

Text button ​

Text buttons 的视觉显著性最低，应用于低强调的操作，例如呈现多个并列选项时。

示例 ​

xml
<Button
    style="@style/Widget.Material3.Button.TextButton"
    android:id="@+id/textButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text button"
/>

按钮组 ​

按钮组用于组织相关按钮并增加它们之间的交互。

1. 普通按钮组 (Button group) ​

默认按钮组包含多个相关的独立按钮，每个按钮保留其原本的形状。

xml
<com.google.android.material.button.MaterialButtonGroup
    android:id="@+id/buttonGroup"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <Button android:text="Button 1" ... />
    <Button android:text="Button 2" ... />
    <Button android:text="Button 3" ... />
</com.google.android.material.button.MaterialButtonGroup>

2. 连结按钮组 (Connected button group) ​

连结按钮组会重写单个按钮的形状，使它们在视觉上更像一个整体（通常有 2dp 间距，且外角全圆角）。

xml
<com.google.android.material.button.MaterialButtonGroup
    style="@style/Widget.Material3.MaterialButtonGroup.Connected"
    ...>
    <Button style="?attr/materialButtonOutlinedStyle" ... />
    ...
</com.google.android.material.button.MaterialButtonGroup>

连结按钮组示例

切换按钮组 ​

切换按钮组（Segmented buttons）用于从一组选项中进行选择。

xml
<com.google.android.material.button.MaterialButtonToggleGroup
    android:id="@+id/toggleButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <Button style="?attr/materialButtonOutlinedStyle" android:text="选项 1" />
    <Button style="?attr/materialButtonOutlinedStyle" android:text="选项 2" />
    <Button style="?attr/materialButtonOutlinedStyle" android:text="选项 3" />
</com.google.android.material.button.MaterialButtonToggleGroup>
kotlin
toggleButton.addOnButtonCheckedListener { group, checkedId, isChecked ->
    // 响应按钮选择
}

图标按钮 (Icon button) ​

图标按钮帮助用户通过一次点击执行辅助操作。

性能注意

上述示例展示了如何使用 Button 创建图标按钮。但由于 MaterialButton 继承自 AppCompatButton 且支持较多功能，其初始化时间可能长于 ImageButton。如果您的应用对延迟非常敏感，请考虑使用纯图标按钮替代方案。

类型对比 ​

类型样式属性
标准图标按钮?attr/materialIconButtonStyle
填充图标按钮?attr/materialIconButtonFilledStyle
色调填充图标按钮?attr/materialIconButtonFilledTonalStyle
轮廓图标按钮?attr/materialIconButtonOutlinedStyle

主题化 ​

你可以通过修改 res/values/styles.xml 中的属性来全局自定义按钮的颜色、字体和形状。

xml
<style name="Theme.App" parent="Theme.Material3.*">
    <!-- 全局修改主要颜色 -->
    <item name="colorPrimary">@color/shrine_pink_100</item>
    <!-- 全局修改按钮文本样式 -->
    <item name="textAppearanceLabelLarge">@style/TextAppearance.App.Button</item>
    <!-- 全局修改组件形状（如切角） -->
    <item name="shapeAppearanceSmallComponent">@style/ShapeAppearance.App.SmallComponent</item>
</style>