Material Design開發文章系列2：在你的App中實現Material Design

----------------------------系列文章概要---------------------------------------

Material Design出現之后國外網站上出現和很多關于Material Design的設計與開發文章，有很多是重復的，google官方博客將這些文章搜集整理成了幾篇比較經典的文章，我認為對于開發者來講，只需要知道其中三篇就能掌握絕大多數知識了。這三篇文章的原文地址分別是（當然KX上網是必須的）：

http://android-developers.blogspot.hk/2014/10/appcompat-v21-material-design-for-pre.html

http://android-developers.blogspot.hk/2014/10/implementing-material-design-in-your.html

http://android-developers.blogspot.hk/2014/10/material-design-on-android-checklist.html

還好這三篇文章都被翻譯了出來，而且還算是比較優質的翻譯。后兩篇主要從整體設計介紹了一個標準的Material Design的App應該遵循哪些設計標準，并告訴你如何在你的代碼中實現，并介紹了如何向前兼容。其實后兩篇在整體結構上是差不多的，只是在Implementing material design in your Android app中，側重的是Material Design的設計標準，而Material Design on Android Checklist則側重的是實現細節和注意事項。

其余兩篇譯文文非別是：

Material Design開發文章系列1：AppCompat V21：將 Materia Design 兼容到于5.0之前的設備

Material Design開發文章系列3:Material Design Check List

-------------------------------------------------------------------------

正文

Material Design開發文章系列-2：在你的App中實現Material Design

Material design 是一種達到可視化，交互性，動效以及多屏幕適應的全面設計。Android 5.0 Lollipop和已經更新的support libraries將會幫助你構建Material UI。這里提供了一些API和Widget幫助你實現MaterialDesign設計。

一、Tangible Surfaces 有型的外觀

UI由數字化的紙墨構成。表層和它帶有的陰影為應用提供了可視化的效果。你可以觸摸并觀察他的運動，這個數字化的設計具有移動，擴張，或者轉換的能力，幫助你創建靈活的UI。

1.1 Shadows

表面的位置和深度導致了在亮度和陰影方面的微弱變化。新的elevation 屬性允許你在Z軸上指定View的位置，然后框架會為該View底部的items加上實時的動態陰影。你可以在布局中明確的以dp為單位設置它的高度。

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

你也可以在代碼中通過getElevation()/setElevation()設置。陰影是添加到輪廓上的，默認來自背景。比如，你可以設置一個圓形的drawable作為floating action button的 背景。它會自動轉化成適當的陰影。如果你需要手指去控制一個View的陰影，可以設置一個ViewOutlineProvider，它允許你在getOutline()中提供一個自定義的Outline.

1.2 Cards

對于創建帶有不同信息內容的碎片，Cards是一種常見的模式。supportV7下的CardView可以幫助你方便的實現，并提供了輪廓和陰影。

<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 和 圓角，使得cards在不同的平臺間保持一致。你也可以通過cardElevation和cardCornerRadius屬性自定義它們的值。注意，Cards不是唯一實現維度效果的方式，你應該警惕過度的使用Cards:http://www.google.com/design/spec/components/cards.html#cards-usage

二、Print-like Design 打印式風格

Material利用了經典的打印設計，使內容前部和中心的布局變得整潔和簡約。刻意大膽的顏色選擇，刻意的空白，美觀的印刷風格和強烈的格子線條為你創建一種有層次有意義有焦點的效果。

2.1 Typography 活字印刷
Android 5.0更新了Roboto樣式，不論多大的text，展示起來都會美觀和簡潔。添加了一種新的中等高度屬性(android:fontFamily=”sans-serif-medium”) 和新的AppAppearance樣式為了平衡內容密度和閱讀的舒適感,實現了推薦的打印式縮放的。比如你可以簡單的通過 android:textAppearance=”@android:style/TextAppearance.Material.Title” 設置  “Title"風格。在舊的版本中可以使用AppCompat support library的樣式： “@style/TextAppearance.AppCompat.Title”.

2.2 Color
調色板為你的應用帶來了品牌營銷和個性化，通過以下屬性可以方便的控制UI的著色：

主調色彩：主調色彩是用于應用品牌推廣的色彩。作為action bar的背景色最近的任務title和其它邊緣效果。
強調色彩：鮮明的擴展了主調色彩。應用于框架的控制。比如EditText，Switch
主調的暗色： Darker作為主調色彩的加深，應用于狀態欄 status bar.

