【译】Android材质组件的动手实践：Buttons

2020-03-26 本文已影响0人 FredWhite

本文为 Nick Rout 发布于 Medium 的文章译文（Google 翻译）
原文链接为 Hands-on with Material Components for Android: Buttons
本文仅作为个人学习记录所用。如有涉及侵权，请相关人士尽快联系译文作者。

Android MDC 系列文章：

第一篇：【译】为Android设置Material Components主题
第二篇：【译】Android材质组件的动手实践：Bottom App Bar
第三篇：【译】Android材质组件的动手实践：Bottom Navigation
第四篇：【译】Android材质组件的动手实践：Bottom Sheet
第五篇：【译】Android材质组件的动手实践：Buttons
第六篇：【译】Android材质组件的动手实践：Chips
第七篇：【译】Android材质组件的动手实践：Cards
第八篇：【译】Android材质组件的动手实践：Dialogs
第九篇：【译】Android材质组件的动手实践：Selection Controls

这篇文章将介绍 Buttons 组件的功能和API。要了解如何处理Android的Material Components的初始设置（包括Gradle依赖关系和创建应用程序主题），请参阅我的原始文章：

为Android设置Material Components主题

按钮可以说是所有应用程序中使用最广泛的组件。这在很大程度上是由于其多功能性，使用户可以执行操作并做出最终指导体验流程的选择。单行包含的文本和/或图标表示按钮可以执行的操作。

材质按钮与传统的Android按钮略有不同，它们不包含其他插图（左侧/右侧为4dp），并且具有更多的字母间距，不同的默认颜色以及其他属性，这些属性可以提高易读性和承受能力。

传统 Android Button

从设计的角度来看，有三种主要类型的按钮，旨在提供层次结构的强调：

文字按钮（低强调）：无容器。最适合用于次要动作，尤其是在需要强调其他主要内容时。

Text button

轮廓按钮（中等强调）：抚摸的容器。最适合用于重要（但不是主要）动作，并提供“较轻”的视觉感觉。

Outlined button

包含的按钮（重点突出）：已装满容器。最适合应引起用户注意的主要操作。这些可以升高也可以不升高。

Unelevated (left) and raised (right) contained buttons

除此之外，还可以将按钮分组为第四种类型：切换按钮。这允许将相关的按钮动作水平地布置在公共容器中。可以选择/取消选择按钮本身，以指示有效/无效的选择。

Toggle button

基本用法🏁

[MaterialButton](https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/button/MaterialButton.java)可以在您的布局中添加A ，如下所示：

< FrameLayout 
  ... > 

  < com.google.android.material.button.MaterialButton 
    android：id =“ @ + id / button” 
    android：layout_width =“ wrap_content” 
    android：layout_height =“ wrap_content” 
    android：text =“ Show” /> 

</ FrameLayout >

选择风格🤔

如以上介绍部分所述，存在各种按钮类型。这些类型映射到您可以应用于的样式MaterialButton。针对特定用例，还存在各种子样式，例如调整图标的填充。样式及其属性的完整列表可以在GitHub上找到。这些样式变体继承自Widget.MaterialComponents.Button，每个都有一个可选的样式后缀：

文本按钮： *.TextButton（主），，*.TextButton.Icon，*.TextButton.Snackbar，，*.TextButton.Dialog``*.TextButton.Dialog.Icon``*.TextButton.Dialog.Flush
概述按钮：（ *.OutlinedButton主要），*.OutlinedButton.Icon
包含的按钮（未提升）：（ *.UnelevatedButton主），*.UnelevatedButton.Icon
包含的按钮（凸起）：无后缀（默认，主要），*.Icon

添加图标🔷

可以将图标添加到按钮。它显示在文本标签开头的开头。为了获得正确的图标填充，建议您使用*.Icon样式变体（如上面“选择样式”部分中所示）。

带有图标的按钮

可以用XML添加图标：

