【Android】使用MaterialButton

1. 添加依赖包

在app下的build.gradle里添加Google Material Button的依赖包
implementation ‘com.google.android.material:material:1.7.0’

添加后要sync gradle。

2. 修改Theme

在res文件夹下的theme.xml里，把App的主题的父主题改为“Theme.MaterialComponents.Light.NoActionBar”

3. MaterialButton的继承关系

java.lang.Object
↳android.view.View
↳android.widget.TextView
↳android.widget.Button
↳androidx.appcompat.widget.AppCompatButton
↳com.google.android.material.button.MaterialButton

4. 常用属性

属性	说明
app:backgroundTint	背景颜色
app:backgroundTintMode	颜色模式
app:strokeColor	描边颜色
app:strokeWidth	描边宽度
app:cornerRadius	圆角大小
app:icon	在按钮中设置图标
app:iconSize	图标大小
app:iconGravity	图标显示重心（位置）
app:iconTint	图标颜色
app:iconPadding	图标和文本之间的间距
style=“@style/Widget.MaterialComponents.Button.UnelevatedButton”	去掉按钮的阴影效果

5. 实例

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.google.android.material.button.MaterialButton
        android:layout_width="150dp"
        android:layout_height="50dp"
        app:cornerRadius="30dp"
        android:text="Button_1"/>

    <com.google.android.material.button.MaterialButton
        android:layout_width="150dp"
        android:layout_height="50dp"
        app:cornerRadius="30dp"
        app:strokeColor="@color/material_dynamic_secondary10"
        app:strokeWidth="3dp"
        android:text="Button_2"
        />

    <com.google.android.material.button.MaterialButton
        android:layout_width="150dp"
        android:layout_height="50dp"
        app:cornerRadius="30dp"
        app:strokeColor="@color/material_dynamic_secondary10"
        app:strokeWidth="3dp"
        app:icon="@android:drawable/ic_lock_lock"
        app:iconPadding="0dp"
        android:text="Button_3"
        />
</LinearLayout>

6. Option Tabs （MaterialButtonToggleGroup）

多选项的组件继承 android.widget.LinearLayout, 本身也类似于一个LinearLayout， 但只能添加MaterialButton组件。

属性	说明
app:checkedButton	默认选中
app:singleSelection	是否单项选择
app:selectionRequired	设置为true后，强制至少选中一个

7.实例

    <com.google.android.material.button.MaterialButtonToggleGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="100dp"
        android:id="@+id/toggle_group"
        app:checkedButton="@+id/tab1"
        app:singleSelection="true">
        <!-- 默认选中第一个tab， 且同时只能选中一个-->
        
        <com.google.android.material.button.MaterialButton
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:layout_height="50dp"
            android:backgroundTint="@color/material_dynamic_neutral70"
            android:text="Option_1"
            android:id="@+id/tab1"/>

        <com.google.android.material.button.MaterialButton
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:layout_height="50dp"
            android:backgroundTint="@color/material_dynamic_neutral50"
            android:text="Option_2"/>
        <com.google.android.material.button.MaterialButton
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:layout_height="50dp"
            android:backgroundTint="@color/material_dynamic_neutral20"
            android:text="Option_3"/>

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

选中不同Tab时，切换监听

        // 创建 MaterialButtonToggleGroup!对象
        val toggleGroup = findViewById<MaterialButtonToggleGroup>(R.id.toggle_group)
        //对点击不同Tab进行监听
        toggleGroup.addOnButtonCheckedListener(object: MaterialButtonToggleGroup.OnButtonCheckedListener{
            override fun onButtonChecked(
                group: MaterialButtonToggleGroup?,
                checkedId: Int,
                isChecked: Boolean
            ) {
                Log.d("MainActivity", isChecked.toString())
            }
        })