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的图片上面覆盖一层半透明白色效果!
网友评论