Android Material UI控件之MaterialButton

最新推荐文章于 2025-07-19 17:39:52 发布

原创最新推荐文章于 2025-07-19 17:39:52 发布 · 662 阅读

30 ·

CC 4.0 BY-SA版权

文章标签：

#android #ui

程序员专栏收录该内容

187 篇文章

订阅专栏

然后找到MaterialButton

在这里插入图片描述

打开之后看下面这个图

在这里插入图片描述

可以得出什么内容呢？首先它继承了AppCompatButton，同时实现了Checkable和Shapeable，从这里可以得出这个MaterialButton比AppCompatButton要强，其次具备选中的能力，也就是它抢了Checkbox的饭碗，同时具备背景可塑性，踢倒了Drawable的奶瓶。看上去很是嚣张，你记住一个原则任何一次的继承肯定是为了比之前更优秀强大才会产生。正所谓青出于蓝而胜于蓝，我可以一层一层来剥下去，MaterialButton继承AppCompatButton，AppCompatButton继承Button，Button继承TextView，TextView继承View，View就是所有视图的底层了。在Android中，你写自定义View，只有三个类型，那就是继承View、继承ViewGroup、继承已有控件（如：TextView、Button、RecyclerView）。我好像扯远了，MaterialButton的源码也就1000多行，感兴趣的可以去了解每一个用法，或者再去继承改造一次。

2. 基本使用

为了方便演示，我先建一个Empty Activity

在这里插入图片描述

① 准备工作

在activity_main.xml中增加一个按钮，同时增加id

在这里插入图片描述

进入MainActivity。

在这里插入图片描述

因为现在不是一个控件的点击了，所以要根据id来区分不同的控件的点击，同时我也不想写多余的跳转代码。好了，下面进入MaterialButtonActivity，这才是今天的主角啊。

② 解决样式问题

在material_button.xml中增加一个按钮，如下图所示

在这里插入图片描述

然后你直接运行，不管你是在模拟器还是真机上，都会崩溃。（PS : 这不是坑爹吗？玩到这一步你可能脏话已经在嘴边了。）但是我会让你咽下去的。冷静下来想一下，你会发现你的崩溃是在进入这个Activity的时候发生的。也就是说完全是这个MaterialButton的锅，而且你的xml也只是设置为宽高和文字而已，没理由会崩溃啊。到这个时候你会先怀疑自己、然后怀疑Google、最后怀疑人生，什么垃圾控件，玩个锤子啊，问题发生了当然是要解决的，一般这种崩溃都会有日志的。

在这里插入图片描述

从上面的日志来看报错的原因在xml的第10行

在这里插入图片描述

但是这不是具体的原因，我们再往下滑动寻找错误的根源。

在这里插入图片描述

皇天不负苦心人，报错很明显就是这里了，你可能不是很理解这句话的意思。张麻子：师爷，翻译翻译（出自：《让子弹飞》）

在这里插入图片描述

哦豁，原来是样式的问题，那就不是什么大问题了。那么怎么解决呢？方案有三：第一个是整个项目使用Material样式，第二个是当前Activity使用Material样式，第三个是这个控件使用Material样式。下面来实践一下，打开styles.xml。增加如下代码：

如果你看过我之前写ShapeableImageView的文章，你就会觉得很熟悉了。下面回到material_button.xml,再增加一个按钮，然后增加样式。如下图所示：

在这里插入图片描述

然后运行一下：

在这里插入图片描述

当然还有更多的玩法，可以自己去设置。

③ 边框按钮

现在colors.xml中增加两个颜色

#FFF

#000

然后回到material_button.xml，再增加一个按钮，如下图所示：

在这里插入图片描述

这里说明一下，为什么我加了一个padding=“1dp”。因为这个描边是内外描边，如果不加这个1dp的填充，会出现上下按钮最边缘出描边宽度一半的切割，我之前在低版本的Android手机上就是这样写的，不过在Android11中好像修复了这个问题，我不设置padding="1dp"也可以正常描边了，运行一下：

在这里插入图片描述

刚才是有圆角的，再来看没有圆角的。

在这里插入图片描述

④ 圆形按钮

在这里插入图片描述

MaterialButton具有默认的内边距，可以通过insetLeft、insetTop、insetRight、insetBottom来改变默认的填充值，如果不设置就是默认的6dp的填充，基本上来说就是上下内填充默认为6dp，运行一下：

在这里插入图片描述

增加如下代码再运行一下

app:strokeWidth=“4dp”