更多用于控制色彩的屬性，可以參考：colorControlNormal.colorControlActivated.colorControlHighlight, colorButtonNormal, colorSwitchThumbNormal, colorEdgeEffect, statusBarColor and navigationBarColor.
AppCompat 為以上功能提供了大量的子集，允許你為Lollipop之前的系統控制色彩。

2.3 Dynamic color 動態的色彩

Material Design 鼓勵動態色彩的使用，特別是當你擁有豐富的iamge的時候。新的Palette的support library 支持從圖片中抽取一小部分的色彩去設計你的UI。創造出一種更逼真的體驗。你也可以添加動靜的結合效果，比如前部的text color的變化，如下兩種TextView部分色彩的切換：

三、Authentic Motion 真實的動效

有型的表面不應該像電影中的跳躍式的切換，它們的移動應該幫助引導用戶的焦點，建立控件關系以及保持連貫性。Meterial 響應觸摸事件去確認你的交互，所有的變化會從你的Touch點輻射開來。所有的運動都是有意義并且友好的，有助于用戶更好的理解。

3.1 Activity + Fragment切換
通過聲明“shared elements" ，在兩種狀態之間你可以創建一個平滑的切換，
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，它的切換將會自動的動畫起來。對于進入和退出的元素，你可以自由編排。

3.2 Ripples（漣漪）

Materials以一種潑墨的漣漪的方式響應用戶的觸摸事件。你可以通過使用或者繼承Theme.Material主題，即可達到這種默認的效果。你可以通過簡單的封裝將這種ripple效果添加到自己的drawables上。自定義View應該使用  View#drawableHotspotChanged 回調方法把touch的位置傳播到它們的drawables上，以便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>

3.3 StateListAnimator

Materials 也響應了用戶抬起手指的操作。類似磁鐵吸引的效果。你可以通過tranlationZ屬性實現。它類似于elevation屬性，但主要是用于時間較短，轉瞬即逝的效果，比如 Z = elevation + translationZ。這個新的stateListAnimator 屬性允許你在用戶touch的時候簡單的在translationZ上動畫。button默認會有這種效果。

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>

3.4 Reveal
material 過渡效果中的一個標志是通過延伸一個圓形的面板來展示新的內容。增強了作為所有轉換起點的觸摸點, 它是迅速向外擴散的. 你可以使用下面的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();

3.4 Interpolators 插值器

運動應該是慎重的，平滑且精確的。而不是簡單的漸入漸出。在 Material Design中，對象更傾向于快速的并舒適的啟動。通過下面的示例可以看到，在將要到達終點前的那段位置花費了更少的時間。總的來說，用戶不會等待較長時間，運動的負面效果就變得最小化了。有一種新的插值器，可以達到這種效果https://developer.android.com/reference/android/R.interpolator.html?utm_campaign=L-Developer-launch#fast_out_slow_in

對于進入和退出屏幕效果，請分別參考：  linear-out-slow-in 和 fast-out-linear-in interpolators respectively.

四、Adaptive Design (and UI Patterns)

material 最終的核心概念是創建一種自適應于不同大小形狀設備的設計，從手表到TV。自適應設計技術幫助我們實現了不同的設備但相同的底層系統體現為不同的View。每個View對那個設備來說，都是量身定做的。色彩，圖片，層次，空間的相對關系都保持不變。material design 系統提供了便利的組件和模式幫你構建一個如此有擴展性的設計

Toolbar

與Actionbar很類似，但是更加方便，不同于標準的Action bar，toolBar就像View層級中的任何一個東西。因此你可以在任何地方進行放置，與其它的View交錯，移動，對滑動事件的響應等等。你可以通過調用Activity,setActionBar()方法把ToolBar作為你的Activity的ActionBar.

在這個例子中，藍色的toolbar是一個可擴展高度，覆蓋在屏幕內容上側并且提供了導航按鈕。注意：在這個列表和細節中，使用的ToolBar超過了2個。

Material Design 讓你的應用具有可理解，美觀，逼真的動效及自適應的能力。希望你可以遵從這些設計原則并通過上述提供的new API和一些兼容庫幫助你的App實現Material Design。