Material Design詳解

轉： 

ANDROID L——Material Design詳解（主題和佈局）

ANDROID L——Material Design詳解（視圖和陰影）

ANDROID L——Material Design詳解（UI控件）

ANDROID L——Material Design詳解（動畫篇）

Material Theme

使用Material主題：

Material主題只能應用在Android L版本。

應用Material主題很簡單，只需要修改res/values/styles.xml文件，使其繼承android:Theme.Material。如下：

<!-- res/values/styles.xml -->
<resources>
  <!-- your app's theme inherits from the Material theme -->
  <style name="AppTheme" parent="android:Theme.Material">
    <!-- theme customizations -->
  </style>
</resources>

或者在AndroidManifest.xml中直接設置主題：

android:theme="@android:style/Theme.Material.Light"

自定義Material主題：

material主題可以定義爲如下形式：

• @android:style/Theme.Material 
• @android:style/Theme.Material.Light
• @android:style/Theme.Material.Light.DarkActionBar

對於其他主題風格可以參考API文檔（android.R.style）

自定義顏色基調（color palette）

material可以根據自定的品牌風格，自定義主題的基礎色調，如下（參考下方圖片）：

<resources>
  <!-- inherit from the material theme -->
  <style name="AppTheme" parent="android:Theme.Material">
    <!-- Main theme colors -->
    <!--   your app's branding color (for the app bar) -->
    <item name="android:colorPrimary">@color/primary</item>
    <!--   darker variant of colorPrimary (for status bar, contextual app bars) -->
    <item name="android:colorPrimaryDark">@color/primary_dark</item>
    <!--   theme UI controls like checkboxes and text fields -->
    <item name="android:colorAccent">@color/accent</item>
  </style>
</resources>

自定義狀態條和導航條：

material還允許你輕鬆的自定義狀態條和導航條的顏色。

可以使用如下屬性（參考下方圖片）：

android:statusBarColor，Window.setStatusBarColor

兼容性：

由於Material Theme只可以在Android L Developer Preview中使用。

所以在低版本使用的話就需要爲其另設一套主題：

在老版本使用一套主題 res/values/styles.xml，在新版本使用Material主題res/values-v21/styles.xml.

設計佈局

Android L的一個重要的設計理念就是要在各種平臺上創建一個統一的風格

在設計主題和佈局之前，你首先要看一下 material design specification這篇文章（Google官方關於如何設計的文章）。

文章從Aniamation, Style, Layout, Components, Patterns, Usability, Resources等幾方面非常詳細的介紹瞭如何正確的設計界面。

Layout特點簡述：

我個人簡單理解（非常初級的理解）Android L的Material設計中Layout主要有以下幾點：

Paper Craft（紙工藝）：

在material的設計中，每一個應用程序所繪製的像素都像駐留在一張紙上。

紙具有平坦的背景顏色，並且可以調整大小，以滿足各種用途。一個典型的佈局是由多張紙組成。

Floating Actions

浮動操作，我也不知道翻譯成什麼比較貼切。

我個人理解它主要作用是一個承上啓下的浮動按鈕，承接了兩個佈局或者不同功能的轉換

Z軸：

Android L中相對於之前X，Y軸又新增了Z軸的概念，有了Z軸可以做出更加具有立體感的控件。

如下圖是一個根據按鈕狀態來調整Z軸的高度

通過對佈局中每個視圖設置不同的Z軸可以使佈局更具立體感，並且可以突出重點。

兼容性：

爲了適應Material Design的變化，所以Android L版本的佈局並不能和老版本的通用。

我們可以使用不同文件目錄，來設置兩套佈局分別對應Android L和低版本：

res/layout/，res/layout-v21/

*************************************************************************************************************************************************************************

視圖和陰影

View的大小位置都是通過x，y確定的，而現在有了z軸的概念，而這個z值就是View的高度（elevation），而高度決定了陰影（shadow）的大小。

View Elevation（視圖高度）

View的z值由兩部分組成，elevation和translationZ（它們都是Android L新引入的屬性）。

eleavation是靜態的成員，translationZ是用來做動畫。

Z = elevation + translationZ

在layout中使用 android:elevation屬性去定義 

在代碼中使用 View.setElevation 方法去定義 

設置視圖的translation，可以使用View.setTranslationZ方法 

新的ViewPropertyAnimator.z和ViewPropertyAnimator.translationZ方法可以設置視圖的elevation值

