符合Material Design的抽屜導(dǎo)航效果

• 原文鏈接 : Navigation Drawer styling according to Material Design
• 譯者 : wly2014
• 校訂者: chaossss
• 狀態(tài) : 校訂完成

前言：

現(xiàn)在看來(lái)，抽屜式導(dǎo)航已成為主流導(dǎo)航模式之1。雖然廣受批評(píng)，但我還是很喜歡該樣式，因此我決定在我寫的幾個(gè)app上添加這個(gè)控件。這篇文章想通過(guò)介紹我覺(jué)得抽屜式導(dǎo)航有趣的地方，幫助瀏覽本文的 Android 開發(fā)者們學(xué)習(xí)到1些知識(shí)，同時(shí)從其他人的評(píng)論中學(xué)習(xí)到更多的東西。

這是3篇文章中的第2篇。歡迎查看第1篇和第3篇：

* [Material Design下的抽屜導(dǎo)航的大小](https://medium.com/@sotti/navigation-drawer-styling-under-material-design-f0767882e692)
* Material Design下的抽屜效果的行動(dòng)（敬請(qǐng)期待）

你可以從下面查看Material Design指南上關(guān)于抽屜導(dǎo)航的部份：

* [Navigation Drawer pattern](http://www.google.com/design/spec/patterns/navigation-drawer.html)
* [Material Design metrics and keylines](http://www.google.com/design/spec/layout/metrics-keylines.html#)
* [Toolbar metrics](http://www.google.com/design/spec/layout/structure.html#structure-toolbars)

開始：

抽屜式導(dǎo)航1直以來(lái)都是被爭(zhēng)辯的熱門話題。當(dāng) Material Design 規(guī)范剛發(fā)布的時(shí)候，抽屜式導(dǎo)航就在規(guī)范中處在1個(gè)為難的位置，使得開發(fā)者們很困惑到底要不要使用抽屜式導(dǎo)航，乃至在 Material Design 規(guī)范下的開發(fā)指南出來(lái)以后，有關(guān)如何在 Android 開發(fā)中對(duì)待抽屜式導(dǎo)航都沒(méi)有1個(gè)清晰的答案。

現(xiàn)在，雖然這兒已有1些漂亮的庫(kù)，乃至有1些Google的源碼能拿來(lái)看看… 但是，你之所以還來(lái)到這里，多是由于你熱中于編程。

在這篇文章里，我將會(huì)談?wù)撊绾问褂贸閷系臉邮剑瞧鋵?shí)不會(huì)完全觸及 Material Design 指南上的所有樣式，只是撿1些我認(rèn)為需要強(qiáng)調(diào)的東西。

準(zhǔn)備好了嗎？

位置

在過(guò)去，抽屜式導(dǎo)航欄 和 ActionBar 處于同1個(gè) View 層級(jí)

隨著這類設(shè)計(jì)模式的發(fā)展，其中相互矛盾的地方也開始浮出水面……在 Material Design 中很清晰地指出：處于不同 View 層級(jí)的兩個(gè)頁(yè)面，是不能共存于同1個(gè)父布局中的同1個(gè) View 層級(jí)的。有關(guān)這個(gè)問(wèn)題引發(fā)了許多討論，但更重要的是， Google 并沒(méi)有給出好的解釋，不過(guò)最后抽屜式導(dǎo)航還是得到了1個(gè)被認(rèn)可的定義：

左抽屜式導(dǎo)航打開后，導(dǎo)航欄的高度應(yīng)當(dāng)和屏幕1致，但要低于狀態(tài)欄。另外，其他任何在抽屜層以下的內(nèi)容都應(yīng)當(dāng)被陰影覆蓋，但這些內(nèi)容又是可見(jiàn)的。

左邊的導(dǎo)航抽屜橫跨屏幕的高度并覆蓋下方的狀態(tài)欄。抽屜下的東西將會(huì)變暗。但還是可見(jiàn)的。

注意圖中右側(cè)的抽屜略有不同。

注：我假定你使用的是AppCompat toolbar

既然toolbar是View 層級(jí)的另外一個(gè)view，無(wú)妨就就將toolbar置于抽屜的layout之下，跟其他的view1樣。

如果你在Google利用上看到以下的東西也不用擔(dān)心：

Google+ Photos多是最后1個(gè)使用抽屜，卻沒(méi)有覆蓋ActionBar/Toolbar的Google利用，但是我想他應(yīng)當(dāng)很快就會(huì)被改過(guò)來(lái)。

旋轉(zhuǎn)標(biāo)題圖標(biāo)

你還記得當(dāng)抽屜打開時(shí)那個(gè)ActionBar/Toolbar中的漂亮的圖標(biāo)動(dòng)畫嗎？這個(gè)動(dòng)畫在Holo主題下其實(shí)不是很好看，在 Matarial Design 下卻很漂亮。

我覺(jué)得當(dāng)它第1次出現(xiàn)在Google Play Store時(shí)，很多的開發(fā)者和設(shè)計(jì)師都會(huì)很喜歡它。

僅在那數(shù)周以后，抽屜式導(dǎo)航上就開始出現(xiàn)該動(dòng)畫。那時(shí)它顯得很特別，由于在Google Material Design videos 和 promo features上都出現(xiàn)了它的身影。

我記得很多人在第1次遵守 Matarial Design 規(guī)范開發(fā)時(shí)，就是使用這個(gè)漢堡/箭頭圖標(biāo)動(dòng)畫。Google第1次實(shí)現(xiàn)這個(gè)抽屜式導(dǎo)航欄的時(shí)候，其實(shí)不是把它放在 ToolBar 的上面，因此你可以看到這個(gè)精美的動(dòng)畫。但是 Material Design 指南發(fā)布后，出現(xiàn)了1個(gè)很奇怪的現(xiàn)象，很多的Google利用都在做與 Material Design 指南背道而馳的事情。即便是現(xiàn)在我寫這篇博文的時(shí)候，大部份的利用還是在遵守著 Material Desgin 指南，但我還是希望抽屜式導(dǎo)航欄都能在 Toolbar 上面。

在我看來(lái)，Material Design發(fā)布的已有點(diǎn)晚了。由于圖標(biāo)動(dòng)畫已出現(xiàn)在發(fā)布了的SDK中并且在默許情況下被使用了。

由于某些緣由，即便要求把抽屜導(dǎo)航欄布局到其他的view之上，但大多數(shù)的google利用還是會(huì)有這樣的動(dòng)畫(注：在寫下這篇文章的時(shí)候，Gmail和Inbox已停用了)，即便你很難發(fā)現(xiàn)它（但如果你仔細(xì)看的話，在緩慢的移動(dòng)抽屜式導(dǎo)航時(shí)，還是可以看到動(dòng)畫的）。讓我很不爽的是：1旦你看到了，又會(huì)每次都忍不住去看，得不償失。因此，我也決定關(guān)掉這類動(dòng)畫效果。

第1眼看來(lái)，DrawerArrowStyle的參數(shù)很容易懂：

< item name=”spineBars”> true < /item>

Android Developers中定義以下：

在移動(dòng)抽屜導(dǎo)航欄的進(jìn)程中，不管圖標(biāo)是不是應(yīng)當(dāng)旋轉(zhuǎn)，都要設(shè)定1個(gè)布爾值：要末是 true，要末是false.

但問(wèn)題是，這其實(shí)不能起到作用。如果你設(shè)置為false，bars就會(huì)以1種奇怪的方式旋轉(zhuǎn)。

我發(fā)現(xiàn)的解決的方式是：覆寫onDrawerSlide方法。見(jiàn)下面鏈接的Gist。

既然這個(gè)圖標(biāo)動(dòng)畫的可視性較差，那就沒(méi)有必要再保存它了。如果你不注意看，你就看不到它，但當(dāng)你注意看并看到的時(shí)候，又不知道是怎樣回事。

資料圖片

這張個(gè)人頭像是圓形的，我們有很多方法能讓圖片變成圓形，但我每次需要實(shí)現(xiàn)這個(gè)需求想起的都是 Romain Guy 的方法。所以這次我還是使用了 Romain Guy 的 CircleImageView，畢竟“信RM，無(wú)BUG”。有人可能會(huì)提到 Google IO 大會(huì)上被使用的那個(gè) App，我還沒(méi)去了解過(guò)它的具體實(shí)現(xiàn)，可能值得我們看1看吧。

在Google Paly Movies與Google Paly Books上，這個(gè)圖片有1個(gè)白色的邊框。而其他的Google app上卻沒(méi)有。Google+和Hangouts的資料圖片在toolbar上，不過(guò)卻有白邊框。

注意：查看資料圖片大小

資料圖片是圓形的，通常沒(méi)有邊框。建議你通過(guò)Romain Guy推出的庫(kù)來(lái)取得圓形。

封面圖片

封面圖片（不同于資料圖片），是賬號(hào)/頭像部份的背景（就是抽屜式導(dǎo)航的上部，通常你可以在此切換賬號(hào)，查看昵稱，email和你的資料圖片）。

這塊的文字是白色的，并且要確保能看的見(jiàn)，你可以利用1個(gè)前景或半透明的黑色來(lái)覆蓋封面圖片。我試了1下，發(fā)現(xiàn)40⑸0% 的黑色是最好的。要注意的是，不要既弄得圖片不可見(jiàn)，又弄得文字沒(méi)法讀。

我是在FrameLayout中加1個(gè)前景。但我不知道這是否是最好的方法，歡迎大家交換。我并沒(méi)有實(shí)現(xiàn)在賬號(hào)切換的功能，而且這全部layout/section都是可點(diǎn)擊的，有touch反饋，或是Lollipop中的ripple，或二者。固然你也能夠使用centerCrop scaleType 讓它更漂亮。

仔細(xì)看1下這個(gè)圖片，你會(huì)發(fā)現(xiàn)其實(shí)它在狀態(tài)欄下也是可見(jiàn)的。當(dāng)我寫下這行字的時(shí)候，Google apps正在利用這類效果。Gmail，Inbox，Keep，Playe Story和Hangouts已實(shí)現(xiàn)了，而其他的也準(zhǔn)備實(shí)現(xiàn)它。固然，這只是Lollipop及以上的版本中才會(huì)有的效果。

即便是現(xiàn)在，在Play Store 上的Google IO 的有些利用的抽屜式導(dǎo)航也是完全錯(cuò)的，但他們?cè)诟倪M(jìn)代碼，并且準(zhǔn)備下1個(gè)版本了（不過(guò)好像有段時(shí)間了… 可能會(huì)在今年幾個(gè)月后的Google IO 大會(huì)之前更新）

比較奇異的是Google ScrimInsets layout。拷貝，粘貼，然后自己試著修修改改就OK了。我覺(jué)得Google的人員應(yīng)當(dāng)比我做的更好。深入的瀏覽1下gist上的代碼，了解1下關(guān)于 themes/styles 的更多的詳細(xì)內(nèi)容，能讓你有更好地表現(xiàn)。

讓我有點(diǎn)疑惑就是ScrimInsets layout能不能利用到Lollipop以下的版本中。我知道在Kit Kat中是可行的，但是Google并沒(méi)這樣做。可以肯定的是“擠滿”狀態(tài)欄和/或?qū)Ш綑谠贚ollipop下的版本中其實(shí)不存在，這多是背后的1個(gè)緣由。

