符合Material Design的抽屜導航效果

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

前言：

現在看來，抽屜式導航已成為主流導航模式之1。雖然廣受批評，但我還是很喜歡該樣式，因此我決定在我寫的幾個app上添加這個控件。這篇文章想通過介紹我覺得抽屜式導航有趣的地方，幫助瀏覽本文的 Android 開發者們學習到1些知識，同時從其他人的評論中學習到更多的東西。

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

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

你可以從下面查看Material Design指南上關于抽屜導航的部份：

* [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)

開始：

抽屜式導航1直以來都是被爭辯的熱門話題。當 Material Design 規范剛發布的時候，抽屜式導航就在規范中處在1個為難的位置，使得開發者們很困惑到底要不要使用抽屜式導航，乃至在 Material Design 規范下的開發指南出來以后，有關如何在 Android 開發中對待抽屜式導航都沒有1個清晰的答案。

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

在這篇文章里，我將會談論如何使用抽屜的樣式，但是其實不會完全觸及 Material Design 指南上的所有樣式，只是撿1些我認為需要強調的東西。

準備好了嗎？

位置

在過去，抽屜式導航欄 和 ActionBar 處于同1個 View 層級

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

左抽屜式導航打開后，導航欄的高度應當和屏幕1致，但要低于狀態欄。另外，其他任何在抽屜層以下的內容都應當被陰影覆蓋，但這些內容又是可見的。

左邊的導航抽屜橫跨屏幕的高度并覆蓋下方的狀態欄。抽屜下的東西將會變暗。但還是可見的。

注意圖中右側的抽屜略有不同。

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

既然toolbar是View 層級的另外一個view，無妨就就將toolbar置于抽屜的layout之下，跟其他的view1樣。

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

Google+ Photos多是最后1個使用抽屜，卻沒有覆蓋ActionBar/Toolbar的Google利用，但是我想他應當很快就會被改過來。

旋轉標題圖標

你還記得當抽屜打開時那個ActionBar/Toolbar中的漂亮的圖標動畫嗎？這個動畫在Holo主題下其實不是很好看，在 Matarial Design 下卻很漂亮。

我覺得當它第1次出現在Google Play Store時，很多的開發者和設計師都會很喜歡它。

僅在那數周以后，抽屜式導航上就開始出現該動畫。那時它顯得很特別，由于在Google Material Design videos 和 promo features上都出現了它的身影。

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

在我看來，Material Design發布的已有點晚了。由于圖標動畫已出現在發布了的SDK中并且在默許情況下被使用了。

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

第1眼看來，DrawerArrowStyle的參數很容易懂：

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

Android Developers中定義以下：

在移動抽屜導航欄的進程中，不管圖標是不是應當旋轉，都要設定1個布爾值：要末是 true，要末是false.

但問題是，這其實不能起到作用。如果你設置為false，bars就會以1種奇怪的方式旋轉。

我發現的解決的方式是：覆寫onDrawerSlide方法。見下面鏈接的Gist。

既然這個圖標動畫的可視性較差，那就沒有必要再保存它了。如果你不注意看，你就看不到它，但當你注意看并看到的時候，又不知道是怎樣回事。

資料圖片

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

在Google Paly Movies與Google Paly Books上，這個圖片有1個白色的邊框。而其他的Google app上卻沒有。Google+和Hangouts的資料圖片在toolbar上，不過卻有白邊框。

注意：查看資料圖片大小

資料圖片是圓形的，通常沒有邊框。建議你通過Romain Guy推出的庫來取得圓形。

封面圖片

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

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

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

仔細看1下這個圖片，你會發現其實它在狀態欄下也是可見的。當我寫下這行字的時候，Google apps正在利用這類效果。Gmail，Inbox，Keep，Playe Story和Hangouts已實現了，而其他的也準備實現它。固然，這只是Lollipop及以上的版本中才會有的效果。

即便是現在，在Play Store 上的Google IO 的有些利用的抽屜式導航也是完全錯的，但他們在改進代碼，并且準備下1個版本了（不過好像有段時間了… 可能會在今年幾個月后的Google IO 大會之前更新）

比較奇異的是Google ScrimInsets layout。拷貝，粘貼，然后自己試著修修改改就OK了。我覺得Google的人員應當比我做的更好。深入的瀏覽1下gist上的代碼，了解1下關于 themes/styles 的更多的詳細內容，能讓你有更好地表現。

讓我有點疑惑就是ScrimInsets layout能不能利用到Lollipop以下的版本中。我知道在Kit Kat中是可行的，但是Google并沒這樣做。可以肯定的是“擠滿”狀態欄和/或導航欄在Lollipop下的版本中其實不存在，這多是背后的1個緣由。

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

只有在Lollipop中，抽屜導航會出現在狀態欄之下。在Lollipop之下的版本中，擠滿狀態或導航欄其實不是甚么事情，這多是其中的緣由。

可選中行的背景，圖標和文字

當要更改抽屜中的主要行的樣式的時候，對每行的每一個元素，我們都要處理其中的3個子元素（背景，圖標，文本）和3個不同的狀態（默許，選中，點擊）。但每個開發者都需要明白：開發 App 不需要完全遵守規范 ，但是了解規范又是必不可少的，大家可以看看 Google 的 App 和其他的1些好看的apps是怎樣體現 Material Desgin 所包括的思想的，把你從這些 App 里總結出來的東西利用到你的 App 中。

Okay，現在來看1下Google apps 都有哪些特點。在下面的圖片中，第1行是默許的狀態，第2行是選中的狀態，第3行是點擊的狀態。

雖然上面的圖片看起來很類似，但其實它們是不1樣的。總結1下就是：

Google apps看起來10分的聯貫，但是當你注意下細節時就會發現，此時抽屜式導航的選中行有超過10多種的樣式。

• 拇指規則：

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

如何實現

雖然我想知道，但是沒人告知我他是怎樣來實現的，所以我自己就這么做了。

首先，使用兩個drawable作為背景。1個放在res/drawable-v21里，為Lollipop及以上的版本使用；另外一個在res/drawable中，目標是更低的版本。由于ripple在5.0以下的版本中其實不存在。

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

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

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

圖標

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

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

看1下下面鏈接中的gist中我是如何做的。如果你發現了更好的方式，或毛病，請反饋給我。

Header和footer的表現

頭部（aka account section）中有些是不可滑動的，而有些是可滑動的。以我看來，如果可以的話，最好設計成不可滑動的。這樣的話，抽屜式導航看起來更美觀，聯貫，易用。

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

再次強調1下，在我看來，不可滑動是最好的方式，但是也能夠有例外。比如，當頭部不可滑動時，有些條目就被固定了，因此在抽屜里就有了可轉動的區域了。但是如果可轉動的空間太小，那末看起來就很糟了（只有1行或兩行），要想得到更多的空間，那末1個好的辦法就是將footer 消除固定。

頭部和底部理應被固定住，除非抽屜需要更多的空間以表現更出色。

由于抽屜選項，路徑，結構…的不同，因此這里其實并沒有甚么拇指法則。

資源

-Google Official Material Design icons
-Material Design Color Definitions

代碼

-Github項目地址

總結

這是關于如何更改抽屜式導航的樣式，你仍需要花費很多時間來想清楚你想做成甚么樣，而這要比做到花費的時間要長的多。

如果你想要了解更改抽屜式導航的樣式，請看看另兩篇文章。

歡迎評論，反饋…

Hava fun！