新的屬性值：translationZ允許你創建一個動畫暫時的反應出View的高度值（elevation）變化。

這對於響應觸摸手勢很有用處，請看下面代碼（官方Demo中的代碼）：

int action = motionEvent.getActionMasked();
                /* Raise view on ACTION_DOWN and lower it on ACTION_UP. */
                switch (action) {
                    case MotionEvent.ACTION_DOWN:
                        Log.d(TAG, "ACTION_DOWN on view.");
                        view.setTranslationZ(120);
                        break;
                    case MotionEvent.ACTION_UP:
                        Log.d(TAG, "ACTION_UP on view.");
                        view.setTranslationZ(0);
                        break;
                    default:
                        return false;
                }

一個簡單觸摸監聽，在點擊和擡起的時候分別設置translationZ的值，效果如下圖所示：

     

Shadows and Outlines（陰影和輪廓）

視圖的背景邊界決定了默認的陰影形狀。輪廓（Outlines）代表了圖形對象的外形狀，並確定了對於觸摸反饋的波紋區域。

在Android L中設置一個陰影很簡單，只需要兩點：

1.設置eleavation值

2.添加一個背景或者outline

可以在xml中通過定義一個背景來設置outline：

<TextView
    android:id="@+id/myview"
    ...
    android:elevation="2dp"
    android:background="@drawable/myrect" />

<!-- res/drawable/myrect.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#42000000" />
    <corners android:radius="5dp" />
</shape>

也可以通過代碼來創建一個outline：

/* Get the size of the shape from resources. */
int shapeSize = getResources().getDimensionPixelSize(R.dimen.shape_size);

/* Create a circular outline. */
mOutlineCircle = new Outline();
mOutlineCircle.setRoundRect(0, 0, shapeSize, shapeSize, shapeSize / 2);

/* Create a rectangular outline. */
mOutlineRect = new Outline();
mOutlineRect.setRoundRect(0, 0, shapeSize, shapeSize, shapeSize / 10);

給視圖設置一個outline(如果爲了防止一個視圖產生陰影可以設置outline爲null)：

floatingShape.setOutline(mOutlineCircle);

上面的方法在Android L5.0正式版中已經被替換，下面我再介紹以下Android L5.0設置outline的方法：

ViewOutlineProvider viewOutlineProvider = new ViewOutlineProvider() {
    @Override
    public void getOutline(View view, Outline outline) {
        int size = getResources().getDimensionPixelSize(R.dimen.fab_size);
        outline.setOval(0, 0, size, size);
    }
};
fab.setOutlineProvider(viewOutlineProvider);

下圖是使用不同eleavation值產生的陰影效果：

下圖是不同背景／輪廓產生的陰影和拖拽效果：

    

Drawable Tinting（着色）

對於Android L還有一個獨特的特點就是現在可以定義圖片的alpha遮罩，並且可以輕鬆的使用android:tint屬性去調整色調。

下面是一個使用tint屬性給背景調整不同顏色的例子：

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal">
    <ImageView
        ...
        android:src="@drawable/xamarin_white"
        android:background="@drawable/mycircle"/>
    <ImageView
        ...
        android:src="@drawable/xamarin_white"
        android:background="@drawable/mycircle"
        android:tint="#2C3E50"/>
    <ImageView
        ...
        android:src="@drawable/xamarin_white"
        android:background="@drawable/mycircle"
        android:tint="#B4BCBC"/>
</LinearLayout>

效果圖：

Clipping Views（裁剪視圖）

可以使用View.setClipToOutline方法去剪切一個視圖的outline區域。

只有rectangle,circle, 和round rectangle outlines支持裁剪（Outline.canClip方法用來判斷是否可以裁剪）

爲了裁剪一個可繪製的視圖形狀，需要先設置一個outline然後調用View.setClipToOutline方法：

floatingShape.setClipToOutline(true);

下面請看一個使用裁剪的例子：

int margin = Math.min(clippedView.getWidth(), clippedView.getHeight()) / 10;
Outline mClip = new Outline();
mClip.setRoundRect(margin, margin, clippedView.getWidth() - margin,
        clippedView.getHeight() - margin, margin / 2);
/* Sets the Outline of the View. */
clippedView.setOutline(mClip);
/* Enables clipping on the View. */
clippedView.setClipToOutline(true);

