项目地址:https://github.com/SherlockShi/MaterialWidgetPractise
一、前言
你是否还在使用selector来定制Button普通状态、按下状态的变化呢?
你是否也想自己的Button有Material Design的阴影效果呢?
你是否也想让各种控件轻松变换各种颜色风格呢?
那么看完这篇分享,你就会有答案了。
二、4种风格的Button
系统默认有4种风格的Button效果,分别是
Widget.AppCompat.Button
Widget.AppCompat.Button.Colored
Widget.AppCompat.Button.Borderless
Widget.AppCompat.Button.Borderless.Colored
效果如下(1-4):
按命名、并结合效果图可以看出,这4种风格对应两个属性:字体颜色
、边框颜色
(或称背景颜色);
4种风格可完整描述为默认边框默认字体
、彩色边框默认字体
、无边框默认字体
、无边框彩色字体
,使用方法也很简单,只需在普通Button的xml布局文件中,加上style属性即可:
<Button
...
style="@style/Widget.AppCompat.Button" />
<Button
...
style="@style/Widget.AppCompat.Button.Colored" />
<Button
...
style="@style/Widget.AppCompat.Button.Borderless" />
<Button
...
style="@style/Widget.AppCompat.Button.Borderless.Colored" />
从上图也可以看到,不加style属性的话,默认是使用Widget.AppCompat.Button
风格的。
后面两种无边框Button,只需要改变textColor
属性来设置效果,没什么好说的;主要是前面两种,其实就是同一种效果:有边框颜色的Button,如何定制请看下一节内容。
三、各种颜色的Button
你是否还在用selector文件来定制各种颜色、各种不同状态下的Button呢?如果一个应用中需要10个不同的Button,你是否需要定义10*4个xml文件呢?(normal状态+pressed状态+disabled状态+selector选择器)
其实使用系统的Button控件就可以轻松实现,只需要配置一定的属性。
首先,确保主题使用Material风格
主题需要使用Theme.AppCompat
或Theme.Design
类的子主题(建议使用Theme.AppCompat
子类主题,兼容Android 5.0以下版本),如Theme.AppCompat.Light
。
其次,在style文件中设置Button颜色
在styles.xml
文件中设置colorButtonNormal
属性:
values/styles.xml
<style name="RedButton">
<item name="colorButtonNormal">#F44336</item>
</style>
好了,一起来见证奇迹
在布局文件中定义Button,增加theme属性(注意,是theme
,不是style
):
<Button
...
android:theme="@style/RedButton" />
效果如下:
现在,就可以看到Button变成了你想要的颜色,而且点击后Button颜色也加深了,完全跟使用selector定制出来的一模一样。并且如果使用Android 5.0以上的手机,还会默认带有水纹波
和阴影
的炫酷效果。
四、其它各种常用控件
其余控件像CheckBox
、RadioButton
,可以用colorControlNormal
、colorControlActivated
(或colorAccent
)来控制正常状态和按下状态的背景颜色;
而像Switch
、EditText
等控件,可以用colorControlActivated
(或colorAccent
)来控制背景颜色。
五、总结
其实本篇主要只有两部分内容:
- 4种Button风格:
Widget.AppCompat.Button
Widget.AppCompat.Button.Colored
Widget.AppCompat.Button.Borderless
Widget.AppCompat.Button.Borderless.Colored
- 4个控件属性
colorButtonNormal: Button正常状态颜色
colorControlNormal: 控件正常状态颜色
colorControlActivated: 选中或者点击获得焦点后的颜色
colorAccent: 选中或者点击获得焦点后的颜色
现在,你是否对本篇开头的几个问题有了答案了呢?
PS:欢迎关注SherlockShi博客