Android MaterialButton使用詳解，告别shape、selector

效果

前言

先來看一下

MaterialButton

是什麼

由上圖可以看到

MaterialButton

也沒有什麼神秘的，不過是Button的一個子類而已，但是經過谷歌的封裝之後，在符合

Material Design

的基礎上，使用起來更加友善了，且容易實作預期效果。

使用

引入material包

implementation 'com.google.android.material:material:1.2.1'
           

正常

<com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/app_name"
    android:textAllCaps="false" />
           

• 與Button使用無異，

  textAllCaps

  是取消全部大小寫。

圖示

<com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:text="@string/app_name"
    android:textAllCaps="false"
    app:icon="@mipmap/ic_launcher" />
           

• app:icon

  屬性指定圖示。

圓角

<com.google.android.material.button.MaterialButton
    android:id="@+id/btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:text="@string/app_name"
    android:textAllCaps="false"
    app:cornerRadius="25dp"
    app:icon="@mipmap/ic_launcher"
    app:iconGravity="end" />
           

• app:cornerRadius

  屬性指定圓角大小。

Button描邊

<com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:text="@string/app_name"
    android:textAllCaps="false"
    app:cornerRadius="25dp"
    app:strokeColor="@color/black"
    app:strokeWidth="3dp" />
           

• app:strokeColor

  描邊顔色

• app:strokeWidth

  描邊寬度

文字描邊

<com.google.android.material.button.MaterialButton
    style="@style/Widget.MaterialComponents.Button.OutlinedButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:text="@string/app_name"
    android:textAllCaps="false"
    app:cornerRadius="5dp"
    app:rippleColor="@color/red"
    app:strokeColor="@color/red"
    app:strokeWidth="3dp" />
           

• 與上面不同的是，這裡用了

  style

  ，差別在于上面的是正常Button狀态下的描邊，這個是文字Button狀态下的描邊。

• app:rippleColor

  點選波紋顔色

文字按鈕

<com.google.android.material.button.MaterialButton
    style="@style/Widget.MaterialComponents.Button.TextButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:text="@string/app_name"
    android:textAllCaps="false" />
           

• 與正常使用方法一樣，但是加了

  style

  ，這個style在未選中的情況下，對背景色設定了

  透明

  。

圓形Button

<com.google.android.material.button.MaterialButton
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_marginTop="20dp"
    android:insetTop="0dp"
    android:insetBottom="0dp"
    android:text="@string/login"
    android:textAllCaps="false"
    android:textSize="20sp"
    app:cornerRadius="999dp"
    app:strokeColor="@color/orange"
    app:strokeWidth="5dp" />
           

這裡為什麼來個圓形Button呢，是因為涉及到兩個屬性

• android:insetTop

  上邊距

• android:insetBottom

  下邊距

這兩個參數預設是

6dp

，不設定為0dp的話，就不是一個規則的圓。

關于其他屬性的預設參數，可以在

xml檔案的右上角

，選中

Design

面闆，選擇要檢視的View即可。

author：yechaoa

源碼分析icon

唯一不足的是

MaterialButton

不能像

chip

一樣給

icon

設定事件。

來看看源碼中 icon具體是什麼實作的：

public void setIcon(@Nullable Drawable icon) {
    if (this.icon != icon) {
      this.icon = icon;
      updateIcon(/* needsIconUpdate = */ true);
    }
  }
           

這裡比較簡單，繼續看調用的

updateIcon

方法

private void updateIcon(boolean needsIconUpdate) {
    // Forced icon update
    if (needsIconUpdate) {
      resetIconDrawable(isIconStart);
      return;
    }
	...
    if (hasIconChanged) {
      resetIconDrawable(isIconStart);
    }
  }
           

有省略，看關鍵兩段代碼都調用了

resetIconDrawable

方法，繼續

private void resetIconDrawable(boolean isIconStart) {
    if (isIconStart) {
      TextViewCompat.setCompoundDrawablesRelative(this, icon, null, null, null);
    } else {
      TextViewCompat.setCompoundDrawablesRelative(this, null, null, icon, null);
    }
  }
           

相信到這裡很多人就明白了，icon的實作等同于

drawableStart

。

隻不過在MaterialButton中drawableStart是沒有效果的，而是

icon

和

iconGravity

配合使用來達到效果。

屬性

關于xml屬性，我做了一個整理

屬性	含義
insetBottom	下邊距，預設6dp
insetTop	上邊距，預設6dp
cornerRadius	圓角大小
icon	圖示
iconGravity	圖示位置，隻能前後
iconPadding	圖示距文字距離，預設8dp
iconSize	圖示大小
iconTint	圖示着色
iconTintMode	圖示着色模式
rippleColor	點選波紋顔色
strokeColor	描邊顔色
strokeWidth	描邊寬度
app:backgroundTint	背景色（注意命名空間）

Github

https://github.com/yechaoa/MaterialDesign

感謝

官方文檔

最後

寫作不易，感謝點贊支援 ^ - ^