Android Material Design-Defining Shadows and Clipping Views(定義陰影和裁剪檢視)-(四)

weixin_34321977發表於2017-05-05

轉載請註明出處:http://blog.csdn.net/bbld_/article/details/40539131

翻譯自:http://developer.android.com/training/material/shadows-clipping.html 


Material Design引入了深度的UI元素。深入幫助使用者瞭解每一個元素的相對重要性。並把注意力集中到手頭上正在做的事情。

一個檢視(控制元件),由Z屬性表示的高程(elevation),決定了它的影子的大小:有更高的Z值得檢視就具有更大的陰影。檢視只只投下在Z=0平面上的陰影;它們並不投影在在它們以下和上面Z=0平面的其他檢視中。

具有較高Z值檢視(控制元件)會擋住較低Z值的檢視。可是,一個檢視的Z值並不會影響到該檢視的大小。

當控制元件臨時越過平面檢視執行某些操作時,高程對建立動畫是實用的。

 

在你的檢視(控制元件)中指定高程(elevation)

一個檢視的Z值由兩部分組成:高程和轉換。高程是靜態分量。轉換是用於動畫的。

Z = elevation +translationZ


                                     圖一:具有不同elevation屬性值的檢視控制元件的陰影

要在佈局中設定檢視控制元件的高程,使用android:elevation屬性。

要在程式碼中去設定檢視的高程,使用View.setElevation()方法。

要設定一個檢視的轉換(translation)。使用View.setTranslationZ()方法。

新的ViewPropertyAnimator.z()ViewPropertyAnimator.translationZ()方法能讓你輕鬆地進行檢視高程的更改。欲瞭解很多其它的資訊,請參閱請參閱ViewPropertyAnimator的API文件PropertyAnimation(屬性動畫)的開發人員指引。

你也能夠使用StateListAnimator以宣告方式來指定這些動畫。

對於當狀態改變時觸發動畫的一些情況,這是特別實用的,比方使用者按下了一個button。

很多其它的資訊,請參閱Animate View State Changes(Defining Custom Animations(自己定義動畫))

Z值是像X和Y值那樣。在同一個(圖形)單位中測量的。

 

自己定義檢視陰影和輪廓

一個檢視的背景繪製決定了其陰影的預設形狀。

輪廓表示圖形物件的外部形狀,並限定了觸控反饋的波紋(ripple)區域。

請看以下的檢視(TextView),定義了背景的圖片資源:

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

該檢視控制元件蒙上了帶有圓角的陰影。由於背景圖片資源定義了這個檢視的輪廓。

提供自己定義的輪廓去覆蓋檢視陰影的預設形狀。

在你的程式碼中自己定義檢視的輪廓:

1. 繼承ViewOutlineProvider

2.  重寫getOutline() getOutline()方法

3.  使用View.setOutlineProvider()方法分配新的輪廓給你的檢視

通過Outline類裡的方法,你能夠建立帶圓角的橢圓和矩形形狀。檢視的預設輪廓提供者(provider)是從檢視的背景來獲得其輪廓的。為了防止為檢視蒙上陰影。設定它的輪廓提供者為空。


裁剪檢視

裁剪檢視能讓你輕鬆地改變檢視的形狀。你能夠為了一致性而使用其他的設計元素裁剪檢視或者為了響應使用者的輸入改變檢視的形狀。你能夠使用View.setClipToOutline()法或者使用android:clipToOutline屬性來裁剪檢視自己的輪廓形狀。僅僅有矩形、圓形、圓角矩形的輪廓支援裁剪,這是由Outline.canClip()方法來決定的。

為了裁剪檢視得到指定的形狀的影象資源,設定檢視的背景資源(如上面所看到的)。並呼叫View.setClipToOutline方法。

裁剪檢視是一個代價較高的操作,所以不要使形狀看起來生動而去裁剪檢視。實現這種效果你應該使用Reveal Effect(Defining Custom Animations(自己定義動畫))動畫。




demo比較簡單,就上面的兩片程式碼就不貼上來了。











相關文章