首先創建一個輪廓，給輪廓設置區域大小，添加輪廓到視圖上，確認裁剪，效果圖如下：

     

因爲裁剪視圖是一個很耗資源的操作，所以當裁剪一個視圖時不要添加動畫（爲了達到這個效果可以使用Reveal Effect動畫，動畫篇會介紹）。

***********************************************************************************************************************************************************************************

UI控件

在Android L中新增了兩個控件分別是RecyclerView，CardView：

RecyclerView：

RecyclerView是ListView的升級版，它提供了更好的性能而且更容易使用。

RecyclerView這個控件是一個可以裝載大量的視圖集合，並且可以非常效率的進行回收和滾動。當你list中的元素經常動態改變時可以使用RecyclerView控件。

RecyclerView非常容易使用，它提供瞭如下兩個功能：

爲每個條目位置提供了layout管理器（RecyclerView.setLayoutManager）

爲每個條目設置了操作動畫（RecyclerView.setItemAnimator）

下面的例子介紹瞭如何定義和使用一個RecyclerView：

1.在佈局文件中添加一個RecyclerView

<!-- A RecyclerView with some commonly used attributes -->
<android.support.v7.widget.RecyclerView
    android:id="@+id/my_recycler_view"
    android:scrollbars="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

2.初始化RecyclerView參數，設置layoutManager和adapter

public class MyActivity extends Activity {
    private RecyclerView mRecyclerView;
    private RecyclerView.Adapter mAdapter;
    private RecyclerView.LayoutManager mLayoutManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.my_activity);
        mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);

        // improve performance if you know that changes in content
        // do not change the size of the RecyclerView
        mRecyclerView.setHasFixedSize(true);

        // use a linear layout manager
        mLayoutManager = new LinearLayoutManager(this);
        mRecyclerView.setLayoutManager(mLayoutManager);

        // specify an adapter (see also next example)
        mAdapter = new MyAdapter(myDataset);
        mRecyclerView.setAdapter(mAdapter);
    }
    ...
}

3.創建一個adapter

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
    private String[] mDataset;

    // Provide a reference to the type of views that you are using
    // (custom viewholder)
    public static class ViewHolder extends RecyclerView.ViewHolder {
        public TextView mTextView;
        public ViewHolder(TextView v) {
            super(v);
            mTextView = v;
        }
    }

    // Provide a suitable constructor (depends on the kind of dataset)
    public MyAdapter(String[] myDataset) {
        mDataset = myDataset;
    }

    // Create new views (invoked by the layout manager)
    @Override
    public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,
                                                   int viewType) {
        // create a new view
        View v = LayoutInflater.from(parent.getContext())
                               .inflate(R.layout.my_text_view, parent, false);
        // set the view's size, margins, paddings and layout parameters
        ...
        ViewHolder vh = new ViewHolder(v);
        return vh;
    }

    // Replace the contents of a view (invoked by the layout manager)
    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        // - get element from your dataset at this position
        // - replace the contents of the view with that element
        holder.mTextView.setText(mDataset[position]);

    }

    // Return the size of your dataset (invoked by the layout manager)
    @Override
    public int getItemCount() {
        return mDataset.length;
    }
}

CardView：

CardView繼承自FrameLayout，允許你在card視圖中顯示信息. CardView也可以設置陰影和圓角。（其實現在很多應用都自定義了Card視圖，Google這回將card視圖作爲基本控件，可以拿來直接使用了）

Layout中爲CardView設置圓角使用card_view:cardCornerRadius屬性

代碼中爲CardView設置圓角使用CardView.setRadius方法

爲CardView設置背景顏色使用card_view:cardBackgroundColor屬性

在佈局中包含一個CardView，如下：

<!-- A CardView that contains a TextView -->
<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_gravity="center"
    android:layout_width="200dp"
    android:layout_height="200dp"
    card_view:cardCornerRadius="4dp">

    <TextView
        android:id="@+id/info_text"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</android.support.v7.widget.CardView>

兼容性：

RecyclerView，CardView都包含在Android L Developer Preview Support Library中，所以他們可以在之前的版本中使用，只會有一些限制。

***********************************************************************************************************************************************************************************

Material 動畫

在Android L中新增瞭如下幾種動畫：