< com.google.android.material.button.MaterialButton 
  ... 
  style =“ @ style / Widget.MaterialComponents.Button.Icon” 
  app：icon =“ @ drawable / ic_show_black_18dp” />

另外，也可以通过编程方式完成：

// Using icon resource ID
textButton.setIconResource(R.drawable.ic_show_black_18dp)
// Using icon Drawable
val showDrawable = AppCompatResources.getDrawable(context, R.drawable.ic_show_black_18dp)
textButton.icon = showDrawable

还有一些其他属性可用于调整图标的大小和位置：

iconSize：图标的宽度/高度。默认值为提供Drawable的的固有宽度。

iconGravity：图标的位置。可以将其设置为start（ICON_GRAVITY_START，默认值，在按钮的开头），end（ICON_GRAVITY_END，在按钮的结尾），textStart（ICON_GRAVITY_TEXT_START，在居中的文本标签的开头）或textEnd（ICON_GRAVITY_TEXT_END，在居中的文本标签的结尾）。

iconPadding：图标和文本标签之间的间距。通常，您不想更改此设置。文本按钮的默认值为4dp，所有其他类型的默认值为8dp。

与图标着色相关的属性将在下面的“主题”部分中讨论。

分组按钮以创建切换按钮👨‍👩‍👧‍👦

为了创建一个切换按钮，我们需要将MaterialButtons作为子View元素添加到[MaterialButtonToggleGroup](https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/button/MaterialButtonToggleGroup.java)（自定义ViewGroup）。

注意：*MaterialButtonToggleGroup*已在Android的材料组件1.1.0-alpha05版本中添加。

分组

这可以用XML完成：

< com.google.android.material.button.MaterialButtonToggleGroup 
  android：id =“ @ + id / toggleGroup” 
  android：layout_width =“ wrap_content” 
  android：layout_height =“ wrap_content” > 

  < com.google.android.material.button.MaterialButton 
    android：id =“ @ + id / button1” 
    ... /> 

  < com.google.android.material.button.MaterialButton 
    android：id =“ @ + id / button2” 
    ... /> 

  < com.google.android .material.button.MaterialButton 
    android：id =“ @ + id / button3” 
    ... /> 
</ com.google.android.material.button。MaterialButtonToggleGroup >

另外，也可以通过编程方式完成：

toggleGroup.addView（button1、0，layoutParams）
toggleGroup.addView（button2、1，layoutParams）
toggleGroup.addView（button3、2，layoutParams）

该MaterialButtonToggleGroup手柄布局和行中只有相关的形状角落的调整MaterialButton秒。MaterialButtons 的外观取决于它们各自使用的样式。建议对所有孩子使用一致的样式，并建议使用概述的按钮类型。

调整所选行为

添加到时MaterialButtonToggleGroup，子级会MaterialButton自动变为“可选”（即，该android:checkable属性设置为true）。

因此，存在一些用于调整如何MaterialButtonToggleGroup管理此属性的属性：

singleSelection：确定一次只能检查组中的单个按钮。默认值为false，表示可以独立检查/取消选中多个按钮。

singleSelection设置为true / false

selectionRequired：确定一次是否必须检查组中的至少一个按钮。默认值为false，表示可以取消选中所有按钮。
checkedButton：默认情况下应检查的按钮ID。默认值View.NO_ID。

监听选择状态

我们能够以多种方式查询和调整当前选中的按钮：

val checkedId = toggleGroup.checkedButtonId // Will return View.NO_ID if singleSelection = false
val checkedIds = toggleGroup.checkedButtonIds // Potentially an empty list
toggleGroup.check(R.id.button1) // Checks a specific button
toggleGroup.uncheck(R.id.button1) // Unchecks a specific button
toggleGroup.clearChecked() // Unchecks all buttons

我们还可以监听通过增加检查的更改OnButtonCheckedListener到MaterialButtonToggleGroup：

