Android(Lollipop/5.0) Material Design(五) 定義陰影和裁剪View

Material Design系列

Android(Lollipop/5.0) Material Design(一) 簡介

Android(Lollipop/5.0) Material Design(二) 入門指南

Android(Lollipop/5.0) Material Design(三) 使用Material主題

Android(Lollipop/5.0) Material Design(四) 建立清單和卡片

Android(Lollipop/5.0) Material Design(五) 定義陰影和裁剪View

Android(Lollipop/5.0) Material Design(六) 使用圖檔

Android(Lollipop/5.0) Material Design(七) 自定義動畫

Android(Lollipop/5.0) Material Design(八) 保持相容性

官網：https://developer.android.com/training/material/shadows-clipping.html

材料設計介紹了UI元素的evevation屬性，幫助使用者了解每個元素相對重要性

每個View的elevation值，相當于z屬性，它決定了陰影的大小：z越大，陰影越大。

Views僅僅在z=0的平面上才會投影；它們不會投影在放置在它們下面和上面的的其他Views上。

使用較高z值的Views會阻隔使用較低z值的Views。

然而，一個View的Z值不會影響View的大小。

elevation有利于建立 在元件需要臨時上升到View的平面之上做一些操作時 的動畫。

更多關于elevation的介紹，詳見http://www.google.com/design/spec/what-is-material/elevation-shadows.html

Assign Elevation to Your Views  在Views中指定Elevation

Z值包含兩個成分：elevation和translation。 elevation是一個靜态的成分，translation使用了動畫：Z = elevation + translationZ

在layout中設定elevation，使用android:elevation屬性。在代碼中設定，使用View.setElevation()方法。

設定一個View的translation,使用View.setTranslationZ()方法。

ViewPropertyAnimator.z()和ViewPropertyAnimator.translationZ() 能使你更輕易的推動Views的elevation。

您還可以使用一個StateListAnimator指定這些動畫聲明的方式。在狀态改變觸發動畫的情況下，這是特别有用的，比如當使用者按下一個按鈕時。

Customize View Shadows and Outlines  自定義View的陰影和輪廓

View的背影圖檔的邊界确定了陰影的預設圖形。輪廓代表一個圖形對象的外部形狀和定義的用于觸摸回報的波紋區域。

參考：

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

因為背景圖檔定義了View的輪廓(outline)，是以View會投放一個使用了圓角的陰影。提供一個自定義的輪廓重寫View的預設陰影圖形。 自定義輪廓在代碼中： ·繼承自ViewOutlineProvider ·重寫getOutline() ·使用View.setOutlineProvider()，指派新的輪廓

使用Outline類的一些方法，建立圓角矩形和 橢圓的輪廓。預設的outline provider 包含了View的背影輪廓。阻止一個View的投影，可以設定View的ouline provider 為null。

Clip Views  裁剪

剪裁視圖使您能夠輕松地更改視圖的形狀。你可以統一裁剪成使用了其他設計元素，或在響應使用者輸入時改變View的形狀。可以裁剪View的外部輪廓區域，使用View.setClipToOutline()或者android:clipToOutline屬性。隻有矩形、圓形、圓角矩形支援輪廓的裁剪，由Outline.canClip()方法來确定。 當要裁剪成一個圖檔的形狀時，需要設定該圖檔為View的背景，并調用 View.setClipToOutline()。

裁剪是一個奢侈的操作，不要使用動态圖形來裁剪。為了實作這種效果，可以使用動畫來展現。