本文為 Nick Rout 發(fā)布于 Medium 的文章譯文（Google 翻譯）
原文鏈接為 Hands-on with Material Components for Android: Buttons
本文僅作為個(gè)人學(xué)習(xí)記錄所用吗货。如有涉及侵權(quán)局义，請(qǐng)相關(guān)人士盡快聯(lián)系譯文作者胞得。
Android MDC 系列文章：
- 第一篇：【譯】為Android設(shè)置Material Components主題
- 第二篇：【譯】Android材質(zhì)組件的動(dòng)手實(shí)踐：Bottom App Bar
- 第三篇：【譯】Android材質(zhì)組件的動(dòng)手實(shí)踐：Bottom Navigation
- 第四篇：【譯】Android材質(zhì)組件的動(dòng)手實(shí)踐：Bottom Sheet
- 第五篇：【譯】Android材質(zhì)組件的動(dòng)手實(shí)踐：Buttons
- 第六篇：【譯】Android材質(zhì)組件的動(dòng)手實(shí)踐：Chips
- 第七篇：【譯】Android材質(zhì)組件的動(dòng)手實(shí)踐：Cards
- 第八篇：【譯】Android材質(zhì)組件的動(dòng)手實(shí)踐：Dialogs
- 第九篇：【譯】Android材質(zhì)組件的動(dòng)手實(shí)踐：Selection Controls
這篇文章將介紹 Buttons 組件的功能和API颖侄。要了解如何處理Android的Material Components的初始設(shè)置（包括Gradle依賴關(guān)系和創(chuàng)建應(yīng)用程序主題），請(qǐng)參閱我的原始文章：
為Android設(shè)置Material Components主題
按鈕可以說是所有應(yīng)用程序中使用最廣泛的組件愤钾。這在很大程度上是由于其多功能性蛙讥，使用戶可以執(zhí)行操作并做出最終指導(dǎo)體驗(yàn)流程的選擇。單行包含的文本和/或圖標(biāo)表示按鈕可以執(zhí)行的操作遇西。
材質(zhì)按鈕與傳統(tǒng)的Android按鈕略有不同馅精，它們不包含其他插圖（左側(cè)/右側(cè)為4dp），并且具有更多的字母間距粱檀，不同的默認(rèn)顏色以及其他屬性洲敢，這些屬性可以提高易讀性和承受能力。
從設(shè)計(jì)的角度來看梧税，有三種主要類型的按鈕沦疾，旨在提供層次結(jié)構(gòu)的強(qiáng)調(diào)：
- 文字按鈕（低強(qiáng)調(diào)）：無(wú)容器。最適合用于次要?jiǎng)幼鞯诙樱绕涫窃谛枰獜?qiáng)調(diào)其他主要內(nèi)容時(shí)哮塞。
- 輪廓按鈕（中等強(qiáng)調(diào)）：撫摸的容器。最適合用于重要（但不是主要）動(dòng)作凳谦，并提供“較輕”的視覺感覺忆畅。
- 包含的按鈕（重點(diǎn)突出）：已裝滿容器。最適合應(yīng)引起用戶注意的主要操作尸执。這些可以升高也可以不升高家凯。
除此之外，還可以將按鈕分組為第四種類型：切換按鈕如失。這允許將相關(guān)的按鈕動(dòng)作水平地布置在公共容器中绊诲。可以選擇/取消選擇按鈕本身褪贵，以指示有效/無(wú)效的選擇掂之。
基本用法??
[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 >
選擇風(fēng)格??
如以上介紹部分所述脆丁，存在各種按鈕類型世舰。這些類型映射到您可以應(yīng)用于的樣式MaterialButton。針對(duì)特定用例槽卫，還存在各種子樣式跟压，例如調(diào)整圖標(biāo)的填充。樣式及其屬性的完整列表可以在GitHub上找到歼培。這些樣式變體繼承自Widget.MaterialComponents.Button震蒋，每個(gè)都有一個(gè)可選的樣式后綴：
-
文本按鈕：
*.TextButton（主）茸塞， ，*.TextButton.Icon喷好，*.TextButton.Snackbar翔横，，*.TextButton.Dialog``*.TextButton.Dialog.Icon``*.TextButton.Dialog.Flush -
概述按鈕：（
*.OutlinedButton主要）梗搅，*.OutlinedButton.Icon -
包含的按鈕（未提升）：（
*.UnelevatedButton主）禾唁，*.UnelevatedButton.Icon -
包含的按鈕（凸起）：無(wú)后綴（默認(rèn)，主要）无切，
*.Icon
添加圖標(biāo)??
可以將圖標(biāo)添加到按鈕荡短。它顯示在文本標(biāo)簽開頭的開頭。為了獲得正確的圖標(biāo)填充哆键，建議您使用*.Icon樣式變體（如上面“選擇樣式”部分中所示）掘托。
可以用XML添加圖標(biāo)：
< 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
還有一些其他屬性可用于調(diào)整圖標(biāo)的大小和位置：
-
iconSize：圖標(biāo)的寬度/高度籍嘹。默認(rèn)值為提供Drawable的的固有寬度闪盔。
-
iconGravity：圖標(biāo)的位置∪枋浚可以將其設(shè)置為start（ICON_GRAVITY_START泪掀，默認(rèn)值，在按鈕的開頭）颂碘，end（ICON_GRAVITY_END异赫，在按鈕的結(jié)尾），textStart（ICON_GRAVITY_TEXT_START头岔，在居中的文本標(biāo)簽的開頭）或textEnd（ICON_GRAVITY_TEXT_END塔拳，在居中的文本標(biāo)簽的結(jié)尾）。
-
iconPadding：圖標(biāo)和文本標(biāo)簽之間的間距峡竣。通常靠抑，您不想更改此設(shè)置。文本按鈕的默認(rèn)值為4dp适掰，所有其他類型的默認(rèn)值為8dp孕荠。
與圖標(biāo)著色相關(guān)的屬性將在下面的“主題”部分中討論。
分組按鈕以創(chuàng)建切換按鈕???????????
為了創(chuàng)建一個(gè)切換按鈕攻谁，我們需要將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手柄布局和行中只有相關(guān)的形狀角落的調(diào)整MaterialButton秒。MaterialButtons 的外觀取決于它們各自使用的樣式河狐。建議對(duì)所有孩子使用一致的樣式米绕，并建議使用概述的按鈕類型。
調(diào)整所選行為
添加到時(shí)MaterialButtonToggleGroup馋艺，子級(jí)會(huì)MaterialButton自動(dòng)變?yōu)椤翱蛇x”（即栅干，該android:checkable屬性設(shè)置為true）。
因此捐祠，存在一些用于調(diào)整如何MaterialButtonToggleGroup管理此屬性的屬性：
-
singleSelection：確定一次只能檢查組中的單個(gè)按鈕碱鳞。默認(rèn)值為false，表示可以獨(dú)立檢查/取消選中多個(gè)按鈕踱蛀。
-
selectionRequired：確定一次是否必須檢查組中的至少一個(gè)按鈕窿给。默認(rèn)值為false，表示可以取消選中所有按鈕率拒。 -
checkedButton：默認(rèn)情況下應(yīng)檢查的按鈕ID崩泡。默認(rèn)值View.NO_ID。
監(jiān)聽選擇狀態(tài)
我們能夠以多種方式查詢和調(diào)整當(dāng)前選中的按鈕：
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
我們還可以監(jiān)聽通過增加檢查的更改OnButtonCheckedListener到MaterialButtonToggleGroup：
toggleGroup.addOnButtonCheckedListener { group, checkedId, isChecked ->
// Do something for checked change
}
偵聽器也可以使用MaterialButtonToggleGroup#removeListener和MaterialButtonToggleGroup#clearListeners函數(shù)刪除俏橘。
取向
切換組中按鈕的默認(rèn)排列為水平允华。但是，MaterialButtonToggleGroup從extends LinearLayout來看寥掐，它還支持垂直排列靴寂。可以通過編程或XML設(shè)置：
< 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召耘。它被推薦到的寬度設(shè)定為match_parent和以從子按鈕除去頂部/底部的插圖有他們齊平彼此垂直百炬。但是，這也需要進(jìn)行調(diào)整minHeight以彌補(bǔ)插圖的不足污它。
主題??
可以根據(jù)三個(gè)“材質(zhì)主題”子系統(tǒng)為按鈕設(shè)置主題：顏色剖踊，版式和形狀。我們已經(jīng)在上面的“選擇樣式”部分中顯示了要使用的樣式衫贬。實(shí)施全局自定義MaterialButton和MaterialButtonToggleGroup樣式時(shí)德澈，請(qǐng)?jiān)谀膽?yīng)用程序主題中分別使用materialButtonStyle/ materialButtonOutlinedStyle和materialButtonToggleGroupStyle屬性來引用它們。
顏色
MaterialButton可以使用該backgroundTint屬性自定義背景色固惯。這需要一個(gè)ColorStateList梆造，表示需要<selector>用于已檢查/啟用/禁用狀態(tài)。對(duì)于包含的按鈕葬毫，默認(rèn)為colorPrimary（啟用）/ colorOnSurface（禁用）镇辉，colorPrimary對(duì)于所有其他類型屡穗，默認(rèn)為透明（未選中）/ （選中），每個(gè)狀態(tài)的不透明性不同忽肛。還有一個(gè)backgroundTintMode屬性可以更改色調(diào)PorterDuff.Mode村砂，盡管通常您希望保持不變。
可以使用android:textColor屬性自定義文本標(biāo)簽的顏色屹逛。這也需要一個(gè)ColorStateList础废。對(duì)于所包含的按鈕，默認(rèn)為colorOnPrimary（啟用）/ colorOnSurface（禁用），對(duì)于所有其他類型，默認(rèn)為（啟用colorPrimary或選中）/ colorOnSurface（禁用或未選中）蚀狰，每個(gè)狀態(tài)的不透明性不同。
可選圖標(biāo)的顏色可以使用iconTint屬性來自定義歇僧。這也需要a ColorStateList，并且默認(rèn)設(shè)置與相同android:textColor锋拖。和以前一樣诈悍，還有一個(gè)iconTintMode屬性。
最后兽埃，可以使用該rippleColor屬性自定義按鈕觸摸波紋的顏色侥钳。它也接受a，ColorStateList并且colorOnPrimary對(duì)于包含的按鈕和colorPrimary所有其他類型默認(rèn)為柄错，每個(gè)狀態(tài)的不透明性不同舷夺。
版式
按鈕文字標(biāo)簽將采用fontFamily您的應(yīng)用主題中定義的屬性。
雖然您通常希望保持按鈕文本外觀的大多數(shù)方面不變售貌，但是《材料指南》建議给猾，如果需要，我們可以在文本標(biāo)簽的所有大寫字母上使用句子大小寫颂跨。為此敢伸，我們將創(chuàng)建一種新樣式：
< style name =“ ButtonTextAppearance” parent =“ TextAppearance.MaterialComponents.Button” >
< item name =“ android：textAllCaps” > false </ item >
</ style >
我們可以將此android:textAppearance屬性直接引用到按鈕上，也可以將其應(yīng)用到單個(gè)按鈕樣式中恒削〕鼐保或者，可以通過在您的應(yīng)用程序主題中使用textAppearanceButton屬性引用它來全局應(yīng)用它钓丰。
形狀
可以使用該shapeAppearance屬性自定義按鈕背景的形狀躯砰。默認(rèn)為shapeAppearanceSmallComponent。
盡管不是嚴(yán)格的形狀主題携丁，但值得一提的是琢歇，可以使用該strokeWidth屬性來調(diào)整輪廓按鈕筆觸的寬度。默認(rèn)為1dp。
更多資源??
- 本文中使用的Playground應(yīng)用程序的源代碼可以在GitHub上找到矿微。
- 按鈕設(shè)計(jì)文檔
- 按鈕API文檔
- 切換按鈕API文檔
我希望這篇文章對(duì)“材質(zhì)按鈕”以及如何在您的Android應(yīng)用程序中使用它們提供了一些見解。如果您有任何疑問尚揣，想法或建議涌矢，那么我很樂意收到您的來信！
在Twitter上找到我@ricknout
