定義陰影與裁剪視圖

http://developer.android.com/intl/zh-cn/training/material/shadows-clipping.html

Material Design爲 UI 元素引入高度。視圖的高度將幫助用戶更好的瞭解元素間的層次關係,而陰影效果正是高度這一屬性(View的 Z 屬性)在視覺上的表現。

指定視圖高度

視圖的 Z 值包含兩個部分:

  • Elevation:靜態屬性。
  • Translation:用於動畫的動態屬性。

Z = elevation + translationZ
這裏寫圖片描述
圖 1 - 不同視圖高度的陰影。

  1. 設置視圖的高度

    使用 android:elevation屬性,或者在代碼使用 View.setElevation() 方法。如果要設置視圖Translation,可以使用使用 View.setTranslationZ() 方法。

  2. 設置視圖陰影變化的動畫

    全新的 ViewPropertyAnimator.z() 與 ViewPropertyAnimator.translationZ() 方法讓您能夠輕鬆地爲視圖高度添加動畫。 詳情: ViewPropertyAnimator。
    也可使用 StateListAnimator 設置動畫。詳情: Animate View State Changes.

  3. Z 值以 dp(密度獨立像素)爲單位度量。

定製視圖陰影與輪廓

視圖的背景圖片的邊界將決定其陰影的默認形狀。(輪廓代表圖形對象的外形並定義觸摸反饋的波紋區域。)

  1. xml文件中定義示例:
<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>

視圖將投射一個帶有圓角的陰影,因爲背景圖片形狀(圓角矩形)決定了視圖(TextView)的輪廓。
2. 如果要在代碼中的自定義視圖輪廓,則可以通過以下幾個步驟:

        1. 繼承 ViewOutlineProvider 類。
        2. 複寫 getOutline() 方法。
        3. 利用 View.setOutlineProvider() 方法爲視圖指定新的輪廓。
        4. (通常需要配合剪裁視圖一起使用,具體見下面的介紹)

可以使用 Outline 類別中的方法創建帶有圓角的橢圓形或矩形輪廓。視圖的默認輪廓爲其背景輪廓。 如果要防止視圖投射陰影,請將其outline provider設置爲 null。
3. 代碼示例:

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super .onCreate(savedInstanceState);
        setContentView(R.layout. activity_main);

        TextView texView2 = (TextView)findViewById(R.id. myview2);

        //設置陰影輪廓
        texView2.setOutlineProvider( new ViewOutlineProvider() {
            @Override
            public void getOutline(View view, Outline outline) {
               //圓形輪廓
                outline.setOval(0,0 ,view.getMeasuredWidth(), view.getMeasuredHeight());
            }
        });
        //將視圖按照Outline(輪廓)剪裁
        texView2.setClipToOutline( true);
    }
}

Demo截圖:
這裏寫圖片描述
TextView1: 未經過處理(用於效果對比,視圖陰影效果皆爲:android:elevation=”24dp”)
TextView2: 參照以上方法在xml中設置輪廓效果(由demo中看,xml中設置的陰影效果似乎存在問題)
TextView3: 使用示例代碼進行設置輪廓及剪裁視圖後的效果。(這裏一定要對視圖進行剪裁(texView2.setClipToOutline(true );),否則只有陰影輪廓是圓形而TextView仍爲正方形)

裁剪視圖

裁剪視圖即可以改變視圖形狀。可以通過 View.setClipToOutline()方法或 android:clipToOutline 屬性將視圖裁剪至其輪廓的形狀。但是據Outline.canClip()方法可知,僅有矩形、圓形和圓角矩形輪廓支持如此裁剪。
(Note:裁剪視圖是一個成本高昂的操作,因此儘量避免爲剪裁的視圖添加動畫效果。 如果真有這種需求,可以參照Reveal Effect。)

發佈了42 篇原創文章 · 獲贊 90 · 訪問量 13萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章