使用Material Design Tint和视图详解

视图

首先来讲Material Design 视图的概念，在新的api中，新添加了z轴的概念，z轴垂直于屏幕，用来表现元素的层叠关系，z值（海拔高度）越高，元素离界面底层（水平面）越远，投影越重，这里有一个前提，所有的元素的厚度都是1dp。

Material Design中UI主打扁平化，但是这种扁平化是扁而不平，是对现实的拟物扁平化，所以引入z轴空间的概念，即所有元素都有默认的海拔高度，对它进行操作会抬升它的海拔高度，操作结束后，它应该落回默认海拔高度。同一种元素，同样的操作，抬升的高度是一致的。

既然加入z轴，那么这种空间感是怎么体现出来的呢？答案就是View的elevation（阴影高度），细心的可以发现在Android 5.0后所有控件中都多了这么两个属性：elevation、translationZ。分别表示阴影的大小和往z轴平移的大小（用作动画效果）。不过这两个属性只在api 21（5.0）以上才有效果。在z轴上有这么一个关系：

Z = elevation + translationZ

我们可以在layout中或者在代码中使用它们：

android:elevation
View.setElevation()

Tint详解

在Android 5.0后，引入了一个叫tint的属性，意思叫“着色”，有两种形式：

1、android:backgroundTint=””
2、android:tint=”“

细心的同学就会发现，在给一些控件（Button、EditText等）设置背景时候可以看到新添加了backgroundTint属性：

而在给ImageView设置时候，则添加了tint和backgroundTint属性：

同时，还分别新增了与之对应的TintMode属性，表示tint的模式：

那么，既然有了background可以设置背景色还加入Tint干嘛呢？Tint是用来是干什么的呢？
首先我们得了解这两个属性的用处：

了解之前我们先了解TintMode

顾名思义，TintMode是改变我们着色的模式。
Mode的取值有六种：

1、add -
2、screen -
3、src_over -
4、src_in -
5、multiply -
6、src_atop -

关于它们的特性请看传送门：PorterDuff.Mode
一般情况下默认是src_in。

1、backgroundTint - 当然是着背景色了

那么我们就来使用它试试效果，我们给Button着上红色的背景色：

<Button
        android:id="@+id/btn2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/red"
        android:text="Button2" />

效果：

我们发现这背景色并没有改变，为什么呢？既然tint是给背景色着色，那么肯定是需要有背景色的前提下，我们给Button随便加上一个背景颜色后：

<Button
        android:id="@+id/btn2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/red"
        android:background="#ffffff"
        android:text="Button2" />

效果：

可以发现，tint的作用的却是给当前控件的背景色着上一个我们指定的颜色。

每个模式不同的效果想看的自己实现，这里就不贴了，因为重点是下面对ImageView的遮罩进行着色。

2、tint - 则是给图片着上一层遮罩颜色

废话不多说，贴一张效果图自然明白了，我们给图片罩上一层红色的遮罩后，不同模式显示的效果：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="10dp"
    tools:context=".MainActivity">

    <