• Touch feedback（觸摸反饋）
• Reveal effect（揭露效果）
• Activity transitions（Activity轉換效果）
• Curved motion（曲線運動）
• View state changes （視圖狀態改變）
• Animate Vector Drawables（可繪矢量動畫）

這篇文章先介紹上面6種中比較常用前三種，由於後三種現在資料不多，而且好像不是特別常用，等我研究明白了再給補上。

觸摸反饋：

在Android L5.0中加入了觸摸反饋動畫。

其中最明顯，最具代表性的就是波紋動畫，比如當點擊按鈕時會從點擊的位置產生類似於波紋的擴散效果。

波紋效果（Ripple）：

當你使用了Material主題後，波紋動畫會自動應用在所有的控件上，我們當然可以來設置其屬性來調整到我們需要的效果。

可以通過如下代碼設置波紋的背景：

android:background="?android:attr/selectableItemBackground"波紋有邊界

android:background="?android:attr/selectableItemBackgroundBorderless"波紋超出邊界

使用效果如下：

B1是不設任何背景的按鈕

B2設置了?android:attr/selectableItemBackground

B3設置了?android:attr/selectableItemBackgroundBorderless

設置顏色

我們也可以通過設置xml屬性來調節動畫顏色，從而可以適應不同的主題：

android:colorControlHighlight：設置波紋顏色

android:colorAccent：設置checkbox等控件的選中顏色

比如下面這個比較粉嫩的主題，就需要修改動畫顏色來匹配(如何設置主題顏色請參考該系列第一篇文章)：

Circular Reveal:

Circular Reveal是一個Android L新增的動畫效果，但我始終不知道如何翻譯這個名字，圓形揭示？

使用方法：

應用ViewAnimationUtils.createCircularReveal()方法可以去創建一個RevealAnimator動畫

ViewAnimationUtils.createCircularReveal源碼如下：

public static Animator createCircularReveal(View view,
        int centerX,  int centerY, float startRadius, float endRadius) {
    return new RevealAnimator(view, centerX, centerY, startRadius, endRadius);
}

源碼非常簡單，就是通過createCircularReveal方法根據5個參數來創建一個RevealAnimator動畫對象。

這五個參數分別是：

view 操作的視圖

centerX 動畫開始的中心點X

centerY 動畫開始的中心點Y

startRadius 動畫開始半徑

startRadius 動畫結束半徑

根據下面的效果圖和代碼可以很容易的瞭解這幾個參數的作用：

final View oval = this.findViewById(R.id.oval);
oval.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Animator animator = ViewAnimationUtils.createCircularReveal(
                oval,
                oval.getWidth()/2,
                oval.getHeight()/2,
                oval.getWidth(),
                0);
        animator.setInterpolator(new AccelerateDecelerateInterpolator());
        animator.setDuration(2000);
        animator.start();
    }
});

final View rect = this.findViewById(R.id.rect);

rect.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Animator animator = ViewAnimationUtils.createCircularReveal(
                rect,
                0,
                0,
                0,
                (float) Math.hypot(rect.getWidth(), rect.getHeight()));
        animator.setInterpolator(new AccelerateInterpolator());
        animator.setDuration(2000);
        animator.start();
    }
});

總結：

RevealAnimator和之前的動畫使用沒什麼區別，同樣可以設置監聽器和加速器來實現各種各樣的特效。

這些效果常用在視圖的添加，刪除，狀態，大小改變的時候，以後我會寫一個更直觀詳細的例子。

Activity Transition：

Activity Transition是Material Design中提供的一種動畫效果。它通過運動和切換不同狀態之間的元素來產生各種動畫效果。

簡介：

Activity Transition提供了兩種Transition類型：

Enter（進入）：進入一個Activity的效果
Exit（退出）：退出一個Activity的效果

而這每種類型又分爲普通Transition和共享元素Transition：

<span style="font-size: 18px; font-family: Arial, Helvetica, sans-serif;">普通</span><span style="font-size: 18px; font-family: Arial, Helvetica, sans-serif;">Transition</span><span style="font-size: 18px; font-family: Arial, Helvetica, sans-serif;">：</span>

<span style="font-family: Arial, Helvetica, sans-serif;">explode：從場景的中心移入或移出
slide：從場景的邊緣移入或移出
fade：調整透明度產生漸變效果</span>

<span style="font-size: 18px; font-family: Arial, Helvetica, sans-serif;">Shared Elements Transition 共享元素轉換：</span>

