深入了解Material Design（一）

Material design

    Material Design大家并不陌生，Google为了保证Android平台上交互及视觉规范化提出了Material Design这个设计理念，它包括视觉、交互等多个方面。本文，在初步介绍Material Design的基础上，以一个开发者的视角来带大家来深入了解Material Design的开发及实现。

一、什么是Material Design

    官方解释见链接http://www.google.com/design/spec/material-design/introduction.html#

    个人理解Material Design是Google设计的一套视觉语言，将优先的经典的设计原理与科技创新相结合，为开发者提供一套完成视觉和交互设计规范。移动设备是这套设计语言的基础对象，让用户在不同的平台、不同尺寸的设备上能保持一致的体验。

     Material Design强调交互上的即时反馈，即对于用户的触控等行为app需要给出即时的反应。同时Material Design要求应用给用户带入感，让用户在使用时是沉浸在当前的应用当中。例如Google给出了沉浸式状态栏等“工具”，希望通过改变StatusBar和NavigationBar来给用户更强的融入感，专注于应用本身提供的内容。

    Google从动画、颜色、样式、触控反馈、布局等多个方面给出了Material Design的设计要求。无论是单一的控件还是图文布局，Google都给出了明确的设计说明，有兴趣的同学可以去上方提到的官方链接处做进一步了解，因为更多的涉及到UI和UE上的内容，这里就不做过多的介绍了。

二、Material Design的兼容性

    Material Design是在Android5.0的基础上提出的全新的设计语言，因此有很多控件特性都只在5.0及以上的版本才支持。为了更好的向下兼容老的平台版本，Google提供了v4、v7、v13包，同时在今年又提供了Support Design包。通过在项目中引入这些包的最新版本，可以很快的完成相关界面的开发工作。

    值得注意的是，Theme是无法直接向下兼容的，因此需要去实现两套不同的styles.xml来保持在不同平台上的Theme的一致性，具体的实现方式，会在后面的代码实践中为大家讲解。

三、Material Design的实践初体验

     我们初次体验和实践需要完成的是一个带有全新ActionBar的Activity，并为其设置沉浸式状态栏。保证在Android4.4和Android5.0两个平台上的体验和视觉一致性。ActionBar在新版本的Android中已经被废弃，取而代之的是使用更为简便的Toolbar，而在android.support.design包中Google引入了全新的AppBarLayout，它可以配合Toolbar等其他的控件，来实现ActionBar的诸多效果。本文只做沉浸式状态栏的讲解，在后面的文章中，会进一步的介绍AppBarLayout的作用及用法。

     首先为了兼容5.0以下的Android平台，我们需要引入v7的support jar包。在Gradle中加入如下的依赖包。写法如下：

 

dependencies{
  //appcompat支持，在低版本上引入Material Design支持的Activity和对应的Theme
  compile 'com.android.support:appcompat-v7:22.2.0' 
 //Google今年刚刚推出的全新的support包，用于完善Material Design的开发包，本次我们只需要用到其中的AppBarLayout
  compile 'com.android.support:design:22.2.0'
}

    然后，我们来编辑应用对应的Material Design的Theme。如果你的应用不需要支持Android5.0以下的平台，可以按照如下的方式定义Style：

 

 

<style name="Base.Theme.DesignDemo" parent="android:Theme.Material.Light.NoActionBar">
        <item name="colorPrimary">#673AB7</item>
        <item name="colorPrimaryDark">#512DA8</item>
        <item name="colorAccent">#FF4081</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
</style>

     而本次我们需要兼容5.0以下的版本，因此需要建立两份styles文件，同时对应的Activity需要继承自AppCompatActivity。先来看两份styles怎么写及每个item的意义是什么。

     在vaules文件夹下创建styles.xml文件，定义如下的style：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="Theme.DesignDemo" parent="Base.Theme.DesignDemo">
    </style>
    <style name="Base.Theme.DesignDemo" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">#673AB7</item>
        <item name="colorPrimaryDark">#512DA8</item>
        <item name="colorAccent">#FF4081</item>
        <item name="android:windowNoTitle">true</item>
    </style>
</resources>

      创建按values-v21文件夹，并再其下创建styles.xml文件

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="Theme.DesignDemo" parent="Base.Theme.DesignDemo">
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <!--<item name="android:statusBarColor">@android:color/transparent</item>-->
    </style>

</resources>

     先来解释下，Base.Theme.DesignDemo中几个Item的意义。我们来看张Google给出的图解：

该图说明了colorPrimary以及colorPrimaryDark分别指向的部位，而colorAccent是用来表现checkboxes等UI控件的。通过上面的styles文件我们可以看到，针对5.0的机器我们增加两个item，它们是5.0新增的属性。

windowDrawsSystemBarBackgrounds，将它设置为true，系统将在你的window里面绘制status bar，默认为TRUE，之所以要写出来是因为你的theme有可能是继承过来的，确保为true。

statusBarColor设置为透明是因为我们不再需要系统的status bar，因为我们无法控制它的位置。

为什么我们要注释掉statusBarColor的设置呢？因为当我们把statusBarColor设置为透明时，会导致样式中定义的colorPrimaryDark会失效。那我们什么时候需要用到这条设置呢？当我们使用DrawerLayout这个抽屉布局的时候，DrawerLayout会帮助我们来完成对statusBar的控制。DrawerLayout的用法，我们会在后面讲到。

接下来，我们新建一个Activity并编写它的布局。

public class ImmerseActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_immerse);
        Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        final ActionBar ab = getSupportActionBar();
        ab.setHomeAsUpIndicator(R.drawable.user_icon_default);
        ab.setDisplayHomeAsUpEnabled(true);
    }

}

 布局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.river.newfeaturestudy.ImmerseActivity">
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        >
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="@dimen/appbarlayout_height"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"/>
    </android.support.design.widget.AppBarLayout>

</RelativeLayout>

 我们将前文写好的样式引入到app里，编辑AndroidManifest.xml

<application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/Theme.DesignDemo" >
        <activity
            android:name=".ImmerseActivity"
            android:label="@string/title_activity_immerse" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

 让我们把代码运行起来，看看在5.0的机器上会是什么样的效果呢？

 

这就是我们希望看到的沉浸式状态了。那同样的代码，在4.4的机器上又会是如何的表现呢？

 

可见在4.4上，并没有达到我们期望中的沉浸式状态栏效果。要如何解决这个问题呢？我们在下一篇文章中，会详细讲解。