使用安卓支持庫，Material design 無處不在

Material Design 的引入是近年來安卓開發世界里非常令人激動的事情。那些標準描述了一個美麗的 UI，但是對于開發者來說是非常具有挑戰性的，特別是它們必須具備向后兼容性。現在使用 ‘Android Design Support Library’ (之前叫做 ‘AppCompat Library’) 來支持 "Material" 將是件不難的事情。開發者們現在可以使用這個工具來很容易地構建 Material 兼容的應用，這些應用可能在所有的設備上工作，并且看起來很棒 (甚至運行在 Eclair 或者 Froyo 上)。在這篇演講中，Mike Wolfson 重點提到了這些庫中間的一些重要的組件，還演示了高效使用它們的方法。這僅僅是 Material design 的開始 - 來學學這些重要的工具吧，這會使事情變得容易而且是變革的一部分！

我是 Mike Wolfson (看 我的書 )。我是一名谷歌安卓開發專家，我知道些 Play store 是如何挑選特征應用的內部原則 ( 他們非常嚴格 )。如果你的應用不是符合 Material Design 標準的話，它是不會被 Play store 推薦的。至少你的應用需要是 Material Design 兼容的，然后他們會挑選出能讓你的應用看起來出彩的地方，但是如果你不是用的 Material Design，他們都不會關注你的應用。

延遲開發是最好的開發。Material Design 中所有的一切都要做好是很難的。但是采用 Material Design 支持庫卻可以讓我們偷一點懶，可以多花點時間上上網。最后，可能是你需要采用 Material Design 的最關鍵的原因是什么？你的應用需要在安卓上看起來不違和。

Material Design 標準的創建是為了提供一個給所有手機統一的設計語言。你的應用需要符合它：你的應用需要看起來像或者應該看起來像安卓的原生風格。

Material Design 是一套設計語言的標準。它定義了布局、字體、顏色、運動交互模式的標準。它是一個標準，它是只定義元素應該看起來是什么樣子的設計語言。它不包括你應該如何實現它的任何信息。在谷歌， 他們創建了一個頂層的范圍 ，這里你能找到 Material Design 標準，也包括比你希望了解到的更多的設計語言。

如果你去那個網站，你會看到這些信息：顏色、風格、指標、交互模式、導航的工作方式、不同的元素相互如何作用；以及你打算使用的各種元素的定義，比如：功能按鈕，導航視圖，和其他 Material Design 的主要控制組件。

一個好的例子是顏色。如果你去看 Material Design 標準，它們創建了許多的不同顏色的調色板。主要顏色 (靛青或者粉色) 是定義好了的，然后有一個調色板允許你定制不同的色調。我寫了 這個項目 來支持這個應用。在這個項目里，我抽象了每一個顏色然后創建了一個調色板能夠直接引用這些顏色 (比如：靛青_600)。

我們知道他們定義了這些顏色，但是我們不知道這些顏色用來做什么。如果你去看 Material Design 標準，它定義了這個 Material Design 顏色調色板是怎么給一個應用定制的。它有一個 primary ，一個 primaryDark 和一個 accent 顏色。 如果你想使用這些調色板，你需要用你的風格來定義這些調色板。然后系統在這個基礎上自動為你的應用著色。我們現在有統一的顏色來標識我們的應用了，它也在某種程度上也標識著系統的顏色。以前，我們需要給每一個視圖獨立著色，每一個視圖都有風格。現在它通過系統統一風格了。

如果我想有一個主要的藍色調色板，這就是我如何著色的方法。我使用藍色 500，藍色 700，和一個 accent 的黃色。它就自動地為我著色了。如果我想為我的整個應用改變調色板的話，我可以在我的風格里面改變這些顏色的標準。我們現在給我們的應用統一地打上標識了。( 就是這些繁瑣的東西讓我們沒法偷懶 )。

活版印刷 - Material 定義的風格

取代手工為應用的每個不同的用例定義字體標準的方法，我們現在可以使用統一的字體風格了 (在整個應用中統一)。如果應用 A 使用了 title ，假設我們知道那會是一個中型的 20sp 字體。為了引用這些新字體風格里面的一個，你需要給你的文字加上一個風格屬性。

支持庫：安卓有多個操作系統版本可以開發而且已經公開發布。但是，因為一些原因 (比如：生產商或者運營商拒絕)，想得到這些更新的手機是非常困難的。我們知道想在你的手機上運行最新的安卓是不容易的。這對于谷歌來說是個問題，因為他們不能推送它們最新的熱點和新功能代碼給這些老的手機。為了解決這個問題，它們創建了一個庫 ( 因為他們是谷歌，所以不是第三方庫 )這是一個隔離層：它允許我們在這些老的手機版本上使用這些新功能。如果我們可以在我們的包里發布 jar 的話，而且如果我們使用的功能本地不支持的話，我們就需要這個庫來支持這些功能。總而言之，這是一個隔離層，運行谷歌在它很老的操作系統版本上向后兼容這些新功能。

