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

視圖和陰影

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;  
                    }  

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>  

 /* 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)：

上面的方法在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方法：

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

     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動畫，動畫篇會介紹）。

總結：

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