Android学习之Material Design之style

基本介绍:

Material Design是在Android 5.0推出的新的设计风格,其最大的特点就是扁平化,在我看来,扁平化是一个必然的趋势,所以现在来研究一下这个是很有必要的!在此次学习过程中,主要有四个大点科学习.其实也可以用一句话来说都归总于视图(View),注意:在开发中最小sdk不能低于5.0,今天先学习一下主题和UI控件.

*主题
*UI控件
*视图(UI)
*动画

一.主题

首先来看看效果图:



说明:

①:状态栏颜色("android:colorPrimaryDark")

②:APP标题栏颜色(name="android:colorPrimary")

③:APP标题栏文字颜色(name="android:textColorPrimary")

④:内容区域文字颜色(item name="android:textColor")

⑤:内容区域背景色(name="android:windowBackground")

⑥:虚拟键盘区域颜色( name="android:navigationBarColor")

总的来说,以上不过是一个简单的style文件,然后在application中去引用这个style即可.不过这也是Material Design的一部分,在使用style的前提是必须要引入android:Theme.Material主题.

为什么要引入这个主题呢?如果我们引用其他的主题可以吗,答案当然是可以的,只是在以上效果图中,如果我们引用了例如android:Theme:Light.NoTitle的话其中一些属性就失效了.废话不多说,这些都是style的基本使用.

下面是上面效果图的style,在parent中可以有很多种风格可供选择,效果图可自行测试:



<style name="AppTheme" parent="android:Theme.Material">
<!-- ActionBar颜色 -->
<item name="android:colorPrimary">@color/primary</item>
<!-- 状态栏颜色 -->
<item name="android:colorPrimaryDark">@color/primary</item>
<!-- 控件颜色 -->
<item name="android:colorAccent">@color/primary</item>
<!-- 背景色 -->
<item name="android:windowBackground">@color/window_background</item>
<!-- 键盘区域颜色 -->
<item name="android:navigationBarColor">@color/primary</item>
<!--标题栏字体颜色-->
<item name="android:textColorPrimary">@color/primaryTextColor</item>
<!--内容区域字体颜色-->
<item name="android:textColor">@color/primaryTextColor</item>
</style>然后在application中引用:
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity> .......</activity>
</application>

二.UI控件

如图:


其中最大的特性就是,在Material Design主题风格下,Button控件下的文字如果是英文则会全部自动转换为大写,然后在有背景的一些控件都增加了阴影效果,使得UI看着更有层次感而达到很真的感觉.

总结:

参考文献:

官网文档:http://www.google.com/design/spec/material-design/
中文网站:http://wiki.jikexueyuan.com/project/material-design/
Github(中文):https://github.com/1sters/material_design_zh_2
Material Design 颜色参考:
http://www.materialpalette.com/
http://www.xueui.cn/experience/app-experience/material-design-style-color.html