注意：查看封面照片的大小

只有在Lollipop中，抽屜導(dǎo)航會(huì)出現(xiàn)在狀態(tài)欄之下。在Lollipop之下的版本中，擠滿狀態(tài)或?qū)Ш綑谄鋵?shí)不是甚么事情，這多是其中的緣由。

可選中行的背景，圖標(biāo)和文字

當(dāng)要更改抽屜中的主要行的樣式的時(shí)候，對(duì)每行的每一個(gè)元素，我們都要處理其中的3個(gè)子元素（背景，圖標(biāo)，文本）和3個(gè)不同的狀態(tài)（默許，選中，點(diǎn)擊）。但每個(gè)開發(fā)者都需要明白：開發(fā) App 不需要完全遵守規(guī)范 ，但是了解規(guī)范又是必不可少的，大家可以看看 Google 的 App 和其他的1些好看的apps是怎樣體現(xiàn) Material Desgin 所包括的思想的，把你從這些 App 里總結(jié)出來(lái)的東西利用到你的 App 中。

Okay，現(xiàn)在來(lái)看1下Google apps 都有哪些特點(diǎn)。在下面的圖片中，第1行是默許的狀態(tài)，第2行是選中的狀態(tài)，第3行是點(diǎn)擊的狀態(tài)。

