建立Material Design風格Android應用--自訂陰影和裁剪視圖

標籤：

之前已經寫過通過應用主題和使用ListView, CardView,應用Material Design樣式，同一時候都都能夠通過support library向下相容。今天要寫的陰影和視圖裁剪。無法向下相容。請注意。

?Material Design 為使用者介面元素引入了深度這個元素。深度協助使用者理解各個元素之間的重要關聯和協助使用者關注他們手上的任務。

視圖的高度（elevation）。通過Z屬性工作表現，通過他的陰影確定：ｚ值更高的視圖投影出更大的陰影。視圖僅僅在Z=0的平面上投影處陰影；他們不會投影陰影在其它放在以下的視圖上面和高於z=0的平面。

有更高Z值的視圖擋住Ｚ值較低的視圖。

不管怎樣。Ｚ值不會影響到View的大小。

高度也是實用的，當在運行一些動作的時候建立動畫讓組件升起。

為視圖分配高度

一個View的Z值有兩個組成部分，elevation(高度)和translation(平移).elevation是一個靜態部分，translation 用於動畫：

Z = elevation + translationZ

不同高度的視圖的陰影

在布局檔案裡設定evelation 使用android:elevation，在代碼中使用View.setElevation()方法。
設定一個視圖的平移，使用View.setTranslationZ()方法。

新的方法ViewPropertyAnimator.z()和ViewPropertyAnimator.translationZ()能夠讓你更easy的變動視圖的高度。很多其它的資訊，看ViewPropertyAnimator的Api文檔http://developer.android.com/reference/android/view/ViewPropertyAnimator.html。和屬性動畫的開發指南：http://developer.android.com/guide/topics/graphics/prop-animation.html。

你也能夠使用StateListAnimator方式定義這些檔案在xml檔案裡。

特別適用於，狀態改變時啟動並執行動畫，比方使用者點擊button。

很多其它資訊，請看動畫檢視狀態改變,下次在動畫一節講。
Z值在測量上使用和X,Y值一樣的單位。

自己定義視圖陰影和輪廓

視圖的背景邊界決定了陰影的預設圖案。輪廓（Outlines）代表了繪圖物件的外形狀，並確定了對觸摸反饋區的波紋。

看這個視圖，定義一個背景Drawable：

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

當這個背景drawable作為視圖的輪廓。視圖投射出圓角陰影。

提供一個自己定義的輪廓，能夠覆蓋預設視圖陰影的形狀。

在自己的代碼中自己定義一個輪廓：

1.繼承ViewOutlineProvider類
2.重寫getOutline()方法
3.在視圖中設定輪廓，使用View.setOutlineProvider()方法

你能夠建立橢圓和圓角矩形輪廓使用OutLine類中的方法。視圖預設的outline provider會依據視圖的背景來產生輪廓。能夠設定視圖的outline provider為null。來阻止投射陰影。

　裁剪視圖

裁剪視圖功能，能夠讓你更easy的改變視圖的形狀。你能夠裁剪視圖為了和其它的設計項目保持一致。或者改變成形狀響應使用者的輸入。你能夠裁剪一個視圖的輪廓使用View.setClipToOutLine()方法，或者android:clipToOutline屬性。僅僅有矩形，圓角矩形，圓圈的輪廓支援被裁剪，能夠使用Outline.canClip()方法檢測是否支援被裁剪。

裁剪視圖到一個drawable的形狀。設定drawable作為視圖的背景（讓視圖顯示在其上），而且調用View.setClipToOutline()方法。

裁剪視圖是一個耗費的操作，裁剪視圖時不要使用形狀動畫。達到這樣的效果，請使用Reveal Effect 動畫(下節講)。

　總結

上面能夠看到，設定陰影非常easy：

1. 設定eleavation值。
2. 加入背景或者設定一個outline.

參考資料：http://developer.android.com/training/material/shadows-clipping.html

原文地址：http://blog.isming.me/2014/10/26/creating-app-with-material-design-three-shadows/。轉載請註明出處。

著作權聲明：本文部落格原創文章。部落格，未經同意，不得轉載。

建立Material Design風格Android應用--自訂陰影和裁剪視圖