本文已参与「新人创作礼」活动,一起开启掘金创作之路。
MaterialButton 使用
一、效果演示
圆角,按下随波纹,无投影,不额外占用空间
<com.google.android.material.button.MaterialButton
android:id="@+id/bt_success"
style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
android:layout_width="@dimen/dp220"
android:layout_height="@dimen/dp70"
android:layout_margin="@dimen/dp5"
android:backgroundTint="@color/theme_background"
android:insetTop="0dp"
android:insetBottom="0dp"
android:padding="0dp"
android:text="完成"
android:textSize="@dimen/sp30"
app:cornerRadius="@dimen/dp35"
app:rippleColor="@color/white" />
复制代码
二、使用步骤
1.引入库
导入依赖,就可以开始了
implementation 'com.google.android.material:material:1.5.0'
复制代码
2.相关公开属性
MaterialButton继承AppCompatButton,在原来Button的基础上做了一些扩展,如圆角、描边、前置和后置icon(icon支持设置Size、Tint、Padding、Gravity等),还支持按压水波纹并且设置color,基本能满足日常的需求。
公开属性如下:
3.设置相关主题
示例代码如下(设置相关主题:在styles.xml添加一下设置):
<!-- MaterialButton 设置相关的主题 -->
<style name="MaterialButtonTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<!-- 单独的MaterialButton样式-->
<style name="Button" parent="Widget.MaterialComponents.Button">
<item name="android:textColor">@color/white</item>
<item name="android:textSize">@dimen/text_size_14_sp</item>
<item name="android:textAllCaps">false</item>
<item name="android:insetTop">0dp</item>
<item name="android:insetBottom">0dp</item>
<item name="android:gravity">center</item>
<item name="backgroundTintMode">src_atop</item>
<item name="backgroundTint">@color/colorPrimary</item>
<item name="elevation">@dimen/dimen_10_dp</item>
<item name="rippleColor">@color/white</item>
<item name="iconTintMode">src_atop</item>
<item name="iconTint">@color/white</item>
<item name="iconGravity">textStart</item>
<item name="iconPadding">0dp</item>
<item name="iconSize">@dimen/dimen_20_dp</item>
</style>
<!-- 单独的MaterialButton样式 - - -> 主题色 -->
<style name="Button.ColorPrimary">
<item name="backgroundTint">@color/colorPrimary</item>
</style>
复制代码
4.注意关于background
在1.2版本以前,MaterialButton只能通过app:backgroundTint属性设置背景色,该属性接收color state list。不能通过android:background设置自定义drawable。
1.2版本后,官方已修复此问题。如果未设置自定义背景,则 MaterialShapeDrawable 仍将用作默认背景。
也就是说,如果按钮背景是纯色,可以通过app:backgroundTint指定;如果按钮背景是渐变色,则需要自己定义drawable,然后通过android:background设置。
注意:如果要使用android:background设置背景,则需要将backgroundTint设置为@empty,否则background不会生效。
代码如下:
<com.google.android.material.button.MaterialButton
android:background=”@drawable/custom_background”
app:backgroundTint=”@empty” />
复制代码
指定@empty后,Android Studio会出现红色警告,可以正常运行,忽略就好。不过既然已经自定义drawable,就没必要使用MaterialButton,直接用普通的Button甚至用TextView就好了。
关于insetTop、insetBottom
看下面的代码:
<com.google.android.material.button.MaterialButton
android:id="@+id/btn1"
android:layout_width="150dp"
android:layout_height="50dp"
android:textColor="@android:color/white"
android:textSize="18sp"
/>
复制代码
MaterialButton默认在style指定了insetTop和insetBottom为6dp,使得height看起来并没有Button实际设置值一样高,可以在xml将MaterialButton的insetTop和insetBottom都设置为0dp,这样MaterialButton的高度就和实际设置的高度一致了。
关于阴影
MD组件默认都是自带阴影的,MaterialButton也不例外。但是有时候我们并不想要按钮有阴影,那么这时候可以指定style为 style="@style/Widget.MaterialComponents.Button.UnelevatedButton",这样就能去掉阴影,让视图看起来扁平化。
关于theme
在MDC1.1.0以后,使用MaterialButton可能会出现闪退的问题,原因就是使用了MD控件,但是未将them设置为MaterialComponents。解决方法可以有几种:
先在style.xml自定义MaterialComponents_Theme
<style name="MaterialComponents_Theme" parent="Theme.MaterialComponents.Light.NoActionBar">
<!-- Customize your theme here. -->
...
</style>
复制代码
方法一:
AndroidManifest里application节点下配置,作用域为整个应用
<application
...
android:theme="@style/MaterialComponents_Theme"
复制代码
方法二:
只在当前activity配置,作用域为当前activity
<activity
...
android:theme="@style/MaterialComponents_Theme"
复制代码
方法三:
为每个在使用MD控件的地方配置,作用域只针对当前控件
<com.google.android.material.button.MaterialButton
...
android:theme="@style/Theme.MaterialComponents.Light.NoActionBar" />
复制代码
5.示例
示例中 style="@style/Button.ColorPrimary" 为自定义style
1.MaterialButton 普通圆角 (10dp 圆角)
<!--普通圆角 MaterialButton-->
<com.google.android.material.button.MaterialButton
android:id="@+id/materialButton1"
style="@style/Button.ColorPrimary"
android:layout_width="wrap_content"
android:layout_height="@dimen/dimen_30_dp"
android:text="10dp 圆角"
app:cornerRadius="@dimen/dimen_10_dp" />
复制代码
2.MateralButton 普通圆角(20dp 圆角)
<!--普通圆角 MaterialButton -->
<com.google.android.material.button.MaterialButton
android:id="@+id/materialButton2"
style="@style/Button.ColorPrimary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="20dp 圆角"
app:cornerRadius="@dimen/dimen_20_dp"/>
复制代码
3.MateralButton 文字的圆形按钮
<!-- 实现只有文字的圆形按钮 -->
<com.google.android.material.button.MaterialButton
android:id="@+id/materialCircle"
style="@style/Button.ColorPrimary"
android:layout_width="@dimen/dimen_80_dp"
android:layout_height="@dimen/dimen_80_dp"
android:text="Material Circle"
app:cornerRadius="@dimen/dimen_40_dp" />
复制代码
<!-- 实现只有文字的圆形按钮+描边 -->
<com.google.android.material.button.MaterialButton
android:id="@+id/materialCircleStroke"
style="@style/Button"
android:layout_width="@dimen/dimen_80_dp"
android:layout_height="@dimen/dimen_80_dp"
android:backgroundTint="@color/white"
android:text="Material Circle"
android:textColor="@color/colorPrimary"
app:cornerRadius="@dimen/dimen_40_dp"
app:strokeColor="@color/colorPrimary"
app:strokeWidth="@dimen/dimen_3_dp" />
<com.google.android.material.button.MaterialButton
android:id="@+id/btnSwitch"
style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
android:layout_width="50dp"
android:layout_height="50dp"
android:backgroundTint="#00FFFFFF"
android:insetTop="0dp"
android:insetBottom="0dp"
android:padding="0dp"
android:text="切换"
android:textColor="@color/colorPrimary"
android:textSize="10sp"
app:cornerRadius="25dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:rippleColor="#FFFFFF"
app:strokeColor="@color/colorPrimary"
app:strokeWidth="2dp" />
复制代码
4.MaterialButton 只有icon样式的按钮
<!-- 实现只有ICON样式的按钮 -->
<com.google.android.material.button.MaterialButton
android:id="@+id/materialCircleIcon"
style="@style/Button.ColorPrimary"
android:layout_width="@dimen/dimen_60_dp"
android:layout_height="@dimen/dimen_60_dp"
app:cornerRadius="@dimen/dimen_30_dp"
app:icon="@drawable/ic_setting" />
复制代码
5.MaterialButton icon+描边+圆角
<!--实现 描边+圆角+icon 样式-->
<com.google.android.material.button.MaterialButton
android:id="@+id/materialButtonWhite"
style="@style/Button.ColorPrimary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="@color/white"
android:text="Material Button"
android:textColor="@color/colorPrimary"
app:cornerRadius="@dimen/dimen_20_dp"
app:icon="@drawable/ic_setting"
app:iconPadding="@dimen/dimen_10_dp"
app:iconTint="@color/colorPrimary"
app:strokeColor="@color/colorPrimary"
app:strokeWidth="@dimen/dimen_3_dp" />
复制代码
6.描边+圆角 样式
<!--实现 描边+圆角 样式-->
<com.google.android.material.button.MaterialButton
android:id="@+id/materialButton3"
style="@style/Button.ColorPrimary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="20dp 圆角,3dp描边"
app:cornerRadius="@dimen/dimen_20_dp"
app:strokeColor="@color/red"
app:strokeWidth="@dimen/dimen_3_dp" />
复制代码
7.圆角前置图标
<!--实现圆角前置图标-->
<com.google.android.material.button.MaterialButton
android:id="@+id/materialButton4"
style="@style/Button.ColorPrimary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="图标"
app:cornerRadius="@dimen/dimen_10_dp"
app:icon="@drawable/ic_setting"
app:iconPadding="@dimen/dimen_20_dp" />
复制代码
8.圆角后置着色图标
<!--实现圆角后置着色图标-->
<com.google.android.material.button.MaterialButton
android:id="@+id/materialButton5"
style="@style/Button.ColorPrimary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="后置着色"
app:cornerRadius="@dimen/dimen_10_dp"
app:icon="@drawable/ic_setting"
app:iconGravity="end"
app:iconPadding="@dimen/dimen_20_dp"
app:iconTint="@color/mediumvioletred"
app:iconTintMode="src_in" />
复制代码
9.MaterialButtonToggleGroup(组合的MaterialButton)
公开属性:
属性 | 描述 | 参数 |
---|---|---|
app:checkedButton | 默认选中 | 按钮ID |
app:singleSelection | 是否单项选择 | true/false |
app:selectionRequired | 设置为true后,强制至少选中一个 | true/false |
<com.google.android.material.button.MaterialButtonToggleGroup
android:id="@+id/toggleGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/dimen_20_dp"
app:checkedButton="@id/btn1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/materialButton5"
app:singleSelection="true">
<com.google.android.material.button.MaterialButton
android:id="@+id/btn1"
style="@style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="选项一"
android:textSize="@dimen/text_size_16_sp" />
<com.google.android.material.button.MaterialButton
android:id="@+id/btn2"
style="@style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="选项二"
android:textSize="@dimen/text_size_16_sp" />
<com.google.android.material.button.MaterialButton
android:id="@+id/btn3"
style="@style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="选项三"
android:textSize="@dimen/text_size_16_sp" />
<com.google.android.material.button.MaterialButton
android:id="@+id/btn4"
style="@style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="选项四"
android:textSize="@dimen/text_size_16_sp" />
</com.google.android.material.button.MaterialButtonToggleGroup>
复制代码
整体xml代码
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">
<com.supernova.module.widget.BackTitleBar
android:id="@+id/backTitleBar"
android:layout_width="@dimen/dimen_0_dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:showBackIcon="true"
app:titleText="MaterialButton" />
<!--普通圆角 MaterialButton-->
<com.google.android.material.button.MaterialButton
android:id="@+id/materialButton1"
style="@style/Button.ColorPrimary"
android:layout_width="wrap_content"
android:layout_height="@dimen/dimen_30_dp"
android:layout_marginTop="@dimen/dimen_16_dp"
android:text="10dp 圆角"
app:cornerRadius="@dimen/dimen_10_dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/materialCircle"
app:layout_constraintTop_toBottomOf="@+id/backTitleBar" />
<!-- 实现只有文字的圆形按钮 -->
<com.google.android.material.button.MaterialButton
android:id="@+id/materialCircle"
style="@style/Button.ColorPrimary"
android:layout_width="@dimen/dimen_80_dp"
android:layout_height="@dimen/dimen_80_dp"
android:layout_marginTop="@dimen/dimen_16_dp"
android:text="Material Circle"
app:cornerRadius="@dimen/dimen_40_dp"
app:layout_constraintLeft_toRightOf="@+id/materialButton1"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/backTitleBar" />
<!-- 实现只有ICON样式的按钮 -->
<com.google.android.material.button.MaterialButton
android:id="@+id/materialCircleIcon"
style="@style/Button.ColorPrimary"
android:layout_width="@dimen/dimen_60_dp"
android:layout_height="@dimen/dimen_60_dp"
android:layout_marginTop="16dp"
app:cornerRadius="@dimen/dimen_30_dp"
app:icon="@drawable/ic_setting"
app:layout_constraintLeft_toRightOf="@+id/materialButton1"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/materialCircle" />
<!--普通圆角 MaterialButton-->
<com.google.android.material.button.MaterialButton
android:id="@+id/materialButton2"
style="@style/Button.ColorPrimary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/dimen_16_dp"
android:text="20dp 圆角"
app:cornerRadius="@dimen/dimen_20_dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/materialCircleIcon"
app:layout_constraintTop_toBottomOf="@+id/materialCircle" />
<!--实现 描边+圆角+icon 样式-->
<com.google.android.material.button.MaterialButton
android:id="@+id/materialButtonWhite"
style="@style/Button.ColorPrimary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/dimen_20_dp"
android:backgroundTint="@color/white"
android:text="Material Button"
android:textColor="@color/colorPrimary"
app:cornerRadius="@dimen/dimen_20_dp"
app:icon="@drawable/ic_setting"
app:iconPadding="@dimen/dimen_10_dp"
app:iconTint="@color/colorPrimary"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/materialCircleStroke"
app:layout_constraintTop_toBottomOf="@+id/materialCircleIcon"
app:strokeColor="@color/colorPrimary"
app:strokeWidth="@dimen/dimen_3_dp" />
<!-- 实现只有文字的圆形+ 描边 按钮 -->
<com.google.android.material.button.MaterialButton
android:id="@+id/materialCircleStroke"
style="@style/Button"
android:layout_width="@dimen/dimen_80_dp"
android:layout_height="@dimen/dimen_80_dp"
android:layout_marginTop="@dimen/dimen_16_dp"
android:backgroundTint="@color/white"
android:text="Material Circle"
android:textColor="@color/colorPrimary"
app:cornerRadius="@dimen/dimen_40_dp"
app:layout_constraintLeft_toRightOf="@+id/materialButtonWhite"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/materialCircleIcon"
app:strokeColor="@color/colorPrimary"
app:strokeWidth="@dimen/dimen_3_dp" />
<!--实现 描边+圆角 样式-->
<com.google.android.material.button.MaterialButton
android:id="@+id/materialButton3"
style="@style/Button.ColorPrimary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/dimen_10_dp"
android:text="20dp 圆角,3dp描边"
app:cornerRadius="@dimen/dimen_20_dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/materialCircleStroke"
app:strokeColor="@color/red"
app:strokeWidth="@dimen/dimen_3_dp" />
<!--实现圆角前置图标-->
<com.google.android.material.button.MaterialButton
android:id="@+id/materialButton4"
style="@style/Button.ColorPrimary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/dimen_10_dp"
android:text="图标"
app:cornerRadius="@dimen/dimen_10_dp"
app:icon="@drawable/ic_setting"
app:iconPadding="@dimen/dimen_20_dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/materialButton3" />
<!--实现圆角后置着色图标-->
<com.google.android.material.button.MaterialButton
android:id="@+id/materialButton5"
style="@style/Button.ColorPrimary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/dimen_10_dp"
android:text="后置着色"
app:cornerRadius="@dimen/dimen_10_dp"
app:icon="@drawable/ic_setting"
app:iconGravity="end"
app:iconPadding="@dimen/dimen_20_dp"
app:iconTint="@color/mediumvioletred"
app:iconTintMode="src_in"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/materialButton4" />
<!--实现组合的MaterialButton-->
<com.google.android.material.button.MaterialButtonToggleGroup
android:id="@+id/toggleGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/dimen_20_dp"
app:checkedButton="@id/btn1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/materialButton5"
app:singleSelection="true">
<com.google.android.material.button.MaterialButton
android:id="@+id/btn1"
style="@style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="选项一"
android:textSize="@dimen/text_size_16_sp" />
<com.google.android.material.button.MaterialButton
android:id="@+id/btn2"
style="@style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="选项二"
android:textSize="@dimen/text_size_16_sp" />
<com.google.android.material.button.MaterialButton
android:id="@+id/btn3"
style="@style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="选项三"
android:textSize="@dimen/text_size_16_sp" />
<com.google.android.material.button.MaterialButton
android:id="@+id/btn4"
style="@style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="选项四"
android:textSize="@dimen/text_size_16_sp" />
</com.google.android.material.button.MaterialButtonToggleGroup>
复制代码
我的Github地址:github.com/yutils
我的CSDN地址:blog.csdn.net/Yu1441
我的掘金地址:juejin.cn/user/443806…
感谢关注微博:细雨若静