雖然上面的圖片看起來(lái)很類似，但其實(shí)它們是不1樣的。總結(jié)1下就是：

Google apps看起來(lái)10分的聯(lián)貫，但是當(dāng)你注意下細(xì)節(jié)時(shí)就會(huì)發(fā)現(xiàn)，此時(shí)抽屜式導(dǎo)航的選中行有超過(guò)10多種的樣式。

• 拇指規(guī)則：

在自己不斷地嘗試并參考了設(shè)計(jì)指南與Google apps后，這是我提出的1些想法：

如何實(shí)現(xiàn)

雖然我想知道，但是沒(méi)人告知我他是怎樣來(lái)實(shí)現(xiàn)的，所以我自己就這么做了。

首先，使用兩個(gè)drawable作為背景。1個(gè)放在res/drawable-v21里，為L(zhǎng)ollipop及以上的版本使用；另外一個(gè)在res/drawable中，目標(biāo)是更低的版本。由于ripple在5.0以下的版本中其實(shí)不存在。

僅在Lollipop及以上的版本中使用ripple。Ripples其實(shí)不支持5.0以下的版本。

每當(dāng)你點(diǎn)擊1行的時(shí)候，ripple就會(huì)出現(xiàn)，不管它選中與否。因此，你在res/drawable-v21中的是有1組包括ripple的items的selector。這是由于我們希望對(duì)選中和未選中的行，在被點(diǎn)擊時(shí)都能顯示相同的ripple，但是未選中的背景是白色，而選中的item的背景是grey_200。

