如何在你的App中應用Material Design設計風格

譯自 http://android-developers.blogspot.com/2014/10/implementing-material-design-in-your.html —— By NashLegend

原譯文在個人Github上：https://github.com/NashLegend/ProjectBabel/blob/master/Implementing%20Material%20Design%20in%20Your%20Android%20app.md

關於如何在低版本Android上使用Material Design，能夠看上篇：在低版本Android上使用Material Design。

Material Design對於多屏幕的視覺、交互和動做設計做了很大的改進。Android 5.0和最新的支持包能夠幫助你建立Material風格的UI。這裏將概述新的Material Design風格設計、新的API和組件，你能夠將它們用在你的app中。

Tangible surfaces

在Material Design的世界中，UI是由電子紙和電子墨水構建起來的。這些UI的表面和陰影爲應用程序的結構提供視覺線索（也就是根據樣式能看出層次關係等等，好比下圖），你看他的樣子就知道哪裏是可觸摸的部分、就能夠知道它將以何種方式運動（一樣以下圖）。這種Didital Material能夠移動、擴張和變形以建立靈活的UI界面。

陰影

一個surface的位置和深度決定了其光影的微妙變化。你可使用新的elevation屬性設置view在Z軸的位置，系統會依此在view後自動繪製出實時的動態陰影。你能夠在layout XML裏面設置elevation屬性，單位是dip：

<ImageView …
    android:elevation="8dp" />

你也能夠在代碼中經過getElevation()/setElevation()（with shims in ViewCompat）方法操做elevation屬性。View投身的陰影是由其輪廓決定的，而默認狀況下這個輪廓是由background產生的。舉個栗子：若是你爲一個浮動按鈕設置了一個圓形的shape drawable背景，那麼它的陰影就是圓形的。若是你想能對陰影進行更詳細的控制，你可使用ViewOutlineProvider來自定義其輪廓，經過getOutline()方法能夠取得這個輪廓。

卡片

要顯示一些不一樣的信息，使用卡片是一個經常使用模式。你可使用新的支持包中的CardView輕鬆建立卡片式佈局，新的CardView在低版本Android上也支持輪廓和陰影。

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <!-- Your card content -->
</android.support.v7.widget.CardView>

CardView繼承了FrameLayout並提供了默認的elevation和圓角，這樣卡片在不一樣版本的系統上就擁有統一的表現。若有必要，你還能夠經過設置cardElevation和cardCornerRadius自定義這些屬性。可是卡片並非實現維度效果的不二法門，因此別濫用。

印刷樣式的設計（Print-like Design）

Material Design借鑑了印刷設計以建立簡明清晰的佈局，將你的內容部分突出在前面和中間。大膽的配色、刻意的留白、精緻的排版和強大的基線網格（a strong baseline grid）產生了具備層次感、有意義、突出重點的佈局.

字體排版

Android 5.0升級了系統Roboto字體，如今不管字體大小，均可以漂亮整潔地顯示字體。系統還新增了一個新的適用於中等字號(android:fontFamily=」sans-serif-medium」)，新的文本顯示樣式使用了備受好評的字體排版縮放以平衡內容密度的閱讀溫馨度。舉個栗子：你能夠經過設置android:textAppearance=」@android:style/TextAppearance.Material.Title」輕鬆地使用"Title"樣式，能夠經過AppCompat支持包在舊版本的Android系統上使用這種樣式，舉個栗子：「@style/TextAppearance.AppCompat.Title」。

顏色

應用的色調(color palette)會爲你的應用帶來品牌辨識度和個性化（好比一看見紅色就想到可口可樂），如今大家能夠經過設置下面的屬性使得這些變得更加簡單。

• colorPrimary. 應用的主色調、品牌顏色，用於ActionBar背景、最近運行任務界面標題以及邊緣效果（好比說MIUI系統中可滾動元素滾動到邊緣時出現的橙***）。

• colorAccent. 主色調的鮮亮補充色（Vibrant complement to the primary branding color），用於框架控件好比說EditText和Switch。（前面幾句真彆扭，所以注：colorAccent，不知道專業術語是啥，直譯應該是突出的顏色，所以，EditText的顏色並非colorAccent，它獲得焦點後的顏色纔是colorAccent，還有Switch在打開時的顏色也是colorAccent，如上圖）。

• colorPrimaryDark. 主色調的暗色版本，用於狀態欄。

除了上面這些以外，你還能夠對顏色進行更深刻精細的控制，參見colorControlNormal, colorControlActivated, colorControlHighlight, colorButtonNormal, colorSwitchThumbNormal, colorEdgeEffect, statusBarColor和navigationBarColor。

AppCompat支持上面功能的絕大部分，所以你能夠將此應用在Android 5.0以前的系統中。

Dynamic color —— 動態顏色

Material Design鼓勵使用動態顏色，尤爲是你的應用中有不少圖片時。新的Palette支持庫能夠提取圖片中的一部分顏色來設置你的UI的樣式來使界面顏色互相搭配以提供一種沉浸式體驗。提取出來的調色板（palette）包括突出的和柔和的色調（vibrant and muted tones，參見下圖文字後面變化的背景色），同時可取得最佳閱讀體驗的文本前景色（參見下圖的變化的文字顏色）。舉個栗子：

Palette.generateAsync(bitmap,
        new Palette.PaletteAsyncListener() {
    @Override
    public void onGenerated(Palette palette) {
         Palette.Swatch vibrant =
                 palette.getVibrantSwatch();
          if (swatch != null) {
              // If we have a vibrant color
              // update the title TextView
              titleView.setBackgroundColor(
                  vibrant.getRgb());
              titleView.setTextColor(
                  vibrant.getTitleTextColor());
          }
    }
});

