【譯】Android材質(zhì)組件的動(dòng)手實(shí)踐：Buttons

本文為 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 系列文章：

這篇文章將介紹 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)顏色以及其他屬性，這些屬性可以提高易讀性和承受能力。

傳統(tǒng) Android Button

從設(shè)計(jì)的角度來看，有三種主要類型的按鈕，旨在提供層次結(jié)構(gòu)的強(qiáng)調(diào)：

  • 文字按鈕（低強(qiáng)調(diào)）：無容器。最適合用于次要?jiǎng)幼?，尤其是在需要?qiáng)調(diào)其他主要內(nèi)容時(shí)。
Text button
  • 輪廓按鈕（中等強(qiáng)調(diào)）：撫摸的容器。最適合用于重要（但不是主要）動(dòng)作，并提供“較輕”的視覺感覺。
Outlined button
  • 包含的按鈕（重點(diǎn)突出）：已裝滿容器。最適合應(yīng)引起用戶注意的主要操作。這些可以升高也可以不升高。
Unelevated (left) and raised (right) contained buttons

除此之外，還可以將按鈕分組為第四種類型：切換按鈕。這允許將相關(guān)的按鈕動(dòng)作水平地布置在公共容器中?？梢赃x擇/取消選擇按鈕本身，以指示有效/無效的選擇。

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 >

選擇風(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
  • 包含的按鈕（凸起）：無后綴（默認(rèn)，主要），*.Icon

添加圖標(biāo)??

可以將圖標(biāo)添加到按鈕。它顯示在文本標(biāo)簽開頭的開頭。為了獲得正確的圖標(biāo)填充，建議您使用*.Icon樣式變體（如上面“選擇樣式”部分中所示）。

帶有圖標(biāo)的按鈕

可以用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è)按鈕。
singleSelection設(shè)置為true / false
  • 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 >
方向設(shè)置為垂直的切換按鈕

這里要注意的有趣事情是孩子的額外屬性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。

形狀主題

更多資源??

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

在Twitter上找到我@ricknout

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容