学会对美工Say No---Material Design

转载请注明出处：王亟亟的大牛之路

这几天有一些小伙伴问我，亟亟怎么不更新博客了。能听到这样的询问从内心深处还是比较欣喜的，至少有人会看，有人会想到你。（尽管你写的东西质量有好有坏，但是有人在支持还是很暖心的）

在这里统一回复下，最近在写一个内部用的APP，是对硬件已经一些功能做测试的APP（也就一个部门+测试组相关人员用），所以博客没抽出时间写，SO我回尽量抽时间写的。

废话不多说，我们来讲正题！

随着各种各样的设计模式的出现，我们的UI大姐姐们（大基佬们）都开始着各种各样的天花乱坠的设计，尽量想让他们的成果更像“艺术品”，然后就开始各种刁难我们，然后我们只能默默忍受着跟着“苹果走”。（我认知的好多企业基本一套UI 2种手机都跟着苹果走，黑莓 WIN暂不讨论）

但是其实很多实现苹果都有着自己的源生控件，而我们却要写一个有一个的自定义View去靠近他们的实现方式（也就是说，我们肯定工作量相对于苹果的小伙伴来说更高，至少再UI层面上，当然这里不包括那些大公司，什么美团，大众我认识的都是一个团队几十个人开发一个APP，每个人分工很细，那也就不算在内）

在Google推出Material Design的时候，我们其实可以明显的感觉到，我们应该有自己的风格，诸如Bar在上面，更多的层次感。

这一篇作为 铺垫来提一提Material Design，以便于之后的几篇来实现 我们想要的效果，贴一下效果。





当然这是用OpenGL ES做的，但是我想大家理解的是里面的一些概念（能装B！！显得你不是一个代码工具，你有思想，对不对！！）

概念

-3D（裸）

Material 环境是一个三维的空间，这意味着每个对象都有 x ， y ， z 三维坐标属性，z 轴垂直于显示平面，并延伸向用户视角,每个 material 元素在 z 轴上占据一定的位置并且有一个 1dp 厚度的标准。

我们所有的内容再也不是都黏在“纸上”（屏幕），他是一个实体，而不同的实体存在他自身的厚度（Z轴），我们在Material Design出现之前的阴影实现是怎么做的？

[code]<?xml version="1.0" encoding="utf-8"?>  
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >  

    <!-- 阴影部分 -->  
    <!-- 个人觉得更形象的表达：top代表下边的阴影高度，left代表右边的阴影宽度。其实也就是相对应的offset，solid中的颜色是阴影的颜色，也可以设置角度等等 -->  
    <item  
        android:left="2dp"  
        android:top="2dp">  
        <shape android:shape="rectangle" >  

            <gradient  
                android:angle="270"  

                android:endColor="#0F000000"  
                android:startColor="#0F000000" />  

            <corners  
                android:bottomLeftRadius="6dip"  
                android:bottomRightRadius="6dip"  
                android:topLeftRadius="6dip"  
                android:topRightRadius="6dip" />  
        </shape>  
    </item>  

    <!-- 背景部分 -->  
    <!-- 形象的表达：bottom代表背景部分在上边缘超出阴影的高度，right代表背景部分在左边超出阴影的宽度（相对应的offset） -->  
    <item  
        android:bottom="3dp"  
        android:right="3dp">  
        <shape android:shape="rectangle" >  

            <gradient  
                android:angle="270"  
                android:endColor="#FFFFFF"  
                android:startColor="#FFFFFF" />  

            <corners  
                android:bottomLeftRadius="6dip"  
                android:bottomRightRadius="6dip"  
                android:topLeftRadius="6dip"  
                android:topRightRadius="6dip" />  
        </shape>  
    </item>  

</layer-list>

画2层一层做厚度变色的偏移量显得有厚度而不是平面，构成了3D的视觉效果。

在5.0之后，我们可以使用

android:elevation

接下来我们来掩饰下效果：(图片超级大)



代码

[code]<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="sample.wjj.blogsample.MainActivity">

    <RelativeLayout
        android:elevation="3dp"
        android:background="#DCDC00"
        android:layout_margin="30dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <RelativeLayout
            android:elevation="5dp"
            android:background="#DC00"
            android:layout_margin="30dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/imageView"
            android:src="@drawable/demo"
            android:layout_centerVertical="true"
            android:layout_centerHorizontal="true" />
        </RelativeLayout>
    </RelativeLayout>

</RelativeLayout>

这是测试机的一个nexus平板我们明显的可以看出，ToolBar 红色部分，***部分都是在白色底板的上面，并且是有厚度的，厚度产生了阴影的效果。

在这里要说一下概念：

我们所有的层与层之间的交互对下一层内容或同级的界面将不做影响：

诸如，我对一个8dp厚度的Button点击，他被点击之后可能厚度变为 3dp，但它的变化不会影响他下一层父容器（如各类Layout）

像这样是OK的，我们的点击不能影响灰色的下层Layout



多个组建必须独立，不可以互相穿透,下图为独立的，不能再交际部分实行互相“融合”



更多内容可以看原文哦：http://www.google.com/design/spec/material-design/introduction.html#introduction-goals