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

Hello，Android L！

前幾天給大家介紹了Android 5.0——Material Design詳解（動畫篇），今天這篇文章中，為大家介紹的是視圖和陰影，這個也比較重要，因為在以後Android L的開發中會經常用到。

視圖和陰影

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中的代碼）：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

int action = motionEvent.getActionMasked();   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( );   break ;   default :   return false ;   }

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

Shadows and Outlines（陰影和輪廓）

視圖的背景邊界決定了預設的陰影形狀。輪廓（Outlines）代表了圖形對象的外形狀，并确定了對于觸摸回報的波紋區域。

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

1、設定eleavation值

2、添加一個背景或者outline

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

?

1 2 3 4 5

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

?

1 2 3 4 5 6

<!-- 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：

?

1 2 3 4 5 6 7 8 9 10

int shapeSize = getResources().getDimensionPixelSize(R.dimen.shape_size);   mOutlineCircle = new Outline();   mOutlineCircle.setRoundRect(0, 0, shapeSize, shapeSize, shapeSize / 2);   mOutlineRect =  new Outline();   mOutlineRect.setRoundRect( ,  , shapeSize, shapeSize, shapeSize /  10 );

給視圖設定一個outline(如果為了防止一個視圖産生陰影可以設定outline為null)：

?

1	floatingShape.setOutline(mOutlineCircle);

上面的方法在Android L 5.0正式版中已經被替換，下面我再介紹以下Android L 5.0設定outline的方法：

?

1 2 3 4 5 6 7 8

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

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

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

Drawable Tinting（着色）

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

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

< 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方法：

?

1	floatingShape.setClipToOutline( true );

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

?

1 2 3 4 5 6 7 8

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 );   clippedView.setOutline(mClip);   clippedView.setClipToOutline( true );

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

因為裁剪視圖是一個很耗資源的操作，是以當裁剪一個視圖時不要添加動畫。為了達到這個效果可以使用Reveal Effect動畫，詳情可檢視之前的動畫篇介紹。