Google I/O 2014 发布了 Material Design,那么Material Design到底是什么呢?
一、关于Material Design
拟物设计和扁平化设计一种结合体验。还吸取了最新一些科技理念。
三维世界(3D world)
Material 环境是一个三维的空间,这意味着每个对象都有 x , y , z 三维坐标属性,z 轴垂直于显示平面,并延伸向用户视角,每个 material 元素在 z 轴上占据一定的位置并且有一个 1dp 厚度的标准。 在网页上,z 轴被用来分层而不是为了视角。3D 空间通过操纵 y 轴进行仿真。如图:
Material 属性
材料拥有确定不变的特性和固定的行为。了解这些特性将有助于你在一定程度上熟悉材料,这与 Material Design 的构想是一致的。物理特性,材料具有变化的长宽尺寸(以 dp 为计)和均匀的厚度(1dp)。
高度和阴影
Material design 中的对象与现实生活中的对象具有相似的性质。在现实生活中,不同对象可以被堆积或粘贴起来,但是不能彼此交叉。对象自身塑造了自己的阴影并返回自己的光影。
依据这些性质所构造出来的空间模型对于用户来说是非常熟悉的,这一模型也可以被长期应用于移动应用当中。支撑这一空间模型的正是“高度”(Elevation)和“光影”(Shadows)这两个概念。
二、对于我们的美工,产品以及开发人员来说需要做什么
1.对于美工:遵循MD的界面设计、图标合集。
2.对于产品经理:遵循MD界面设计、页面的跳转及动画效果、交互设计。3.对于开发人员:参与原型设计、辅助美工原型设计的素材准备。
开发实现MD的设计----界面、动画、转场动画等等。
三、Material Design的使用及开发
1)preference:设置页面,可以通过配置文件达到界面设计的效果
2)android-support-v4:最低兼容到Android 1.6系统,里面有类似ViewPager等控件
3)android-support-v7:appcompat、CardView、gridlayout、mediarouter、palette、preference、recyclerView(最低兼容到3.0)
所以ADT、AndrodStudio一般都会直接创建项目的时候就直接帮你新建或者引入了一个叫做appcompat的项目。
如果你使用Eclipse这里可能会碰到很多问题:
1.自动导入的appcompat-v7项目自身就是报错的,什么原因:build的版本太低了,要么是SDK很新但是兼容包没有更新。
2.appcompat-v7好不容易没报错,但是项目报错:appcompat里面的某个res/values/theme/xxx属性不存在 等等问题。
什么原因?因为你引入的是很新的appcompat-v7项目,它要求必须很高的版本编译,然而Eclipse很蛋疼,在引入该项目的主项目编译的时候也必须要达到这个很高的版本,解决方法:直接使用最高版本编译)
MaterialDesign控制项目全局样式
写自己的全局样式:
<!--
Base application theme, dependent on API level. This theme is replaced
by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
-->
<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
<!--
Theme customizations available in newer API levels can go in
res/values-vXX/styles.xml, while customizations related to
backward-compatibility can go here.
-->
</style>
<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
<item name="android:textColor">@color/mytextcolor</item>
<item name="colorPrimary">@color/colorPrimary_pink</item>
<item name="colorPrimaryDark">@color/colorPrimary_pinkDark</item>
<item name="android:windowBackground">@color/background</item><item name="colorAccent">@color/accent_material_dark</item>
</style>
colorPrimaryDark:主色--深色,一般可以用于状态栏颜色、底部导航栏
colorAccent:(代表各个空间的基调颜色--CheckBox、RadioButton、ProgressBar等等)
android:textColor:当前所有的文本颜色
开源库
-
android-material-design-Open-source-projects Material Design 开源库集合
-
MaterialDesignLibrary Material Design 风格的各种控件
-
Material 同上面那个库差不多,也是各种控件
-
Material Design Library 第三方的 Material Design
-
MaterialViewPager Material Design 风格的 ViewPager
-
material-calendarview Material Design 风格的日历
-
PagerSlidingTabStrip Material Design 风格的 TabLayout
-
MaterialEditText Material Design 风格的输入框
-
MaterialSearchView Material Design 风格的搜索框
-
MaterialLoadingProgressBar Material Design 风格的进度指示器
-
material-range-bar Material Design 风格的 RangeBar
-
material-camera Material Design 风格的 Camera
-
Material-Animations Material Design 动画效果
-
material-dialogs MD 风格的弹框
-
material-ripple 支持 api 14 以上的水波纹效果
-
MaterialShowcaseView MD 风格的透明指示层
-
MaterialIntroView 类似 Fabulous App MD 风格的功能引导库
-
material-components-android MD 风格的组件集合