Material Design风格常用控件的使用与定制

   2016-10-07 0
核心提示:你是否还在使用selector来定制Button普通状态、按下状态的变化呢?你是否也想自己的Button有Material Design的阴影效果呢?你是否也想让各种控件轻松变换各种颜色风格呢?那么看完这篇分享,你就会有答案了。二、4种风格的Button 系统默认有4种风格的Button效

你是否还在使用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):

Material Design风格常用控件的使用与定制

按命名、并结合效果图可以看出,这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.AppCompatTheme.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" />

效果如下:

Material Design风格常用控件的使用与定制

现在,就可以看到Button变成了你想要的颜色,而且点击后Button颜色也加深了,完全跟使用selector定制出来的一模一样。并且如果使用Android 5.0以上的手机,还会默认带有 水纹波阴影 的炫酷效果。

四、其它各种常用控件

Material Design风格常用控件的使用与定制 Material Design风格常用控件的使用与定制 Material Design风格常用控件的使用与定制

其余控件像 CheckBoxRadioButton ,可以用 colorControlNormalcolorControlActivated (或 colorAccent )来控制正常状态和按下状态的背景颜色;

而像 SwitchEditText 等控件,可以用 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博客

 
标签: Material Design
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • 我如何将Material Deisgn带入实际产品中
    我如何将Material Deisgn带入实际产品中
    最近,与上海的“谷歌开发者社区”(GDG)一起策划并与大家进行了一期关于Material Design在的话题分享会。这几天我抽空将当天分享的PPT内容再精简整理了一下,并在关键页面配上了对应的文字说明,便于分享给没有来得及到场及更多的朋友。我问过很多人这个问
  • Material Design让我打破的思维局限
    Material Design让我打破的思维局限
    这段时间为了研究控件,细看了一下 Material Design,结果发现了很多创新、好用又有趣的东西。如果你想看一看 Material Design 的译文或者控件目录,这样的资源想必你能搜到不少。所以,我就不再锦上添花了,这里主要写的是 Material Design 给我带来的打破思
  • 导航栏分析:iOS 与 Material Design的对比分析
    导航栏分析:iOS 与 Material Design的对比分析
    前阵师傅带着整理设计规范,结束项目后从规范角度去反思,会发现自己还有很多东西要学。交互设计师真的是一个很专业的职业(划重点!),虽然国内市场入门门槛低,但是要做出合理的方案是需要有专业的知识储备的。定义iOS:导航栏能够实现在应用不同信息层级
  • Muse UI — Vue2.0 和 Material Design 结合
    Muse UI — Vue2.0 和 Material Design 结合
    Vue 2.0 发布以来,很多 vue 的开源项目都开始了升级计划,我也思考着 vue-carbon 的升级之路,9月开工,11月完工, Muse UI 闪亮登场。 先睹为快 Muse UI 主要用于移动端和一些对浏览器兼容性要求不高的桌面端应用,先上地址: https://github.com/museui/mus
  • Drawer 详解 ·Material Design Part 3
    Drawer 详解 ·Material Design Part 3
    这是一个系列文章,在这个系列里,我会按打造一个Material Design App的路线介绍所有应当掌握和值得掌握的系统组件。你会在这些文章里了解到这些组件的使用和内部实现原理,以及它们背后所反映的Material Design的设计思想,希望你会喜欢。往期回顾 Material
    11-13 安卓开发
  • Material Design
    Material Design
    经过一周的学习,整合梳理自己学到的知识,与大家分享以下是自己将Material Design中认为比较重要的知识点整合所得,有遗漏或者补充的欢迎大家指出,共同进步!!Material Design(材质设计)一、Material Design是什么?Material Design,中文名:原质化设计
  • Material Animations 4:Circular Reveal Animations
    Material Animations 4:Circular Reveal Anima
    Circular Reveal Animations,官方称之为循环揭露动画效果,是一种用来显示/隐藏一组UI界面元素的动画效果,它是在API 21引入的,对应的类是 ViewAnimationUtils 。 循环揭露动画效果可以和共享元素变换动画组合,用来创造一些有意义的动画效果,自然地告诉用
    10-13 安卓开发
  • Toolbar 详解 · Material Design Part 2
    Toolbar 详解 · Material Design Part 2
    这是一个系列文章,在这个系列里,我会按打造一个Material Design App的路线介绍所有应当掌握和值得掌握的系统组件。你会在这些文章里了解到这些组件的使用和内部实现原理,以及它们背后所反映的Material Design的设计思想,希望你会喜欢。往期回顾 Material
  • 「最美应用」解决通讯录头像难题
    「最美应用」解决通讯录头像难题
    让用户一个人去维护整个通讯录的头像更新十分不现实。一加推出的氢 OS 直戳用户痛点,自动用几何线条去匹配用户头像,使通讯录更倾向于 Material Design 风格,以与系统协调。当然短时间内,氢 OS 并没有匹配其他手机的意愿。 Micopi Pico 可以提供类似氢OS的
  • Material Animations 2:Shared Element Transition
    Material Animations 2:Shared Element Transi
    元素共享变换(shared element transition)决定了共享的view元素从一个Activity/Fragment 到另一个Activity/Fragment的切换中是如何动画变化的。 请记住,共享元素变换并不是真正实现了两个Activity或者Fragment之间元素的共享,界面还是两个不同界面,只不
    10-07 安卓开发
点击排行