http://wiki.jikexueyuan.com/project/android-weekly/images/issue-145/1-hLe32r_m-fWUQrnJCalKkQ.png" alt="Material" />
導航制圖工具似乎應該在這里介紹。除了一些 criticism 我也喜歡模式，所以我決定在我研究的幾個應用程序上實現(xiàn)它。你在這里可以閱讀到的僅僅是我對于它感興趣的想法，希望能夠幫助互相幫助互相學習。
這是三個出版物的第二版。看看第一章和第三章：
你可以從這里瀏覽關于導航制圖工具的 Material 設計指南：
制圖工具總是熱門話題。當 Material 設計概念開始出現(xiàn)時，人們有一些困惑，甚至后來指南產(chǎn)生，概念也沒有完全清晰。
現(xiàn)在有很棒的庫出現(xiàn)，甚至一些 Google 代碼來查看???但是如果你查看這些，有可能是因為你覺得代碼好玩。
在這里我將要談論制圖工具的樣式。它并沒有覆蓋全部你可以在指南中看到的樣式，只是一些我觀點中指出的東西。
準備好了嗎？
過去，Navigation Drawer 和 ActionBar 處于相同層次的視圖中。
http://wiki.jikexueyuan.com/project/android-weekly/images/issue-145/1-Vh9mKyCUMDCFMFjM8ZEG9Q.png" alt="Material" />
隨著模式演化，開始有一些不一致。當 Material 設計出現(xiàn)時，可以很清楚的看到這兩部分不再處于視圖的同一層次中。關于這點有許多討論，甚至更多，但是 Google 沒有給出太多有用的東西，而現(xiàn)在導航制圖工具的位置定義如下：
左側(cè)導航制圖工具跨屏幕的整個高度，制圖工具處于狀態(tài)欄下方。所有制圖工具下的東西都被幕布遮住變暗。幕布下的內(nèi)容仍然是可見的。
http://wiki.jikexueyuan.com/project/android-weekly/images/issue-145/1-Gg34WwPMo1ylOX7KLPaY0w.png" alt="Material" />
注意圖片中右側(cè)的制圖工具有些不同。
由于工具欄是另一個視圖層次結(jié)構(gòu)，所以就像你處理其他視圖一樣，只是定位制圖工具布局下的工具欄。
如果你在一些 Google 應用程序中看到如下所示的東西，不用擔心：
http://wiki.jikexueyuan.com/project/android-weekly/images/issue-145/1-ncHm2VDOAU4GRN5Act_P5A.png" alt="Material" />
Google+ 照片可能是最后一個制圖工具沒有在 actionBar/Toolbar 上的 Google 應用程序，我相信下次更新會修復這個問題。
你還記得當打開制圖工具時，在 actionBar/toolbar 出現(xiàn)的別致的圖標動畫嗎？在 Holo 中，動畫并不別致，但是 Material 設計使得動畫看起來非常棒。
http://wiki.jikexueyuan.com/project/android-weekly/images/issue-145/1-QfXDV7tpaGwEqil_l6Pe8Q.gif" alt="Material" />
我認為它首先出現(xiàn)在 Google 的 Play Store 中，然后多數(shù)開發(fā)人員和設計師都喜歡它。
但是不久之后，在動畫上出現(xiàn)了制圖工具，如前部分解釋的那樣。在當時是非常奇怪的，因為它也出現(xiàn)在 Google 的 Material 設計視頻和商品推銷功能中。
http://wiki.jikexueyuan.com/project/android-weekly/images/issue-145/1-XI72aAgZON-g0F_Teo6kiA.jpeg" alt="Material" />
我記得當遷移到 material 設計時，大多數(shù)人表現(xiàn)的像第一件要做的事是 burger/arrow 的事。在第一個 Google 實現(xiàn)中，制圖工具不在工具欄的上方，且你也不會看到華麗的動畫效果。指南出現(xiàn)之后，有一段奇怪的時刻，Google 應用程序做的正好與 Material 設計指南告訴我們的相反。而現(xiàn)在我寫這篇文章時，Google 應用程序是遵循指南的，并且我希望不久以后看到全部應用程序中制圖工具都在工具欄的上方。
在我看來，那個設計決定實在是晚了。圖標的動畫已經(jīng)默認的由 SDK 釋放和激活。
出于某種原因，即使布局之后，制圖工具處于一切工具的上方，大多數(shù) Google 應用程序仍然有動畫(注意：在寫這一條目的過程中，Gmail 和 Inbox 已經(jīng)停用了)，即使你只能偶爾見到(如果你注意并且緩慢的移動制圖工具就可以看到它)。這點讓我難以接受，一旦你見到它，也不能視而不見。所以我決定把它關掉。
當你第一次在 DrawerArrowStyle 中看到如下的選項時，看起來非常容易：
在過渡期間條是否應該旋轉(zhuǎn)。必須是一個布爾值，“true”或者“false”。
問題是它不起作用。如果你將它設置為“false”，那么條會一種奇怪的方式旋轉(zhuǎn)。
我發(fā)現(xiàn)禁用它的方法是覆蓋 onDrawerSlide 方法?？纯聪旅娴?Gist linked。
由于圖標動畫隱約可見，因此沒有理由繼續(xù)保留它。如果你不留意就不會看見它，如果你留意并且看到了它，卻不理解正在發(fā)生什么。
資料圖片是圓形的。得到一個圓形的圖像有不同的方法，但我始終記得 Romain Guy 在這篇文章中談到的方法。所以我決定使用 CircleImageView，它是基于 Romain Guy 的技術的，不會有錯。我還沒有檢查 Google IO 應用程序上使用的方法，但是可能值得去看一看。
在 Google Play Movies 和 Google Play Books 中的圖像有一個白色的邊框。其他 Google 應用程序中沒有這個邊框。Google+ 和 Hangouts 在工具欄中有資料圖片，雖然它也有白色的邊框。
http://wiki.jikexueyuan.com/project/android-weekly/images/issue-145/1-58WoVNOl-JIRyp1o3_f9JQ.jpeg" alt="Material" />
http://wiki.jikexueyuan.com/project/android-weekly/images/issue-145/1-v5KQiG7MNlpFdCjSk0WHqQ.jpeg" alt="Material" />
注意：檢查一下資料圖片的大小
這個資料圖片是圓形的，通常沒有邊框。確保你的帶有庫的圓形圖片是遵循Romain推薦的技術得到的。
封面圖片(不同于資料圖片)，是 account/header 部分(這是上一部分，通常你可以在你的賬戶之間改變，看到你的顯示名稱，電子郵箱和你的資料圖片)的背景。
這個區(qū)域的文本是白色的，并且為了確保它可見，你可以應用前景或半透明的黑色覆蓋封面圖片。我嘗試了不同的透明度，發(fā)現(xiàn)透明度為 40-50% 的黑色是不錯的。你不想看不見照片，也不想使文本不可讀。
我所做的是在 FrameLayout 中應用前景。我不知道這是不是最好的方法，希望得到一些反饋。我沒有可以切換的賬戶，對我來說，整個布局/部分是可點擊的，帶有觸感反饋或 Lollipop 的連鎖反應或全部。確保你使用 centerCrop 的 scaleType 來使它看起來更好。
http://wiki.jikexueyuan.com/project/android-weekly/images/issue-145/1-JnT0ei6pp-M7Fn0ZZxl-yg.jpeg" alt="Material" />
如果你查看上面圖片，制圖工具是可見的，且在狀態(tài)欄的下方。此刻我寫這點時，Google 應用程序仍然處于遷移到這種模式的過程中。 Gmail, Inbox, Keep, Play Store 和 Hangouts 已經(jīng)有這種布局，而其他的應用程序正在進行中。此刻，這只發(fā)生在運行在 Lollipop 和以上版本中的應用程序中。
http://wiki.jikexueyuan.com/project/android-weekly/images/issue-145/1-0K95PBc-Ym1quF4S4-svlw.png" alt="Material" />
http://wiki.jikexueyuan.com/project/android-weekly/images/issue-145/1-eYUlXFl-nKp54CbhSqHy5Q.png" alt="Material" />
盡管當前在 Play Store 的 Google IO 應用程序中，導航制圖工具是完全錯誤的，但是它們有更好的代碼，并且為下一版本的發(fā)布(看起來還需要一段時間...從現(xiàn)在開始到幾個月后的 Google IO 會議之前可能一直更新)做好了準備。
神奇的地方在 Google ScrimInsets layout 中。復制，粘貼，完成。你可以試著做。我覺得 Google 的員工會比我做的更好?？纯聪旅娴拇a部分?？纯匆c中的代碼，因為它也需要用到主題/樣式。
ScrimInsets 布局能否應用于低于 Lollipop 的版本中，我也不清楚。然而我知道將它用于 Kit Kat 中是可能的，但是 Google 不這樣做。的確，“入侵”狀態(tài)欄和/或?qū)Ш綑诓皇?Lollipop 下的事，并且可能這就是其原因。
注意：查看封面圖片的大小
狀態(tài)欄下的導航制圖工具只會在 Lollipop 中出現(xiàn)。入侵狀態(tài)欄或?qū)Ш綑诓?Lollipop 下的事，因此這可能就是不會發(fā)生的原因。
http://wiki.jikexueyuan.com/project/android-weekly/images/issue-145/1-l38m8vKyELP23Fgo0VIYLg.png" alt="Material" />
當談論到為制圖工具中的主要行制訂樣式時，我們需要為每一行的每一個單元解決3個元素(背景，圖標和文本)和3種不同的狀態(tài)(默認，選中和按下)。并不是所有的東西都按照說明來寫，但是我們必須閱讀說明，看看Google應用程序和其他看起來不錯的應用程序，試圖找出怎樣能使它以Material 設計的方式看起來不錯的方法。
好的，現(xiàn)在讓我們看看一些 Google 應用程序來收集一些線索。在接下來的圖片中，第一行是默認的狀態(tài)，第二行是選中的狀態(tài)，第三行是按下的狀態(tài)。
http://wiki.jikexueyuan.com/project/android-weekly/images/issue-145/1-cbbbhJcPwsrL6XuF_7B-BA.jpeg" alt="Material" />
http://wiki.jikexueyuan.com/project/android-weekly/images/issue-145/1-S7YeU9ekl1_nC03isgeVBw.jpeg" alt="Material" />
http://wiki.jikexueyuan.com/project/android-weekly/images/issue-145/1-guYsqqXCcQikqMNMVTL1_g.jpeg" alt="Material" />
http://wiki.jikexueyuan.com/project/android-weekly/images/issue-145/1-fTlbwdydeGKNznbliR2J-g.jpeg" alt="Material" />
http://wiki.jikexueyuan.com/project/android-weekly/images/issue-145/1-rzdSKrX4NgQqwPOeNReuTw.jpeg" alt="Material" />
http://wiki.jikexueyuan.com/project/android-weekly/images/issue-145/1-ubYKjE5BgQUnuf8vXBjucA.jpeg" alt="Material" />
http://wiki.jikexueyuan.com/project/android-weekly/images/issue-145/1-W0l0rAj_f08DcYiBKhnpYQ.jpeg" alt="Material" />
http://wiki.jikexueyuan.com/project/android-weekly/images/issue-145/1-WMsmw3UZ6kzBGaMCHPWgHA.jpeg" alt="Material" />
http://wiki.jikexueyuan.com/project/android-weekly/images/issue-145/1-ZsjyMCtqBLG4iq7_ypaLUA.jpeg" alt="Material" />
http://wiki.jikexueyuan.com/project/android-weekly/images/issue-145/1-Mn1OyDGujUgv3hXi-bBggw.jpeg" alt="Material" />
http://wiki.jikexueyuan.com/project/android-weekly/images/issue-145/1-BV3ByPvh4Elbq2MKPrE-Bg.jpeg" alt="Material" />
以上所有圖片看起來相似但是它們都不相同?？偨Y(jié)：
http://wiki.jikexueyuan.com/project/android-weekly/images/issue-145/1-BXfi8inb3rWh0gRCve5uCg.jpeg" alt="Material" />
http://wiki.jikexueyuan.com/project/android-weekly/images/issue-145/1-0_cj6ynaM0rDvBmQG0WJFw.png" alt="Material" />
Google 應用程序看上去很一致，但是當你注意細節(jié)你會發(fā)現(xiàn)此刻就在我寫這篇文章時，超過 10 個應用程序在為導航制圖工具中可選的行項目制訂樣式。
經(jīng)過一些嘗試，以及查看指南和Google應用程序，這就是我提出的。
http://wiki.jikexueyuan.com/project/android-weekly/images/issue-145/1-zU5_BF4hNM3ESUqqOyn7Dw.png" alt="Material" />
http://wiki.jikexueyuan.com/project/android-weekly/images/issue-145/1-X2iLimaiz8NgrdDtbcinFg.jpeg" alt="Material" />
我真的很想知道其他人是怎樣實現(xiàn)的，這是我實現(xiàn)的方法。
首先我為背景使用兩個畫板。一個用于 Lollipop 的 res/drawable-v21 及以上版本，另一個用于較低版本的 res/drawable。原因是連鎖反應不低于 5.0。
只在 Lollipop 及以上版本中使用連鎖反應。低于 5.0 的版本不支持連鎖反應，更重要的是，不希望出現(xiàn)連鎖反應。
你每次按下一行，無論是被選中的還是未被選中的，連鎖反應就會出現(xiàn)。所以在 res/drawable-v21 中，你實際上有的是一個選擇器，它帶有幾個包含連鎖反應的項目。這是因為當按下被選中或未被選中的行時，我們想顯示相同的連鎖反應，但是未被選中的行的背景是白色，而被選中的行的背景是grey_200。
在 res/drawable，你所需的是一個選擇器，它不帶有取決于布局裝態(tài)的連鎖反應。
在上個月我嘗試的是避免同一圖標有不同選顏色。所以我想到的是我所有圖標都為白色。然后我應用了一個帶有想使用的顏色的 tint，然后你就能得到你的有顏色的圖標。這樣做的好處是當你決定改變顏色時，你不需要每次都創(chuàng)建新的圖標，你可以從 Google 得到不同大小和不同顏色的圖標，并且你可以在幾秒鐘之內(nèi)為相同的圖標設置不同的顏色，以此來找出哪一個是最好的。如果你為相同的圖標使用不同的顏色，你還可以節(jié)省空間。如果你需要根據(jù)狀態(tài)(按下，選中...)決定圖標的顏色變化，你只需要在你的 tint 上設置一個顏色狀態(tài)列表。
我是在自定義視圖中以編程的方式擴展 ImageView，因為顏色狀態(tài)欄在 Kit Kat 及以下版本中不起作用(android：tint 在顏色下起作用，但是在顏色狀態(tài)下不起作用)。
看看下面聯(lián)系的要點我是怎么做的。如果你有更好的選擇或者發(fā)現(xiàn)了錯誤，請說明。
這里的指導方針是相當靈活的。它基本上由你的設計決定。
頁眉部分(又名賬戶部分)有時固定，有時會出現(xiàn)一些可滾動。就你的設計而言，在我看來這應該是被固定的。制圖工具看起來更好，它是一致的，是獲取你的資料的最好方法。
頁腳部分(即設置和支持)可以被固定或者不被固定。如果你看看Google應用程序，有些是固定的，有些是在滾動條的底部。如果你不知道它們不能到達制圖工具的底部，那么頁腳只出現(xiàn)在主行之后。
http://wiki.jikexueyuan.com/project/android-weekly/images/issue-145/1-8HEdHs9YQq35OKtsCmAwLQ.png" alt="Material" />
http://wiki.jikexueyuan.com/project/android-weekly/images/issue-145/1-JW5RFt4JfEahP9tqH3-bPg.png" alt="Material" />
在我看來,固定是最好的方法,但你可以做一些例外。例如當你固定頁眉時,一些條目也就固定了,然后在制圖工具中有一個可滾動的部分。如果滾動部分的空間很少以至于它看起來有些蠢笨(1 或 2 行),那么你可能就想獲得更多的空間，而取消固定頁腳是一個不錯的選擇。
頁眉和頁腳應該被固定，除非制圖工具結(jié)構(gòu)需要空間來達到良好的外觀和行為。
由于制圖工具上大量的選項，路徑、結(jié)構(gòu)...這里沒有真正的經(jīng)驗法則。
這是關于制圖工具的樣式設置。知道你想要什么比做到需要的時間更多。
如果你想知道怎么為制圖工具設置樣式，看看其他兩篇文章。
我希望收到一些評論，反饋或者其他什么都好。我寫這篇文章是希望大家互相幫助互相學習。
過得愉快！
掃碼關注鍍金池微信號
手機訂課，優(yōu)惠多多
