【Material Design】MaterialButton只看这一篇就足够了

前言

先写一些废话。

以前我们写一些登录按钮，注册按钮，提交按钮等等，都会新建一个xml文件，写shape，selector。

normal：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:width="279dp" android:height="38dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/white"/>
            <corners android:radius="4dp" />
        </shape>
    </item>
</selector>

pressed：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:width="279dp" android:height="38dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/black"/>
            <corners android:radius="4dp" />
        </shape>
    </item>
</selector>

selector:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/pressed" android:state_pressed="true" />
    <item android:drawable="@drawable/normal" android:state_pressed="false" />
</selector>

以上是最简单的按钮举例了吧，需要写3个xml。如果我们的项目小，按钮样式统一还好，如果按钮多变的话，就是3N个xml了，找起来很头疼，对吧。当然也有大佬也写出了BackgroundLibrary ，来替代shape，selector等。

题外话：推荐个插件Android Drawable Preview，看名字也知道的吧，图片预览

言归正传

我们这次的主题是Material组件中的MaterialButton。可以直接配边框，圆角，甚至形状等。

首先我们先来看此控件的使用方式，首先依赖material组件

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

1.默认

<com.google.android.material.button.MaterialButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="默认" />

2.加图标 

iconGravity	备注
start	前置
top	置顶
end	后置
textStart	文字左边，紧贴文字
textTop	文字上边，紧贴文字
textEnd	文字右边，紧贴文字

------------------------------------------------------------分割线 -----------------------------------------------------------

 <com.google.android.material.button.MaterialButton
                android:layout_width="300dp"
                android:layout_height="wrap_content"
                android:text="MaterialButton"
                app:iconGravity="start"        
                app:icon="@mipmap/icon_apply" />

------------------------------------------------------------分割线 -----------------------------------------------------------

 <com.google.android.material.button.MaterialButton
                android:layout_width="300dp"
                android:layout_height="wrap_content"
                android:text="MaterialButton"
                app:cornerRadius="25dp"
                app:icon="@mipmap/icon_apply"
                app:iconGravity="top" />

------------------------------------------------------------分割线 -----------------------------------------------------------

 <com.google.android.material.button.MaterialButton
                android:layout_width="300dp"
                android:layout_height="wrap_content"
                android:text="MaterialButton"
                app:cornerRadius="25dp"
                app:icon="@mipmap/icon_apply"
                app:iconGravity="end" />

------------------------------------------------------------分割线 -----------------------------------------------------------

3.修改矢量图标颜色 

 <com.google.android.material.button.MaterialButton
                android:layout_width="300dp"
                android:layout_height="wrap_content"
                android:text="MaterialButton"
                app:iconGravity="start"
                app:iconTint="#f00"//红色
                app:icon="@mipmap/icon_apply" />

------------------------------------------------------------分割线 -----------------------------------------------------------

 4.修改矢量图标大小 

 <com.google.android.material.button.MaterialButton
                android:layout_width="300dp"
                android:layout_height="wrap_content"
                android:text="MaterialButton"
                app:iconSize="30dp"
                app:iconGravity="start"
                app:icon="@mipmap/icon_apply" />

------------------------------------------------------------分割线 -----------------------------------------------------------

5.修改背景色 (不可用background)

    <com.google.android.material.button.MaterialButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:backgroundTint="@color/colorPrimaryDark"
                android:text="MaterialButton" />

------------------------------------------------------------分割线 -----------------------------------------------------------

 6.圆角以及边框线属性

   <com.google.android.material.button.MaterialButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:text="MaterialButton"
                android:textAllCaps="false"
                app:cornerRadius="25dp"
                app:strokeColor="@color/colorPrimaryDark"
                app:strokeWidth="2dp" />

------------------------------------------------------------分割线 -----------------------------------------------------------

7.圆形 

<com.google.android.material.button.MaterialButton
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:insetTop="0dp"
                android:insetBottom="0dp"
                android:text="Button"
                android:textAllCaps="false"
                android:textSize="18sp"
                app:cornerRadius="50dp" />//保证cornerRadius是width/height得一半就可以

------------------------------------------------------------分割线 -----------------------------------------------------------

8.单选用法

       <com.google.android.material.button.MaterialButtonToggleGroup
                android:id="@+id/toggleGroup"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:checkedButton="@id/mb_yes"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:singleSelection="true">

                <com.google.android.material.button.MaterialButton
                    android:id="@+id/mb_yes"
                    style="@style/Widget.MaterialComponents.Button.OutlinedButton"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="是"
                    android:textSize="15sp" />

                <com.google.android.material.button.MaterialButton
                    android:id="@+id/mb_no"
                    style="@style/Widget.MaterialComponents.Button.OutlinedButton"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="否"
                    android:textSize="15sp" />


            </com.google.android.material.button.MaterialButtonToggleGroup>