Android Material Design之Toolbar与Palette实践

转载请注明出处：http://blog.csdn.net/bbld_/article/details/41439715 【Rocko's bog】

前言

我们都知道Marterial Design是Google推出的全新UI设计规范，如果对其不太了解的可以看下：Material design非官方中文指导手册 ，或者我的前面几篇Material Design的译文，相比之前Google在Android Holo风格上平平淡淡的表现不同，Material Design现在是被Google所比较重视的。在推出这门全新设计语言后，Android上自家的应用很快就使用Material Design全新设计了，如Play商店，Google Map，Google+，比较新的Inbox等；Web上的视觉体验也是很Material的，最有帮助的当属这个了Material Design的官方介绍（自备梯子）了；IOS方面的Google应用也在慢慢推进中。所以作为一个Android开发者怎么能不紧跟Google的步伐呢，下面就来通过Toolbar和Palette这两个在API21后推出的东西，当然Google已经把它们放到到v7库里了，使用Material Design来设计App当然不仅限于这两个方面了，前面的Material Design的译文已经清楚知道怎么去全面设计。除了Toolbar和Palette这篇文章还会介绍在Toolbar下使用Drawer。

Toolbar

Toolbar是什么？大概说一下它的官方介绍。Toolbar是应用的内容的标准工具栏，可以说是Actionbar的升级版，两者不是独立关系，要使用Toolbar还是得跟ActionBar扯上关系的。相比Actionbar Toolbar最明显的一点就是变得很自由，可随处放置，因为它是作为一个ViewGroup来定义使用的，所以单纯使用ActionBar已经稍显过时了，它的一些方法已被标注过时。

那么它怎么使用呢，首先我们一样要用到v7的支持包，然后定义程序的主题样式，在style里得先把Actionbar去掉，有点像欲想练功，必先自宫的感觉啊。如下：

/res/values/styles.xml

<resources xmlns:android="http://schemas.android.com/apk/res/android">

    <style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">

        <!-- toolbar（actionbar）颜色 -->
        <item name="colorPrimary">#4876FF</item>
        <!-- 状态栏颜色 -->
        <item name="colorPrimaryDark">#3A5FCD</item>
        <!-- 窗口的背景颜色 -->
        <item name="android:windowBackground">@android:color/white</item>
        <!-- SearchView -->
        <item name="searchViewStyle">@style/MySearchViewStyle</item>
    </style>

    <style name="AppTheme" parent="@style/AppBaseTheme"></style>

    <style name="MySearchViewStyle" parent="Widget.AppCompat.SearchView">
        <!--
    Background for the search query section (e.g. EditText)
    <item name="queryBackground">...</item>
    Background for the actions section (e.g. voice, submit)
    <item name="submitBackground">...</item>
    Close button icon
    <item name="closeIcon">...</item>
    Search button icon
    <item name="searchIcon">...</item>
    Go/commit button icon
    <item name="goIcon">...</item>
    Voice search button icon
    <item name="voiceIcon">...</item>
    Commit icon shown in the query suggestion row
    <item name="commitIcon">...</item>
    Layout for query suggestion rows
    <item name="suggestionRowLayout">...</item>
        -->

    </style>

</resources>

去除Actionbar最简单的方法就是直接继承NoActionBar的主题了。颜色的属性说明，还是下面这张图最清楚了：

另外，SearchView在AppCompat中提供了更强的可定制性和更多的样式可供设置，不过一般我们用默认的就行。

还有我们可以在values-v21给API21的系统版本设置默认的底部导航栏默认的颜色：

/res/values-v21/styles.xml

<resources xmlns:android="http://schemas.android.com/apk/res/android">

    <style nam