Android Tint着色器

Android Tint着色器

概述

tint 译为着色。tint一般与tintMode配合使用。 同时还有backgroundTint和backgroundTintMode属性（很明显backgroundTint是针对背景色着色，通过实践也证实了backgroundTint只有在为控件设置了background属性才会生效。）

tintMode和backgroundTintMode有六种模式：

• src_in
• add
• multiply
• screen
• src_atop
• src_over

使用

XML中使用

<ImageView
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_margin="10dp"
    android:src="@drawable/a_normal" />

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

    <ImageView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_margin="10dp"
        android:src="@drawable/a_normal"
        app:tint="@color/red" />

    <ImageView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_margin="10dp"
        android:background="@color/white"
        android:backgroundTint="@color/red"
        android:src="@drawable/a_normal" />

</LinearLayout>

代码中使用

//修改图片颜色
val drawable: Drawable? = ContextCompat.getDrawable(this, R.drawable.a_normal)
drawable?.let {
    val tintDrawable: Drawable = DrawableCompat.wrap(it).mutate()
    DrawableCompat.setTint(tintDrawable, Color.RED)
    imageView1.setImageDrawable(tintDrawable)
}

//修改背景色
val tintDrawable: Drawable = DrawableCompat.wrap(ColorDrawable(Color.WHITE)).mutate()
DrawableCompat.setTint(tintDrawable, Color.RED)
imageView2.setImageResource(R.drawable.a_normal)
imageView2.setBackground(tintDrawable)

选择器使用

按下状态和抬起状态颜色变化：

在res/color目录下定义颜色选择器selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/red" android:state_pressed="true" />
    <item android:color="@color/black" />
</selector>

val drawable3 = ContextCompat.getDrawable(this, R.drawable.a_normal)
drawable3?.let {
    val tintDrawable = DrawableCompat.wrap(it).mutate()
    DrawableCompat.setTintList(tintDrawable,
        ContextCompat.getColorStateList(this, R.color.selector))
    imageView3.setImageDrawable(tintDrawable)
}

tintMode详解

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

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="原始图片" />

        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_margin="10dp"
            android:src="@drawable/a_normal" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="默认值 src_in" />

        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_margin="10dp"
            android:src="@drawable/a_normal"
            app:tint="@color/red" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="add" />

        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_margin="10dp"
            android:src="@drawable/a_normal"
            android:tintMode="add"
            app:tint="@color/red" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="multiply" />

        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_margin="10dp"
            android:src="@drawable/a_normal"
            android:tintMode="multiply"
            app:tint="@color/red" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="screen" />

        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_margin="10dp"
            android:src="@drawable/a_normal"
            android:tintMode="screen"
            app:tint="@color/red" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="src_atop" />

        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_margin="10dp"
            android:src="@drawable/a_normal"
            android:tintMode="src_atop"
            app:tint="@color/red" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="src_over" />

        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_margin="10dp"
            android:src="@drawable/a_normal"
            android:tintMode="src_over"
            app:tint="@color/red" />
    </LinearLayout>
</LinearLayout>