一圖勝千言。 

Authentic Motion —— 真實的運動

Tangible surfaces不會突兀地出現，他們出現的動做要引導用戶注意力，要創建空間關聯並保持連貫性。Material元素會對你的觸摸事件作出響應以對本次交互進行確認，而後全部的變化將以你點擊的位置爲中心向外擴散。全部的動做都是有意義的和密切相關的，使用戶易於理解。

Activity 和 Fragment 切換

經過聲明兩屏之間通用的共享元素，你能夠在兩種狀態間建立流暢的切換。

一圖勝千言：

示例代碼：

album_grid.xml
…
    <ImageView
        …
        android:transitionName="@string/transition_album_cover" />
album_details.xml
…
    <ImageView
        …
        android:transitionName="@string/transition_album_cover" />

AlbumActivity.java
Intent intent = new Intent();
String transitionName = getString(R.string.transition_album_cover);
…
ActivityOptionsCompat options =
ActivityOptionsCompat.makeSceneTransitionAnimation(activity,
    albumCoverImageView,   // The view which starts the transition
    transitionName    // The transitionName of the view we’re transitioning to
    );
ActivityCompat.startActivity(activity, intent, options.toBundle());

咱們在兩屏之間定義了相同的transitionName。當打開新的Activity的時候，切換過程就自動開始了。除了共享元素以外，你也能夠定義進入和退出元素。

Ripples ——波紋效果

Material風格的元素以一種波紋(ripple)擴散的方式響應用戶的觸摸。若是你使用了Theme.Material或者其派生的主題，那麼交互性控件好比Button默認就會擁有這種效果（as will ?android:selectableItemBackground）。你也能夠在你的drawable上使用這種效果——只要把它們放到ripple元素裏，以下：

<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/accent_dark">
    <item>
        <shape
            android:shape="oval">
            <solid android:color="?android:colorAccent" />
        </shape>
    </item>
</ripple>

自定義view經過View#drawableHotspotChanged回調方法將點擊位置傳遞過去，以便從點擊的位置發起ripple效果。

StateListAnimator

當你觸摸Material元素的時候，它也能夠擡起（連接裏的Lift on touch）以迎合你的手指，就像磁鐵異性相吸同樣。你能夠經過translationZ屬性動畫來實現這種效果，translationZ屬性與elevation類似，不過它的主要做用是作這些過渡效果。 Z = elevation + translationZ. 新的stateListAnimator屬性輕鬆建立觸摸時的Z軸動畫(Buttons默認就有這效果):

示例代碼：

layout/your_layout.xml
<ImageButton …
    android:stateListAnimator="@anim/raise" />
anim/raise.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="true" android:state_pressed="true">
        <objectAnimator
            android:duration="@android:integer/config_shortAnimTime"
            android:propertyName="translationZ"
            android:valueTo="@dimen/touch_raise"
            android:valueType="floatType" />
    </item>
    <item>
        <objectAnimator
            android:duration="@android:integer/config_shortAnimTime"
            android:propertyName="translationZ"
            android:valueTo="0dp"
            android:valueType="floatType" />
    </item>
</selector>

Reveal —— 打開內容

Material風格的app顯示新內容的一個典型過渡效果是一個向外擴散的圓形遮罩。過渡動畫以用戶點擊位置爲圓心發起並向外擴散，你可使用下面這種Animator來實現：

Animator reveal = ViewAnimationUtils.createCircularReveal(
                    viewToReveal, // The new View to reveal
                    centerX,      // x co-ordinate to start the mask from
                    centerY,      // y co-ordinate to start the mask from
                    startRadius,  // radius of the starting mask
                    endRadius);   // radius of the final mask
reveal.start();

Interpolators —— 插值器

動做應該是合理的（deliberate）、迅速的、精確的。與普通的緩動效果不一樣的是，在Material Design裏，物體傾向於快速開始而後緩動到最終位置。在動畫過程當中，物體在最終位置附近時的運動使用了更多的時間，所以用戶沒必要要爲了等待動畫結束花費更多時間，動畫的負面效果被降到最低。這種動做使用的是一個新的快進慢出的插值器。

下面是一圖勝千言時間： 

對於進入和離開屏幕的元素(which should do so at peak velocity)，分別使用linear-out-slow-in 分 fast-out-linear-in 插值器。

Adaptive design —— 自適應設計

Material Design最後一個核心概念是建立一個單獨的自適應設計佈局就能夠適配小到手錶大到電視的全部尺寸和形狀（手錶有圓有方）。自適應設計設計技術幫助咱們實現用同一個系統在不一樣設備上展現不一樣的外觀。每一個view都會自適應不一樣設備的尺寸的交互方式。 顏色、iconography,、層次、空間關係保持不變。Material Design系統提供了靈活的組件和模式以幫助你作到這一點。

Toolbar

Toolbar是ActionBar模式的通常化形式，它提供類似的功能以及更高的靈活性。與標準的ActionBar不一樣，Toolbar就在你的view的結構層次中，你能夠像操做其餘的view徹底同樣的操做它。你可使用Activity.setActionBar()方法讓它變成你的ActionBar。

在這個例子裏，藍色的Toolbar很高，被屏幕內容覆蓋而且提供了一個導航按鈕。注意另外兩個Toolbar分別用在List和詳細內容界面（說這麼多無非是爲了說明Toolbar很靈活）。

欲知更多Toolbar的使用方式，看這裏。

開始讓你的應用Material化吧

Material Design幫助你建立易於理解的、漂亮的、自適應的、動起來的活的應用。但願這篇文章能讓你動心並將Material Design應用到你的app裏。