使用Material Design Tint和视图详解

来源：互联网发布：无线信号探测软件编辑：程序博客网时间：2024/04/30 10:51

视图

首先来讲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">    <LinearLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content">        <ImageView            android:layout_width="100dp"            android:layout_height="100dp"            android:src="@mipmap/bg" />        <Space            android:layout_width="30dp"            android:layout_height="match_parent" />        <ImageView            android:layout_width="100dp"            android:layout_height="100dp"            android:src="@mipmap/bg"            android:tint="@color/red" />        <Space            android:layout_width="30dp"            android:layout_height="match_parent" />        <ImageView            android:layout_width="100dp"            android:layout_height="100dp"            android:src="@mipmap/bg"            android:tint="@color/red"            android:tintMode="add" />    </LinearLayout>    <LinearLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content">        <ImageView            android:layout_width="100dp"            android:layout_height="100dp"            android:src="@mipmap/bg"            android:tint="@color/red"            android:tintMode="src_atop" />        <Space            android:layout_width="30dp"            android:layout_height="match_parent" />        <ImageView            android:layout_width="100dp"            android:layout_height="100dp"            android:src="@mipmap/bg"            android:tint="@color/red"            android:tintMode="src_over" />        <Space            android:layout_width="30dp"            android:layout_height="match_parent" />        <ImageView            android:layout_width="100dp"            android:layout_height="100dp"            android:src="@mipmap/bg"            android:tint="@color/red"            android:tintMode="multiply" />    </LinearLayout>    <LinearLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content">        <ImageView            android:layout_width="100dp"            android:layout_height="100dp"            android:src="@mipmap/bg"            android:tint="@color/red"            android:tintMode="screen" />        <Space            android:layout_width="30dp"            android:layout_height="match_parent" />        <ImageView            android:layout_width="100dp"            android:layout_height="100dp"            android:src="@mipmap/bg"            android:tint="@color/red"            android:tintMode="src_in" />    </LinearLayout></LinearLayout>

Tint兼容性

上述效果均是在Android 5.0以上的平台上才支持，不过，如果我们想支持5.0以下的，我们可以使用support-v7包下的AppCompat**** 控件，不过我们还是不能在layout中使用它，只能通过代码

ViewCompat.setSupportBackgroundTintList(ColorStateList tint);ViewCompat.setSupportBackgroundTintMode(PorterDuff.Mode tintMode);

来设置。setSupportBackgroundTintList()方法接收的是一个ColorStateList类型的参数，我们可以通过

ColorStateList lists = getResources().getColorStateList(R.color.red);

得到对应颜色的ColorStateList对象，并设置给它。

如，下面我使用AppCompat控件并着色：

<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:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    tools:context=".MainActivity">    <android.support.v7.widget.AppCompatButton        android:id="@+id/btn1"        android:layout_width="match_parent"        android:layout_height="50dp"        android:text="Button" />    <Space        android:layout_width="match_parent"        android:layout_height="50dp" />    <android.support.v7.widget.AppCompatEditText        android:id="@+id/edt"        android:layout_width="match_parent"        android:layout_height="50dp" /></LinearLayout>

代码：

protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        AppCompatButton mBtnCompat = (AppCompatButton) findViewById(R.id.btn1);        ColorStateList lists = getResources().getColorStateList(R.color.red);        mBtnCompat.setSupportBackgroundTintList(lists);        mBtnCompat.setSupportBackgroundTintMode(PorterDuff.Mode.SRC_IN);        ColorStateList lists2 = getResources().getColorStateList(R.color.bule);        AppCompatEditText mEdt = (AppCompatEditText) findViewById(R.id.edt);        mEdt.setSupportBackgroundTintList(lists2);    }

其实AppCompatEditText中底下那根线是一张黑色的.9线条图片，AppCompatButton也是通过一张.9图片进行着色的，所以我们通过backgroundTint能让它着成不同的颜色。
效果：
这里写图片描述

所以，综上的效果，backgroundTint和android：tint属性可以帮我们在原图只有一张的情况下，我们利用tint可以轻松的把图片换成我们需要的颜色，这极大减小了apk因包含众多图片的大小。

让自定义控件加上对Tint支持

在5.0以下，我们对自定义的控件也加上对tint的支持：

public class AppCompatCustomView extends View implements TintableBackgroundView {    private static final int[] TINT_ATTRS = {            android.R.attr.background    };    private TintInfo mInternalBackgroundTint;    private TintInfo mBackgroundTint;    private TintManager mTintManager;    public AppCompatCustomView(Context context) {        this(context, null);    }    public AppCompatCustomView(Context context, AttributeSet attributeSet) {        this(context, attributeSet, 0);    }    public AppCompatCustomView(Context context, AttributeSet attributeSet, int defStyle) {        super(context, attributeSet, defStyle);        if (TintManager.SHOULD_BE_USED) {            TintTypedArray a = TintTypedArray.obtainStyledAttributes(context, attributeSet,                    TINT_ATTRS, defStyle, 0);            if (a.hasValue(0)) {                ColorStateList tint = a.getTintManager().getTintList(a.getResourceId(0, -1));                if (tint != null) {                    setInternalBackgroundTint(tint);                }            }            mTintManager = a.getTintManager();            a.recycle();        }    }    private void applySupportBackgroundTint() {        if (getBackground() != null) {            if (mBackgroundTint != null) {                TintManager.tintViewBackground(this, mBackgroundTint);            } else if (mInternalBackgroundTint != null) {                TintManager.tintViewBackground(this, mInternalBackgroundTint);            }        }    }    @Override    protected void drawableStateChanged() {        super.drawableStateChanged();        applySupportBackgroundTint();    }    private void setInternalBackgroundTint(ColorStateList tint) {        if (tint != null) {            if (mInternalBackgroundTint == null) {                mInternalBackgroundTint = new TintInfo();            }            mInternalBackgroundTint.mTintList = tint;            mInternalBackgroundTint.mHasTintList = true;        } else {            mInternalBackgroundTint = null;        }        applySupportBackgroundTint();    }    @Override    public void setSupportBackgroundTintList(ColorStateList tint) {        if (mBackgroundTint == null) {            mBackgroundTint = new TintInfo();        }        mBackgroundTint.mTintList = tint;        mBackgroundTint.mHasTintList = true;        applySupportBackgroundTint();    }    @Nullable    @Override    public ColorStateList getSupportBackgroundTintList() {        return mBackgroundTint != null ? mBackgroundTint.mTintList : null;    }    @Override    public void setSupportBackgroundTintMode(PorterDuff.Mode tintMode) {        if (mBackgroundTint == null) {            mBackgroundTint = new TintInfo();        }        mBackgroundTint.mTintMode = tintMode;        mBackgroundTint.mHasTintMode = true;        applySupportBackgroundTint();    }    @Nullable    @Override    public PorterDuff.Mode getSupportBackgroundTintMode() {        return mBackgroundTint != null ? mBackgroundTint.mTintMode : null;    }}

2 0