# Elevation高度、shadows阴影、clipping裁剪、tint着色

### Elevation

Android5.0加入了Z轴，这个Z轴的值就是View的高度Elevation

* elevation的值较大的View会遮盖住较小的

![这里写图片描述](https://2351062869-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7b2CdwBN9liniVJpfEAc%2Fuploads%2Fgit-blob-e280617788f1e16eaf4a5a9bba3c5242b2709243%2F4e4899f564b1eb88371c5df9d9459394.png?alt=media)

code:

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

效果如下： ![这里写图片描述](https://2351062869-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7b2CdwBN9liniVJpfEAc%2Fuploads%2Fgit-blob-3b0ee84924a97b60f0b94ff6c8437101e8840e32%2F2555efc5593a49860b2d4163a7c3ea04.png?alt=media)

当然任何控件都会有默认的elevation高度： ![这里写图片描述](https://2351062869-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7b2CdwBN9liniVJpfEAc%2Fuploads%2Fgit-blob-b8445d1503d2c66a5876efaf6a2d5058aa60bee6%2F2601aa900280bef3b6bb624bcad550c2.png?alt=media)

### Shadows阴影和Outline轮廓

* 轮廓outline代表图形对象的形状
* 轮廓outline决定阴影的形状
* 轮廓outline定义触摸反馈的波纹区域。
* 默认的轮廓为背景可绘制对象，即background
* shadows阴影的大小是由elevation高度决定的，高度越大，阴影面积越大

自定义轮廓为圆角矩形：

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

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

在Java中设置轮廓：

```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
<?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： ![这里写图片描述](https://2351062869-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7b2CdwBN9liniVJpfEAc%2Fuploads%2Fgit-blob-ab1c0c4e311df9fa47431a351be27349d2a24893%2F7a01132f8298b51338c13fd7247ed620.png?alt=media) 100dp： ![这里写图片描述](https://2351062869-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7b2CdwBN9liniVJpfEAc%2Fuploads%2Fgit-blob-8ce78e7a0157ebeb9658299755c15e55324612f9%2Fabce18cfc2b7fd007bc41309c9fd6917.png?alt=media)

这样就很清楚了，所谓的阴影，是因为我们从上方垂直观察直立的物体产生的。 就像我们从高空俯视大楼。

**android:outlineProvider属性**

这个属性顾名思义：outline 轮廓的提供者，他有以下几个属性:

* none 没有轮廓，即没有阴影
* background，由background提供轮廓，默认是这个选项，如果没有设置background，则不会产生阴影
* bounds，paddedBounds 由View的默认矩形边界作为outline，在layout编辑预览中可以看到
* bounds，和 paddedBounds的区别在于：

```java
   <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"/>
```

![这里写图片描述](https://2351062869-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7b2CdwBN9liniVJpfEAc%2Fuploads%2Fgit-blob-dfc788231780c66ac231a66eb8391d4c213d352b%2F65c2c18229e9f5dc479f985a048b97d7.png?alt=media)

前者阴影会填充设置的padding 后者则不会 ps:这两个属性的区别折腾我老久了T-T

### 根据轮廓Clipping裁剪视图

裁剪操作非常耗时，不要加入动画

```java
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指定着色的模式：

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

![这里写图片描述](https://2351062869-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7b2CdwBN9liniVJpfEAc%2Fuploads%2Fgit-blob-4994ee67553de0d628ad7d9529002952c9820485%2Fdf7771dae1a633dc9741788f0bf20c54.png?alt=media)
