本文為 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。

形狀主題

更多資源??

• 本文中使用的Playground應用程序的源代碼可以在GitHub上找到。
• 按鈕設計文檔
• 按鈕API文檔
• 切換按鈕API文檔

我希望這篇文章對“材質按鈕”以及如何在您的Android應用程序中使用它們提供了一些見解。如果您有任何疑問，想法或建議，那么我很樂意收到您的來信！

在Twitter上找到我@ricknout