Android MaterialButton 相比较于原始的button到底好在哪里

背景

我们要实现下面的几个Button样式，常规做法是用button或者textview通过setbackground设置xml，这个xml里面实现selector+shape或者单纯的shape。

MaterialButton给我们带来了便捷

   <com.google.android.material.button.MaterialButton
            style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/dimen_common"
            android:clickable="true"
            android:gravity="center_vertical"
            android:paddingStart="16dp"
            android:paddingEnd="16dp"
            android:text="@string/main_widget_material_button_unelevated"
            android:textColor="@color/white"
            app:rippleColor="@color/color_ripple" />

        <com.google.android.material.button.MaterialButton
            style="@style/Widget.MaterialComponents.Button.Icon"
            android:layout_width="wrap_content"
            android:layout_height="48dp"
            android:layout_marginTop="@dimen/dimen_common"
            android:clickable="true"
            android:gravity="center_vertical"
            android:paddingStart="16dp"
            android:paddingEnd="16dp"
            android:text="@string/main_widget_material_button_icon"
            android:textColor="@color/white"
            app:icon="@drawable/ic_photo_white_24dp"
            app:rippleColor="@color/color_ripple" />

        <com.google.android.material.button.MaterialButton
            android:layout_width="wrap_content"
            android:layout_height="48dp"
            android:layout_marginTop="@dimen/dimen_common"
            android:clickable="true"
            android:paddingStart="16dp"
            android:paddingEnd="16dp"
            android:text="@string/main_widget_material_button_default"
            android:stateListAnimator="@null"
            android:textColor="@color/white"
            app:cornerRadius="20dp"
            app:rippleColor="@color/color_ripple" />

        <com.google.android.material.button.MaterialButton
            style="@style/Widget.MaterialComponents.Button.TextButton"
            android:layout_width="wrap_content"
            android:layout_height="48dp"
            android:layout_marginTop="@dimen/dimen_common"
            android:clickable="true"
            android:gravity="center_vertical"
            android:paddingStart="16dp"
            android:paddingEnd="16dp"
            android:text="@string/main_widget_material_button_text" />

        <com.google.android.material.button.MaterialButton
            style="@style/Widget.MaterialComponents.Button.OutlinedButton"
            android:layout_width="wrap_content"
            android:layout_height="48dp"
            android:layout_marginTop="@dimen/dimen_common"
            android:clickable="true"
            android:gravity="center_vertical"
            android:paddingStart="16dp"
            android:paddingEnd="16dp"
            android:text="@string/main_widget_material_button_outline" />

        <com.google.android.material.button.MaterialButton
            style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
            android:layout_width="wrap_content"
            android:layout_height="48dp"
            android:layout_marginTop="@dimen/dimen_common"
            android:clickable="true"
            android:paddingStart="16dp"
            android:paddingEnd="16dp"
            android:text="@string/main_widget_material_button_stroke"
            android:textColor="@color/white"
            app:rippleColor="@color/color_ripple"
            app:strokeColor="@color/colorAccent"
            app:strokeWidth="2dp" />

减少了drawable大量近似的代码，提高了效率,但是如果想修改背景色，setBackground是无效的

  @Override
  public void setBackground(Drawable background) {
    setBackgroundDrawable(background);
  }
    @Override
  public void setBackgroundDrawable(Drawable background) {
    if (isUsingOriginalBackground()) {
      if (background != this.getBackground()) {
        Log.w(
            LOG_TAG,
            "Do not set the background; MaterialButton manages its own background drawable.");
        materialButtonHelper.setBackgroundOverwritten();
        super.setBackgroundDrawable(background);
      } else {
        // ViewCompat.setBackgroundTintList() and setBackgroundTintMode() call setBackground() on
        // the view in API 21, since background state doesn't automatically update in API 21. We
        // capture this case here, and update our background without replacing it or re-tinting it.
        getBackground().setState(background.getState());
      }
    } else {
      super.setBackgroundDrawable(background);
    }
  }

跟到源码里面已经写的很清楚了，MaterialButton想要改变背景色通过setBackground是无效的,默认背景色就是主题色也就是colorPrimary。但是想改当然是可以改的了，关注下面几个属性:

属性	描述
app:backgroundTint	背景着色()
app:backgroundTintMode	背景模式
app:strokeColor	描边颜色
app:strokeWidth	描边宽度
app:cornerRadius	圆角大小
app:rippleColor	按压水波纹颜色
app:icon	图标（注：位置只能在文本左侧）
app:iconSize	图标大小
app:iconGravity	图标重心
app:iconTint	图标着色
app:iconTintMode	图标着色模式
app:iconPadding	图标和文本之间的间距

注意

• 如果设置了android:backgroundTint会覆盖app:backgroundTint
• attr format=“color” name=“backgroundTint”/> 背景只能是颜色，不可以是shape selector gradient之类的
• TintMode取值有六种模式，看需求使用
• 不支持渐变色，如果用到渐变色，还是要用常规的shape gradient
• android:insetBottom=“0dp”
  android:insetTop=“0dp”
  可去除MaterialButton自带的透明padding
• android:stateListAnimator="@null"去除阴影

总结

移动互联网在国内也走过了近10年，UI也已经更成熟，我们需要紧随时代脚步，在掌握最新技能的同时，拓宽更广泛的技术栈。共勉