Android 一张图片使用tint(着色)实现selector点击效果

Android项目开发过程中经常会遇到按钮、图片点击效果的实现，不管背景是颜色还是图片一般常用做法都是用selector实现，类似下面的代码：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/ic_cm_on"/>
    <item android:state_pressed="false" android:drawable="@drawable/ic_cm_off"/>
</selector>

这样的做法虽然也可以，但难免有些麻烦，drawable目录下要新建很多xml文件，如果是图片点击效果，可能还需要在项目中添加两种状态的图片。

所以今天给大家介绍用tint着色来实现点击效果，简单理解tint就是在原有的图片或者颜色上面覆盖一层颜色，类似遮罩，但是可以设置不同的模式从而实现不同的遮罩效果，一般View有tint、tintMode，backgroudTint、backgoudTintMode,foregroundTint、foregroundTintMode这些属性可以设置，分别对应图片着色(模式)、背景着色(模式)、前景着色(模式)，tint只能设置颜色，tintMode一般可以设置为这些值：

Mode.CLEAR;
Mode.SRC;
Mode.DST;
Mode.SRC_OVER;
Mode.DST_OVER;
Mode.SRC_IN;
Mode.DST_IN;
Mode.SRC_OUT;
Mode.DST_OUT;
Mode.SRC_ATOP;
Mode.DST_ATOP;
Mode.XOR;
Mode.DARKEN;
Mode.LIGHTEN;
Mode.MULTIPLY;
Mode.SCREEN;
Mode.ADD;
Mode.OVERLAY;

具体各有什么效果，我就不多说了，大家可以自行尝试，下面是我根据tint这个特性封装的一个自带点击效果的ImageView，类似的TextView、Button等都可以按照这种方式进行重写：

public class TintImageView extends AppCompatImageView {

    private int tintColor = Color.argb(10,255,255,255);

    public TintImageView(@NonNull Context context) {
        super(context);
        init(context,null);
    }

    public TintImageView(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs);
    }

    public TintImageView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }

    private void init(Context context,AttributeSet attrs){
        if (null != attrs){
            TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.TintImageView);
            if (typedArray != null) {
                tintColor = typedArray.getColor(R.styleable.TintImageView_tintColor,Color.argb(10,255,255,255));
            }
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                this.setImageTintList(ColorStateList.valueOf(tintColor));
                this.setImageTintMode(getImageTintMode() == null? PorterDuff.Mode.ADD:getImageTintMode());
                break;
            case MotionEvent.ACTION_UP:
                this.setImageTintList(null);
                break;
        }
        return super.onTouchEvent(event);
    }
}

attrs.xml

<declare-styleable name="TintImageView">
        <attr name="tintColor" format="color"/>
</declare-styleable>

我这里tint设置的是一个半透明白色，tintMode设置的是ADD，效果就是按下后在ImageView的图片上面覆盖一层半透明白色效果！