Material组件之MaterialButton详解

关注

VIP免费原创 2022-05-10 10:44:05 2.5k 阅读 AI 写同款· GEO 优化 ›

Android Material UI控件之MaterialButton 前言作为Android的开发者，常用控件肯定少不了按钮控件，常规的按钮控件，只能满足基本需求，而日常开发中，都会有渐变按钮，圆形按钮，或者立体按钮，这些都需要自己的设置样式，就拿圆角按钮来说，可能你会这是一个shape文件，然后设置背景和圆角的大小，最后在按钮的background属性中设置好，就是一个圆角的按钮了。这样就显得有些麻烦了，因为要你时碰到一个花里胡哨的UI和搞事情的产品，你就完犊子了。你会创建很多这样的drawable文件，并且每一个你还要命名规范，改起来是很费劲的。而。阅读详情

前言
Android官方为开发者提供了许多丰富的UI控件，Material 组件就是包含了这些控件的一套工具，多数时候使用它可以满足我们日常开发UI的需求，提高效率。目前Android Material 组件已经更新了1.2.0稳定版，赶紧来了解一波。

一、MaterialButton
我们平时写布局，当遇到按钮需要圆角、或者描边等，通常的方法是新建一个xml文件，在shape标签下写，然后通过android:background或setBackground(drawable)设置。

这本来没什么问题，但是UI设计师会喜欢看起来和别人不一样的效果，也许是为了审（zhuang）美（bi），例如这个页面用4dp的圆角，那个页面用10dp的圆角，要有描边，颜色还不太一样……如果我们每个界面都新建个xml写shape，那么后期项目大了，维护起来就像无底洞……

Google官方在SDK28的时候也推出了一个新控件 —— MaterialButton，能在xml直接配置圆角、描边属性，满足平时开发的基本UI需求。

效果图如下：

二、使用步骤
1.引入库
导入依赖，就可以开始了（稳定版1.2.0，目前已更新到：1.3.0-alpha03）：

implementation ‘com.google.android.material:material:1.2.0’
1
2.相关公开属性
MaterialButton继承AppCompatButton，在原来Button的基础上做了一些扩展，如圆角、描边、前置和后置icon（icon支持设置Size、Tint、Padding、Gravity等），还支持按压水波纹并且设置color，基本能满足日常的需求。

公开属性如下：

3.设置相关主题
示例代码如下（设置相关主题:在styles.xml添加一下设置）：

<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.注意
以下资料来自：海王星0908

关于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”
/>

xml预览图：

有没有感觉怪怪的？貌似button上下多了一个padding！咦！代码里面明明没有设置padding啊！

看了源码发现，MaterialButton默认在style指定了insetTop和insetBottom为6dp，使得height看起来并没有Button实际设置值一样高，可以在xml将MaterialButton的insetTop和insetBottom都设置为0dp，这样MaterialButton的高度就和实际设置的高度一致了。

关于阴影
MD组件默认都是自带阴影的，MaterialButton也不例外。但是有时候我