另外在res/drawable中，你需要的是1個(gè)不包括ripple的selector。

圖標(biāo)

在最近的幾個(gè)月里，我嘗試讓同1圖標(biāo)顯現(xiàn)出不同的色彩來(lái)。 因此，我就把所有的圖標(biāo)都先弄成白色，然后在用想要的色彩進(jìn)行著色。這樣做的優(yōu)點(diǎn)是，你沒(méi)必要每次創(chuàng)建1個(gè)新的圖標(biāo)。你可以先從Google上得到不同大小和色彩的這些圖標(biāo)，再用不同的色彩進(jìn)行2次加工，看看那種效果最好。另外你要是使用不同色彩的同1圖標(biāo)的話，要記得保存成相同的大小。如果你需要根據(jù)狀態(tài)（點(diǎn)擊，選中…）來(lái)改變它的色彩的話，可以設(shè)置1個(gè)color state list resource。

我實(shí)現(xiàn)的方式是在1個(gè)自定義的ImageView中編寫的，由于color state list在Kit Kat及其1下的版本中其實(shí)不可用（android:tint中可使用color，但是不能用color state）。

看1下下面鏈接中的gist中我是如何做的。如果你發(fā)現(xiàn)了更好的方式，或毛病，請(qǐng)反饋給我。

Header和footer的表現(xiàn)

頭部（aka account section）中有些是不可滑動(dòng)的，而有些是可滑動(dòng)的。以我看來(lái)，如果可以的話，最好設(shè)計(jì)成不可滑動(dòng)的。這樣的話，抽屜式導(dǎo)航看起來(lái)更美觀，聯(lián)貫，易用。

底部（aka setting and support）可以是可滑動(dòng)的，也能夠不是。如果你看1下Google Apps，就會(huì)發(fā)現(xiàn)有些是不可滑動(dòng)的，而有些是在可滑動(dòng)的scroll的底部。如果你有需求是不能放在抽屜的底部的話，那就放在能滑動(dòng)的列表的后面。

再次強(qiáng)調(diào)1下，在我看來(lái)，不可滑動(dòng)是最好的方式，但是也能夠有例外。比如，當(dāng)頭部不可滑動(dòng)時(shí)，有些條目就被固定了，因此在抽屜里就有了可轉(zhuǎn)動(dòng)的區(qū)域了。但是如果可轉(zhuǎn)動(dòng)的空間太小，那末看起來(lái)就很糟了（只有1行或兩行），要想得到更多的空間，那末1個(gè)好的辦法就是將footer 消除固定。

頭部和底部理應(yīng)被固定住，除非抽屜需要更多的空間以表現(xiàn)更出色。

由于抽屜選項(xiàng)，路徑，結(jié)構(gòu)…的不同，因此這里其實(shí)并沒(méi)有甚么拇指法則。

資源

-Google Official Material Design icons
-Material Design Color Definitions

代碼

-Github項(xiàng)目地址

總結(jié)

這是關(guān)于如何更改抽屜式導(dǎo)航的樣式，你仍需要花費(fèi)很多時(shí)間來(lái)想清楚你想做成甚么樣，而這要比做到花費(fèi)的時(shí)間要長(zhǎng)的多。

如果你想要了解更改抽屜式導(dǎo)航的樣式，請(qǐng)看看另兩篇文章。

歡迎評(píng)論，反饋…

Hava fun！