使用Material Design 应用正题
自从去年Google推出Material Design这款设计语言后,新的设计规范越来越受开发者们的喜爱,这篇文章包括后续文章就是慢慢的介绍在App中使用Material Design界面主题、动画、及各种UI设计规范,至于今年推出的Design包所有design控件的介绍在以前几篇就一一介绍了。
Material Design设计语言
它的设计思想为:把物理世界的体验带进屏幕,去掉现实中的杂质和随机性,保留其最原始纯净的形态、空间关系、变化与过渡,配合虚拟世界的灵活特性,还原最贴近真实的体验,达到简洁与直观的效果。
所以这款语言最终的目的是让手机内的App界面简洁直观且有着贴近现实世界的体验。
它主要包含四大块内容:
1、主题和布局
2、视图和阴影
3、UI控件
4、动画效果
其中上面每一块内容都值得详细研究,尤其是在视图和动画上面的效果,今天我们主要综合的介绍第一块内容。
使用Material Design主题
目前Material Design的Theme主要有三种:
而且Material Design主题目前只能应用在Android5.0以上的版本。
1、Theme.Material
2、Theme.Material.Light
3、Theme.Material.Light.DarkActionBar
使用Material Design主题有两种方法:
1、在styles.xml样式文件中配置:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="android:Theme.Material.Light.DarkActionBar">
<!-- Customize your theme here. -->
</style>
</resources>
2、在manifest文件中配置:
android:theme="@android:style/Theme.Material"
这三种主题效果为:
使用Material Design主题后,各控件就有了默认的Material Design的效果了,当然我们还可以自定义Material Design 主题色调效果:
<resources>
<style name="AppTheme" parent="android:Theme.Material.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="android:colorPrimary">#03A9F4</item>
<item name="android:colorPrimaryDark">#673AB7</item>
<item name="android:colorControlActivated">#03A9F4</item>
<item name="android:colorControlNormal">#E91E63</item>
<item name="android:textColorPrimary">#ffffff</item>
</style>
</resources>
其中常用到的:
1、android:colorControlActivated:表示CheckBox、EditText、Switch、Spinner、RadioButton等控件激活时候的色调,与之相同作用的一个属性:android:colorAccent。作用也是一样的。
2、android:colorControlNormal:表示CheckBox、EditText、Switch、Spinner、RadioButton等控件默认时的色调
3、android:colorPrimary:设置appBar的背景色
4、android:colorPrimaryDark:设置状态栏的颜色
5、android:textColorPrimary:设置appBar上字体的颜色
当然设置状态栏的颜色也只能支持Android 5.0以上的版本。刚刚自定义主题的效果为:
可以看到当我们选中CheckBox或Switch控件等时候,它们的颜色也变成了我们自定义的,其中EditText横线默认的颜色是和colorPrimary AppBar主题的颜色是一样的,这体现了很好的融合。
Material Design Theme的兼容性
如果我们想要在比Android 5.0版本以下使用Material Design Theme的话:
1、我们可以把Material Design Theme 的styles.xml放置在res/values-v21/目录下,然后使用Theme.AppCompat 并继承Material Design Theme,styles.xml为:
<resources>
<style name="AppTheme.Theme.AppCompat" parent="android:Theme.Material.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="android:colorPrimary">#03A9F4</item>
<item name="android:colorPrimaryDark">#673AB7</item>
<item name="android:colorControlActivated">#03A9F4</item>
<item name="android:colorControlNormal">#E91E63</item>
<item name="android:textColorPrimary">#ffffff</item>
</style>
</resources>
2、然后在res/values/目录下新建一个5.0版本以下用的styles.xml,其中该styles使用Theme.AppCompat主题,因为该主题是在support v7包下的,它兼容了Material Design的大部分风格,所以兼容必须使用Theme.AppCompat 主题,并且Activity要继承自AppCompatActivity,该styles.xml配置为:
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#03A9F4</item>
<item name="colorPrimaryDark">#673AB7</item>
<item name="colorControlActivated">#03A9F4</item>
<item name="colorControlNormal">#E91E63</item>
</style>
</resources>
我们可以发现区别,在兼容时候需要把前面的android:前缀去掉,否则会报错,这点注意一下。。。
现在,项目就能在5.0以下的设备也使用Material Design Theme效果了,我们来看看分别运行在5.0以下版本和5.1版本上的效果吧:
在5.0以下版本中:
在5.1以上版本:
我们可以看到,在5.0以下的版本中,虽然不能设置状态栏的颜色,但是其中大部分Material Design 的风格已经保留下来兼容的使用了,还是很炫吧。。。
Material Design布局
布局说起来我就总结一下把:
1、讲究纸工艺,一般典型的界面布局就是由多张纸组成
2、新增Z轴,可以让控件更加具有立体感
3、布局中的“纸”讲究浮动,既可以改变大小满足各种用途
4、还有好多值得注意的地方的,比较布局中的大小单位设置等等,我就不多说了,后几篇会放出一篇整体的将布局规范的文章
版权声明:本文为博主原创文章,未经博主允许不得转载。转载注明出处:http://blog.****.net/u010687392