它的作用就是共享兩個acitivity種共同的元素，在Android 5.0下支持如下效果：

changeBounds -  改變目標視圖的佈局邊界

changeClipBounds - 裁剪目標視圖邊界

changeTransform - 改變目標視圖的縮放比例和旋轉角度

changeImageTransform - 改變目標圖片的大小和縮放比例

下面是我寫的一個小演示Demo，相信大家看後就知道這幾個動畫是如何工作的了：

Activity Transition使用 ：

使用Activity Transition十分簡單，只需要如下兩個步驟：

步驟一：設置允許使用transition，並且設置transition

xml：

首先，如果要使用transition需要先修改style文件，在繼承了material主題的style.xml中添加如下屬性：

<style name="myTheme" parent="android:Theme.Material">
        <!-- 允許使用transitions -->
        <item name="android:windowContentTransitions">true</item>

        <!-- 指定進入和退出transitions -->
        <item name="android:windowEnterTransition">@transition/explode</item>
        <item name="android:windowExitTransition">@transition/explode</item>

        <!-- 指定shared element transitions -->
        <item name="android:windowSharedElementEnterTransition">
            @transition/change_image_transform</item>
        <item name="android:windowSharedElementExitTransition">
            @transition/change_image_transform</item>
</style>

下面再來看看如何定義transition動畫：

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <explode/>
    <changeBounds/>
    <changeTransform/>
    <changeClipBounds/>
    <changeImageTransform/>
</transitionSet>

transition裏面的元素就是之前介紹過的，使用方法和以前的AnimationSet差不多，具體如何使用大家可以參考官方文檔。

代碼：

在代碼中同樣可以完成對於transition的設置：

// 允許使用transitions
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

// 設置一個exit transition
getWindow().setExitTransition(new Explode());

可以通過如下方法在代碼總設置transition效果：

Window.setEnterTransition()：普通transition的進入效果

Window.setExitTransition()：普通transition的退出效果

Window.setSharedElementEnterTransition()：共享元素transition的進入效果

Window.setSharedElementExitTransition()：共享元素transition的退出效果

步驟二：啓動Activity：

當你已經設置了允許使用Transition並設置了Transition動畫，你就可以通過ActivityOptions.makeSceneTransitionAnimation()方法啓動一個新的Activity來激活這個Transition：

啓用普通的Transition：

startActivity(intent,
              ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

啓用共享元素Transition：

啓動shared element transition和普通的transition稍有不同

在所有需要共享視圖的Activity中，使用android:transitionName屬性對於需要共享的元素分配一個通用的名字。

Intent intent = new Intent(this, Activity2.class);
// shareView: 需要共享的視圖
// "shareName": 設置的android:transitionName="shareName"
ActivityOptions options = ActivityOptions
        .makeSceneTransitionAnimation(this, shareView, "shareName");
startActivity(intent, options.toBundle());</span>

如果有多個View需要共享，則通過Pair.create()方法創建多個匹配對然後傳入ActivityOptions.makeSceneTransitionAnimation。代碼如下：

ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
        Pair.create(view1, "agreedName1"),
        Pair.create(view2, "agreedName2"));

如果不想使用transition可以設置options bundle爲null。

當需要結束當前Activity並回退這個動畫時調用Activity.finishAfterTransition()方法

兼容性：

上面介紹的幾個新動畫的APIs只允許在Android L中使用：

• Activity transitions
• Touch feedback
• Reveal animations

所以爲了兼容早期版本，則需要在調用這些api的時候先進行檢查系統版本。

寫在最後：

我將Material Design分爲如下四部分：

主題和佈局——ANDROID L——Material Design詳解（主題和佈局）

視圖和陰影——ANDROID L——Material Design詳解（視圖和陰影）

UI控件——ANDROID L——Material Design詳解（UI控件）

動畫——ANDROID L——Material Design詳解（動畫篇）

十一放假回來開始學習Android L，連更了6篇文章終於把Material Design中大部分特性介紹完畢（動畫篇還剩幾個小內容，過幾天研究明白了再給補上）

接下來準備寫幾個小例子，把視圖陰影，動畫和新增的UI控件充分結合起來。

ANDROID L——Material Design綜合應用（Demo）

Android 5.0真的做出了很大的變化，有一種脫胎換骨的感覺，但說實話模擬器用的真心不爽，啥時候Genymotion可以支持5.0啊。。。