如果你想開始使用 AppCompat ，加上這兩個依賴 (基礎水平)。一旦你增加了這些依賴，你就在不同的產品和你需要的不同的功能上增加了其他的依賴。你增加了兩個基礎的庫，如果你打算使用 CardView 或者 RecyclerView (類似的東西)，你把那些依賴作為二級依賴。

一旦你增加了這些依賴，你需要在你的 XML 里面增加命名空間。這使得在 XML 里面可以有不同的屬性。

你還需要擴展 AppCompatActivity 。這是新的：我們以前是擴展 Action Bar activity，它們把它改成了 AppCompatActivity 。你需要做這些改變：給你的風格增加風格顏色，增加依賴，擴展 AppCompatActivity 。然后所有的神奇的事情就會發生了。

public class MainActivity extends AppCompatActivity {

我想深入說說那個庫里面的內容，和它的一些核心方法。AppCompat 提供了色彩敏感的控件：當我在我的統一風格的應用中定制那個顏色的時候，它們會自動地被風格化而且著好色。這就是說，給我的每個不同的控件統一風格。

RecyclerView 和 我們常常用的 ListView 類似……除了 一點也不 。

RecyclerView 是一個新的 ListView ，它有一個額外的內建功能來使得我們能給我們的列表增加數值，而且它會自動地在對這些數值插入，刪除和重排的時候產生動畫。

RecyclerView 非常強大而且可以擴展，但是使用起來難點。例如，你可以改變你的列表的布局 (像從垂直方向改到水平方向)，或者甚至多行，通過定制 LayoutManager 。你不能在 ListView 里做這些事情。現在我們用 RecyclerView 來實現 ListView 的多種風格，但是我們需要做些手動的事情來實現它，這就變得更復雜了，但是更強大。還有一個 ItemDecorators ，你可以用它來給你的列表中的每個元素增加裝飾 (比如增加一個列表分割線)。

Palette 是一個很酷的庫，它讓我們能夠給 palette 發送任何的圖像，然后 palette 會返回一個那個圖像的顏色列表，我們可以在代碼里面使用這些顏色。在我的應用里面，我有一個白色的標題，這個標題在大多數的不同圖像上都不能顯現出來，因為它們都是部分白色背景的圖片。我把這個圖片發給 Palette，然后給標題設為 vibrant - 現在我知道它和圖像是反色的，然后可以顯示出來了。而且，這在以前的姜餅平臺上也能工作 (包括 RecyclerView ) ，2.3 OS，它們只占有少量的市場份額。谷歌能夠提供所有的這些功能，而且還能夠向后兼容使得我們的應用統一起來，這相當了不起。

Material Design 的一個重要的部分就是演進。Material Design 的一個核心的組件是我們熟悉的 X-axis 和 Y-axism 系統。但是它們增加了一個 Z-axis 系統，然后你就可以采納這些視圖，并且在屏幕上提升它們。 CardView 是一個很棒的方式 – 你可以在你的 CardView 里面設置提升，這允許你可以在屏幕上提升這些卡片。

我有一個例子運行在兩個不同的手機上，一個不支持 (S4) 和一個支持 (MotoX)。你可以看到這些陰影和光影效果是非常棒的，而且能在每個地方都能正常工作。我不能說出這兩者的差別，雖然有些差別。

如果你在編寫一個媒體應用，當有電話進來關掉你的媒體聲音的時候，事情就得復雜了，或者如果另外一個媒體應用想得到控制權的時候也一樣。 MediaRouter 將接管這部分困難的工作，通過把媒體路由到支持庫里來實現，所以你不用擔心你的應用會消聲了，或者甚至搶占優先級。如果你是使用的媒體的應用，這是個有用的東西。

向量圖是在 XML 文件里面用語言定義圖形元素的方法。他有些坐標，比如說從 0.0 到 0.10 畫一條線，然后再畫另一條線，等等。如果你使用像 PNG 的光柵圖片，像安卓開發者一樣，為了使圖片資源到處看起來都很不錯，我們需要提供不同的大小，HDPI， XHDPI。這很難，而且這會增大你的應用的大小。我們能定義這些向量資源了，在代碼里面包括它們，改變它們的大小。如果你想在你的代碼里面增加矢量圖，你需要增加這行然后你可以通過引用來添加那些可繪制的對象，就像你通過 srcCompat 屬性名來引用其他可繪制對象一樣。一旦你這樣做了，你可以定制多個大小而且圖像會無損的調整大小。當他們也開始在支持庫里面使用向量的時候，通過使用向量替換光柵圖形，他們把應用減少了 9%。這樣做，有機會能控制應用膨脹，也能防止 PNGs 的多個版本的麻煩，并且不會出錯。盡管這只在版本 23.01 上有效。

android {
    compileSdkVersion 23
    buildToolsVersion "23.0.1"

    defaultConfig {
        //...
        vectorDrawables.useSupportLibrary = true
}

<ImageView
    android:layout_width="36dp"
    android: layout_height="36dp"
    android:layout_gravity="center_horizontal"
    app:srcCompat="@drawable/bugdroid"
    tools:ignore="MissingPrefix"/>

設計

AppCompat 是核心。設計庫就是那些能實現 Material Design 流行 的漂亮 UI。

navigationView

navigationView 是用來導航的側邊欄。這也是一個能展示支持庫是如何工作的好例子而且能節省我們的工作。如果你去看設計標準，你會發現導航 UI 的樣子是有著非常詳細的定義的。它們具體到圖標應該如何被縮放，旁邊的留白應該有多少，和你的關鍵行。靠你自己完全做到正確是非常困難的。

在安卓里，有一個控制控件叫做 NavigationView ，它使得你能在 XML 里面像定義菜單一樣實現這些要求。(就像你為一個 Action Bar 或者 menu 所做的事情一樣)。你需要定義動作， @drawable 。然后，操作系統自己會為你產生一個 NavigationView 。例如，它在我選擇一個條目的時候增加了一個灰色的高亮。它在我的系統顏色的基礎上給圖標和文字著色。當然，之后它按照它應該的那樣把所有的組件準確布局。比如，我能夠確定一個圖標是準確地離邊沿 16dp，因為我知道 谷歌的設計者 已經考慮到它了。我所需要做的事情就是定義一些簡單的 XML，然后所有的神奇的事情就發生了。

<menu xmlns:android="http://schemas.android.com/apk/res/android"?

<group android:checkableBehavior="single">
    <item
        android:id="@+id/nav_home"
        android:icon="@drawable/ic_android"
        android:title="OS Versions" />
    <item
        android:id="@+id/nav_devices"
        android:icon="@drawable/ic_device"
        android:title="Devices" />
    <item
        android:id="@+id/nav_favorites"
        android:icon="@drawable/ic_favorite_on"
        android:title="Favorites" />
    <item
        android:id="@+id/nav_userinfo"
        android:icon="@drawable/ic_account"
        android:title="User Settings" />
</group>

一個我常常聽到的關于 NavigationView 的問題是，”我該如何給我的導航視圖添加一個訂制化的 X?” 答案是， “不要這樣做” 一些設計限制的目的就是不要擴展而固定用法。你不被期望來修改導航視圖。側邊導航是谷歌計劃強推的設計模式，它需要在每一個應用里面都看起來一樣。這是一個公共的導航模式；它們就是故意使得修改特別困難 - 當你想修改它的時候，仔細想想你這樣做的原因。結果回答會是 “不！，你不應該修改，” ，如果你的設計師要求你這樣做，給他發一份設計標準然后說 “Material Design 不支持這樣做。我覺得這不是個壞主意，而且 Mike Wolfson 也這么認為。”

他們創建的一些額外的控件：

• TextInputLayout 提供了當你點擊進入一個 TextView 的時候的漂亮動畫。這個視覺上的反饋很有用。你只需要增加這個 XML，一個標準的編輯文字。
• Featured Action Button (FAB)，, 這個你打算放到屏幕上的圓圈將是一個神奇的組件，你的主要動作。這以前是很難實現的，但是它們現在給了我們一個 FAB 控制來實現這個強大的事情 ( 請看下面 )。
• Snackbar 一個在屏幕底端彈出狀態信息的消息，也是一個選擇內容的方式。
• Dialogues 和 SwitchCompat 。 SwitchCompat 一個好看的動畫而且當你點擊它的時候，著色十分特別，它動畫變來變去。警示對話框都是標準的。使用這些標準的警示對話框，然后你知道你的模式是合適的。

Coordinator Layout 使你增加你的主要視圖的布局，而且它使得屏幕里面的視圖可以互相交互。動畫 FAB 是十分容易的。在我的協調布局中，我可以增加一個錨，然后告知 FAB，然后一個一個視圖的告知，這樣它們就能互相聯系起來。協調布局使得一個視圖能夠監聽另一個不同視圖的滾動事件。一旦其他的視圖滾動的時候，它說，”我也需要滾動” 或者 “我需要做些事情。” 能把這兩個視圖聯系在一起是非常強大的，而且能夠一起滾動或者在某個獨特的模式下分別做些事情。

這是個體現 Froyo API 層的標題是不同的顏色的好例子。當我滾動視圖的時候，頂層的標題欄慢慢視差然后消失，而且標題也會有漸入漸出的動畫。我們有視圖漸進漸出的動畫，視圖平行地進入，我們也有標題，它會閃爍，擴大，充滿活力，有價值。而且我們不需要做任何的事情；我們所要做的事情就是使用應用的 collapsing 工具欄布局控制。

希望你開始看到，這里有些視覺的模式能夠提供交互能力和強大的圖片。

百分比布局是網頁開發者一直有的東西，現在我們也有了。你可以基于你的全部屏幕的一個百分比來定制布局。這以前在安卓里是不可能的，因此，實現一些復雜的用戶接口是很困難的。現在我們有百分比布局，而且我們可以定制，”我想這個功能是 60% 和 20%。”

我想展示一個我最近用的例子：

<android.support.percent.PercentFrameLayout
    android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true">
    <com.tmm.views.CustomVideoView
        tools:ignore="LayoutHeight" android:id="@+id/custom_video_view" app:layout_heightPercent="7096" app:layout_aspectRatio="17096" />.
</android.support.percent.PercentFrameLayout>

我的這個應用有一個視頻控制，而且我們的視圖是一個絕對的大小。它被設置為從屏幕全寬和每邊留白 16dp。問題是安卓屏幕是不同大小的：我的 viewport 總是一個不同的大小，有時候我不能控制 video port 是如何配置的。現在我可以用些不一樣的事情了。我創建了這個比率然后設置我的視圖為 16:9。現在就不是根據具體的屏幕大小計算具體的數值，我可以就只定制一個百分比然后系統自己會計算它。現在我有這個 viewport 而且我知道它總是 16:9。我可以只定制我需要的高度的百分比。以前，為了得到這個信息，視圖需要是靜態的而且大小要準確，我需要為不同的設備創建多個分辨率，或者在代碼里面手工實時計算百分比。知道了這個功能后，我輕松多了；我知道它能工作，而且到處都能工作的很好。我希望你了解到了支持庫是最容易采納 Material Design 的方法。

我鼓勵你們看看這個應用而且代碼在這 開源代碼 。我從 Chris Bane’s Cheesesquare Material Design 的示例應用中拷貝了一份，然后擴展了一些，這樣就有你看見的這些東西了，希望這個項目有著清晰和基本的例子，而且也很簡單。

問： 從你的演講里我學到的一個很酷的東西就是百分比布局。你展示了一個使用百分比布局的例子而且我認為這是一個有文字視圖的百分比框。還有可能使用一個更復雜的視圖嗎，比如我想要一個菜單或者一個嚴格的 RecyclerView 里面有 PercentRelativeLayout ？這可能嗎，或者它對基礎視圖有限制？

Mike： 不，我覺得你可以在任何容器里面使用它，因為它是一個相對布局。是一個特殊的相對布局類型。你能使用相對布局的任何地方，我認為你可以使用百分比相對布局。也有一個百分比框布局，顯然相對布局更靈活。但是我不認為這里面有什么限制。CardView 的例子里面有一個文字視圖和兩個不同的百分比視圖，而且它能工作。

問：: 謝謝你的演講。我有一個關于 PercentRelativeLayout 的問題。關于你的項目你說 178%，16:9 比率，我在想，你是怎么計算出那個數字的呢？我怎么能計算出來？16:9 相關的數字怎么計算得出？

Mike：我認為 16 / 9 是比率 1.78:1，所有 16 是 9 的 178%。我從那個例子發現，是因為它是一個需要這樣的固定大小的 viewport 的公共例子。

問：演講太棒了。我在想 AppCompat 庫。你應該無時不刻都使用它嗎，或者如何使用它？

Mike：非常正確。這里是原因。 AppCompat 向后兼容老版本操作系統的功能。你知道你能使用它，而且向后兼容的版本。但是如果你實在一臺設備上本地支持這些事情， AppCompat 不使用本地方法，它會使用本地抽象層。因為如果本地支持，你不會使用它了，所以你才打算使用 AppCompat 。手機本身知道，”這個東西是本地的，我想使用它而不是 AppCompat 的東西”。

問：我想知道因為有些人不打算支持 4.0 以前的版本，所以它們不使用 AppCompat。

Mike：: 即使這樣， AppCompat 的功能在 4.0 以前也是不支持的。這現在非常常見 – 沒有很多人支持 2.3。我看看我之前有著大量用戶的典型應用，只有 2% 的人使用 2.3 的手機，所以我們不太需要考慮這些。但是 4.0，4.1 的手機，我認為差不多有 15 個百分點。我們討論的大多數功能不是都能向前兼容，比如百分比布局。我提倡都用它。

See the discussion on Hacker News .

Transcription below provided by Realm: a replacement for SQLite & Core Data with first-class support for Swift! Check out the Swift docs!

 

來自： https://realm.io/cn/news/kau-michael-wolfson-material-design-everywhere/