android Material Design详解

androidMaterialDesign详解前言我们都知道MarterialDesign是Google推出的全新UI设计规范，如果对其不太了解的可以看下：Materialdesign非官方中文指导手册，或者我的前面几篇MaterialDesign的译文，相比之前Google在AndroidHolo风格上平平淡淡的表现不同，MaterialDesign现在是被Google所比较重视的。在推出这门全新设计语言后，Android上自家的应用很快就使用MaterialDesign全新设计了，如Play商店，GoogleMap，Google+，比较新的Inbox等；Web上的视觉体验也是很Material的，最有帮助的当属这个了MaterialDesign的官方介绍（自备梯子）了；iOS方面的Google应用也在慢慢推进中。所以作为一个Android开发者怎么能不紧跟Google的步伐呢，下面就来通过Toolbar和Palette这两个在API21后推出的东西，当然Google已经把它们放到到v7库里了，使用MaterialDesign来设计App当然不仅限于这两个方面了，前面的MaterialDesign的译文已经清楚知道怎么去全面设计。除了Toolbar和Palette这篇文章还会介绍在Toolbar下使用Drawer。ToolbarToolbar是什么？大概说一下它的官方介绍。Toolbar是应用的内容的标准工具栏，可以说是Actionbar的升级版，两者不是独立关系，要使用Toolbar还是得跟ActionBar扯上关系的。相比ActionbarToolbar最明显的一点就是变得很自由，可随处放置，因为它是作为一个ViewGroup来定义使用的，所以单纯使用ActionBar已经稍显过时了，它的一些方法已被标注过时。那么它怎么使用呢，首先我们一样要用到v7的支持包，然后定义程序的主题样式，在style里得先把Actionbar去掉，有点像欲想练功，必先自宫的感觉啊。如下：/res/values/styles.xml[html]viewplaincopyresourcesxmlns:android==AppBaseThemeparent=Theme.AppCompat.Light.NoActionBar!--toolbar（actionbar）颜色--itemname=colorPrimary#4876FF/item!--状态栏颜色--itemname=colorPrimaryDark#3A5FCD/item!--窗口的背景颜色--itemname=android:windowBackground@android:color/white/item!--SearchView--itemname=searchViewStyle@style/MySearchViewStyle/item/stylestylename=AppThemeparent=@style/AppBaseTheme/stylestylename=MySearchViewStyleparent=Widget.AppCompat.SearchView!--Backgroundforthesearchquerysection(e.g.EditText)itemname=queryBackground.../itemBackgroundfortheactionssection(e.g.voice,submit)itemname=submitBackground.../itemClosebuttoniconitemname=closeIcon.../itemSearchbuttoniconitemname=searchIcon.../itemGo/commitbuttoniconitemname=goIcon.../itemVoicesearchbuttoniconitemname=voiceIcon.../itemCommiticonshowninthequerysuggestionrowitemname=commitIcon.../itemLayoutforquerysuggestionrowsitemname=suggestionRowLayout.../item--/style/resources[html]viewplaincopyresourcesxmlns:android==AppBaseThemeparent=Theme.AppCompat.Light.NoActionBar!--toolbar（actionbar）颜色--itemname=colorPrimary#4876FF/item!--状态栏颜色--itemname=colorPrimaryDark#3A5FCD/item!--窗口的背景颜色--itemname=android:windowBackground@android:color/white/item!--SearchView--itemname=searchViewStyle@style/MySearchViewStyle/item/stylestylename=AppThemeparent=@style/AppBaseTheme/stylestylename=MySearchViewStyleparent=Widget.AppCompat.SearchView!--Backgroundforthesearchquerysection(e.g.EditText)itemname=queryBackground.../itemBackgroundfortheactionssection(e.g.voice,submit)itemname=submitBackground.../itemClosebuttoniconitemname=closeIcon.../itemSearchbuttoniconitemname=searchIcon.../itemGo/commitbuttoniconitemname=goIcon.../itemVoicesearchbuttoniconitemname=voiceIcon.../itemCommiticonshowninthequerysuggestionrowitemname=commitIcon.../itemLayoutforquerysuggestionrowsitemname=suggestionRowLayout.../item--/style/resources去除Actionbar最简单的方法就是直接继承NoActionBar的主题了。颜色的属性说明，还是下面这张图最清楚了：另外，SearchView在AppCompat中提供了更强的可定制性和更多的样式可供设置，不过一般我们用默认的就行。还有我们可以在values-v21给API21的系统版本设置默认的底部导航栏默认的颜色：/res/values-v21/styles.xml[html]viewplaincopyresourcesxmlns:android==AppThemeparent=@style/AppBaseTheme!--底部导航栏颜色--itemname=android:navigationBarColor#4876FF/item/style/resources[html]viewplaincopyresourcesxmlns:android==AppThemeparent=@style/AppBaseTheme!--底部导航栏颜色--itemname=android:navigationBarColor#4876FF/item/style/resources设置好主题的下一步工作：在xml的layout中定义一个Toolbar：/layout/toolbar.xml[html]viewplaincopy?xmlversion=1.0encoding=utf-8?android.support.v7.widget.Toolbarxmlns:android=:app=:id=@+id/toolbarandroid:layout_width=match_parentandroid:layout_height=wrap_contentandroid:background=?attr/colorPrimaryandroid:minHeight=?attr/actionBarSizeapp:popupTheme=@style/ThemeOverlay.AppCompat.Lightapp:theme=@style/ThemeOverlay.AppCompat.ActionBar/android.support.v7.widget.Toolbar[html]viewplaincopy?xmlversion=1.0encoding=utf-8?android.support.v7.widget.Toolbarxmlns:android=:app=:id=@+id/toolbarandroid:layout_width=match_parentandroid:layout_height=wrap_contentandroid:background=?attr/colorPrimaryandroid:minHeight=?attr/actionBarSizeapp:popupTheme=@style/ThemeOverlay.AppCompat.Lightapp:theme=@style/ThemeOverlay.AppCompat.ActionBar/android.support.v7.widget.Toolbar我们把toolbar作为一个独立的布局xml，方便在其他布局里include进去。可以看到我们在这里是可以设置Toolbar的属性的，初上面的外还有以下的属性，都是见名知意的就不一一说明了。然后在activity的布局里把它include进去就行了，当然一般把它放到最上面了，有需要你是可以把它放到中间、底部或其它位置的，可见它的自由度是很高的。在下一步呢就到代码了，在onCreate中：[java]viewplaincopymToolbar=(Toolbar)findViewById(R.id.toolbar);//toolbar.setLogo(R.drawable.ic_launcher);mToolbar.setT