Material Design —— Elevation高度、shadows陰影、clipping裁剪、tint着色

Elevation

Android5.0加入了Z軸，這個Z軸的值就是View的高度Elevation

• elevation的值較大的View會遮蓋住較小的

code:

<AbsoluteLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <FrameLayout
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#000"
        android:elevation="10dp">
    </FrameLayout>

    <FrameLayout
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_x="50dp"
        android:layout_y="50dp"
        android:background="#CCC"
        android:elevation="5dp">
    </FrameLayout>

</AbsoluteLayout>

效果如下：

當然任何控件都會有默認的elevation高度：

Shadows陰影和Outline輪廓

• 輪廓outline代表圖形對象的形狀
• 輪廓outline決定陰影的形狀
• 輪廓outline定義觸摸反饋的波紋區域。
• 默認的輪廓爲背景可繪製對象，即background
• shadows陰影的大小是由elevation高度決定的，高度越大，陰影面積越大

自定義輪廓爲圓角矩形：

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

<FrameLayout
   android:layout_width="100dp"
   android:layout_height="100dp"
   android:background="@drawable/myrect"
   android:elevation="5dp">
</FrameLayout>

在Java中設置輪廓：

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

陰影

陰影的設置也很簡單，只要給一個elevation高度，view就擁有陰影了。
爲什麼是elevation決定陰影的面積呢？
如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <FrameLayout
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:elevation="20dp"
        android:outlineProvider="bounds">
    </FrameLayout>
</LinearLayout>

我們將這個Fragment的高度設置爲20dp：

100dp：

這樣就很清楚了，所謂的陰影，是因爲我們從上方垂直觀察直立的物體產生的。
就像我們從高空俯視大樓。

android:outlineProvider屬性

這個屬性顧名思義：outline 輪廓的提供者，他有以下幾個屬性:

• none 沒有輪廓，即沒有陰影
• background，由background提供輪廓，默認是這個選項，如果沒有設置background，則不會產生陰影
• bounds，paddedBounds 由View的默認矩形邊界作爲outline，在layout編輯預覽中可以看到

• bounds，和 paddedBounds的區別在於：

  <ImageView
      android:layout_width="180dp"
      android:layout_height="180dp"
      android:padding="10dp"
      android:elevation="20dp"
      android:outlineProvider="paddedBounds"
      android:src="@mipmap/ic_launcher"/>
  
  <ImageView
      android:layout_width="180dp"
      android:layout_height="180dp"
      android:padding="10dp"
      android:elevation="20dp"
      android:outlineProvider="bounds"
      android:src="@mipmap/ic_launcher"/>

  前者陰影會填充設置的padding
  後者則不會
  ps:這兩個屬性的區別折騰我老久了T-T

根據輪廓Clipping裁剪視圖

裁剪操作非常耗時，不要加入動畫

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);  
/* Sets the Outline of the View. */  
clippedView.setOutline(mClip);  
/* Enables clipping on the View. */  
clippedView.setClipToOutline(true);  

着色Tint

Material Design 着色是一個很有意思的接口：
使用着色很簡單，使用tint指定着色的色彩，使用tintmode指定着色的模式：

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:padding="10dp"
            android:src="@mipmap/ic_launcher"
            android:tint="@color/colorPrimary"/>

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:padding="10dp"
            android:src="@mipmap/ic_launcher"
            android:tint="@color/colorPrimary"
            android:tintMode="screen"/>

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:padding="10dp"
            android:src="@mipmap/ic_launcher"
            android:tint="@color/colorPrimary"
            android:tintMode="add"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:padding="10dp"
            android:src="@mipmap/ic_launcher"
            android:tint="@color/colorPrimary"
            android:tintMode="src_atop"/>

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:padding="10dp"
            android:src="@mipmap/ic_launcher"
            android:tint="@color/colorPrimary"
            android:tintMode="src_in"/>

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:padding="10dp"
            android:src="@mipmap/ic_launcher"
            android:tint="@color/colorPrimary"
            android:tintMode="src_over"/>
    </LinearLayout>