Android Material UI控件之MaterialButton

最新推荐文章于 2024-04-28 14:02:48 发布

2401_84010804

最新推荐文章于 2024-04-28 14:02:48 发布

阅读量1.2k

点赞数 23

分类专栏：程序员文章标签： android ui

本文链接：https://blog.csdn.net/2401_84010804/article/details/137355405

版权

程序员专栏收录该内容

236 篇文章 4 订阅

订阅专栏

正文
- 1. 添加依赖
2. 基本使用
- ① 准备工作
② 解决样式问题
3. 基操勿六
- ① 圆角按钮
② 双圆角按钮
③ 边框按钮
④ 圆形按钮
⑤ 图标按钮
⑥ 圆角图标按钮
4. 总结

前言

===============================================================

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

正文

===============================================================

1. 添加依赖

在你的app下的build.gradle中的dependencies闭包中增加如下依赖，然后Sync同步一下，你就可以名正言顺的使用里面的组件了。

implementation ‘com.google.android.material:material:1.2.0’

在用之前呢。我们最好来看看MaterialButton它里面的代码的大致情况。将项目工程切换到Project模式。然后展开最底部的External Libraries

在这里插入图片描述

然后找到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"也可以正常描边了，运行一下：

在这里插入图片描述