toggleGroup.addOnButtonCheckedListener { group, checkedId, isChecked ->
    // Do something for checked change
}

侦听器也可以使用MaterialButtonToggleGroup#removeListener和MaterialButtonToggleGroup#clearListeners函数删除。

取向

切换组中按钮的默认排列为水平。但是，MaterialButtonToggleGroup从extends LinearLayout来看，它还支持垂直排列。可以通过编程或XML设置：

< com.google.android.material.button.MaterialButtonToggleGroup 
    android：id =“ @ + id / toggleGroup” 
    ... 
    android：orientation =“ vertical” > 

    < com.google.android.material.button.MaterialButton 
        android：id = “ @ + id / button1” 
        android：layout_width =“ match_parent” 
        android：layout_height =“ wrap_content” 
        ... 
        android：insetTop =“ 0dp” 
        android：insetBottom =“ 0dp” 
        android：minHeight =“ 36dp” /> 

    ... 

</ com.google.android.material.button.MaterialButtonToggleGroup >

方向设置为垂直的切换按钮

这里要注意的有趣事情是孩子的额外属性MaterialButton。它被推荐到的宽度设定为match_parent和以从子按钮除去顶部/底部的插图有他们齐平彼此垂直。但是，这也需要进行调整minHeight以弥补插图的不足。

主题🎨

可以根据三个“材质主题”子系统为按钮设置主题：颜色，版式和形状。我们已经在上面的“选择样式”部分中显示了要使用的样式。实施全局自定义MaterialButton和MaterialButtonToggleGroup样式时，请在您的应用程序主题中分别使用materialButtonStyle/ materialButtonOutlinedStyle和materialButtonToggleGroupStyle属性来引用它们。

颜色

MaterialButton可以使用该backgroundTint属性自定义背景色。这需要一个ColorStateList，表示需要<selector>用于已检查/启用/禁用状态。对于包含的按钮，默认为colorPrimary（启用）/ colorOnSurface（禁用），colorPrimary对于所有其他类型，默认为透明（未选中）/ （选中），每个状态的不透明性不同。还有一个backgroundTintMode属性可以更改色调PorterDuff.Mode，尽管通常您希望保持不变。

可以使用android:textColor属性自定义文本标签的颜色。这也需要一个ColorStateList。对于所包含的按钮，默认为colorOnPrimary（启用）/ colorOnSurface（禁用），对于所有其他类型，默认为（启用colorPrimary或选中）/ colorOnSurface（禁用或未选中），每个状态的不透明性不同。

可选图标的颜色可以使用iconTint属性来自定义。这也需要a ColorStateList，并且默认设置与相同android:textColor。和以前一样，还有一个iconTintMode属性。

最后，可以使用该rippleColor属性自定义按钮触摸波纹的颜色。它也接受a，ColorStateList并且colorOnPrimary对于包含的按钮和colorPrimary所有其他类型默认为，每个状态的不透明性不同。

颜色主题

版式

按钮文字标签将采用fontFamily您的应用主题中定义的属性。

虽然您通常希望保持按钮文本外观的大多数方面不变，但是《材料指南》建议，如果需要，我们可以在文本标签的所有大写字母上使用句子大小写。为此，我们将创建一种新样式：

< style name =“ ButtonTextAppearance” parent =“ TextAppearance.MaterialComponents.Button” > 
  < item name =“ android：textAllCaps” > false </ item > 
</ style >

我们可以将此android:textAppearance属性直接引用到按钮上，也可以将其应用到单个按钮样式中。或者，可以通过在您的应用程序主题中使用textAppearanceButton属性引用它来全局应用它。

字体样式主题

形状

可以使用该shapeAppearance属性自定义按钮背景的形状。默认为shapeAppearanceSmallComponent。

尽管不是严格的形状主题，但值得一提的是，可以使用该strokeWidth属性来调整轮廓按钮笔触的宽度。默认为1dp。

形状主题