app:cornerRadius=“60dp”

在这里插入图片描述

⑤ 图标按钮

既然是带图标按钮，那么首先要有图标才行啊。如果你不想从网络上下载其他的图标再放到AS中的话，就可以试一下Material提供的图标，你没有看错，人家不光给你提供新控件。还提供了大部分开发过程中常用的图标，不过图标是Material风格的，下面来看看怎么在AS中使用这种图标。

在插件安装那里。输入Android material回车搜索。如下图，两个你都可以安装也可以选其一。

在这里插入图片描述

我安装的是Material Design Icon Generator，安装之后需要重启AS，插件才会生效哦！重启之后，可以通过File → New →Material Design Icon Generator 或者使用快捷键Ctrl + Alt + D。如果你按了快捷键没有生效，就说明的电脑上有其他应用抢占了这个快捷键，起码QQ和微信不会抢占这个快捷键。

在这里插入图片描述

使用快捷键之后你可以看到这样一个页面。

在这里插入图片描述

为了方面使用，我简单说明一下，

Icon 对应的右边图标，这是一个下拉列表里面有很多图标，而且是命名很规范的。先熟悉有哪些再决定怎么使用。
Color 表示这个图标的颜色，如果下拉框里面没有你满意的颜色，你可以通过右边的输入框来手动设置颜色，很方便。
Theme 很明显这是主题样式，只能选择下拉框里面的主题样式。
Size 图标大小，里面只有四种大小，18dp、24dp、36dp、48dp。默认为24dp。因为在设计这种图的时候就只有这种标准的尺寸，注意它们都是2的倍数，在实际开发中也要遵循这个原则，这是设计的原则，不遵守也没关系。
Name 表示图标的名称，与下面的你图标的类型有关系，比如你选择Vector就是 .xml格式，选择Image就是 .png格式。那么你可能会问这两种格式有什么区别，区别就在于，.png没有代码，.xml是有代码的，它通过path路径来画图标，你不了解就不会看的很明白。
Res Directory 表示图标存放目录，通常是mipmap或者drawable。根据图标的类型来，xml放在drawable，png放在mipmap。
Image和Vector 默认是Vector，因为虽然你不一定能看到这些图标的绘制路径代码，但是它可以减少你的图片大小，进而减少你的应用大小，也相当于一个小优化，而至于Image,里面有五种类型的图标尺寸，是为了方便你做屏幕适配的。一般来说不会出现每一个图标都要设置五种分辨率情况，因为这会造成资源浪费，所以常规的是使用xhdpi或者xxhdpi就可以了，但是如果你想进一步减少图标的内存，那么还是推荐你使用Vector。

我想我已经解释的够清楚了，你也知道怎么使用这个插件来生成图标了，下面我们在mipmap-xhdpi下来生成一个白色的png格式图标。如下图所示：

在这里插入图片描述

点击Generate，会出现一个提示框告诉你构建成功。

在这里插入图片描述

你会发现它自己新建了一个文件夹，我觉得这是一个bug，但是无所谓，反正图标有了就可以了，把图标复制粘贴到mipmap.xml下之后删除这个drawable-xhdpi文件夹。下面就使用图标按钮，在material_button.xml中增加按钮，如下图所示

在这里插入图片描述

运行一下：

在这里插入图片描述

现在你可以看到图标出现在文字的的左边。那么如果要让它在右边呢？通过iconGravity属性就可以实现了

在这里插入图片描述

这里设置一个end的属性值，你可以看到预览里面图标已经在右边了，那么再运行一下：

在这里插入图片描述

没骗你吧。不过这样感觉还是不太好看，我想让图标和文字再近一点，很简单你只要把end改成textEnd就可以了，改完之后再运行一下：

在这里插入图片描述

感觉完美，Google的设计师和程序员果然不是盖的，这个时候我又想到了一句话，那就是距离产生美，你想一下如果这个图标紧挨着文字会好看吗？除非你瞎了，要么你就是杠精！显然目前这样还不是终极目标。现在我们都知道这个图标是.png的白色图标，如果我现在要改变这个图标的颜色，现在我既不想重新弄一个图标，又不想通过代码来改变这个颜色。怎么搞，当然有办法搞，还有一个iconTint的属性，这是一个图标色调的属性值，可以对已有的图标进行二次着色，最终以这个颜色为准，不设置则默认为icon的值。不知道你有没有理解这句话，没有理解也没有关系，实践出真知。

在这里插入图片描述