自定义控件实现imageview的点击效果

自定义控件给Imageview设置点击效果

Imageview的点击效果，可能是个很容易被忽视的问题。

对于本地图片的点击效果，可以准备两张图片，加selector实现。
但是如果是动态加载来的图片呢？动态加载图片的一般应用场景都是在listview等控件中，这个时候通常是给itemview整体设置点击效果，而通常不需要imageview反馈点击效果。这个效果我就不举例了，有点开发经验的应该都很熟练了。

但是有时候我们需要Imageview来显示点击的效果，当itemview中Imageview控件作为主体占据全部或者绝大多数面积的时候。

比如豆瓣阅读中书列表

来分析下这种效果的实现逻辑，最直接能想到的就是继承view，然后在onDraw方法里画图片，监听onTouchEvent事件改变绘制内容的状态。但是我们已经有了Imageview这个现成的类为我们做好了许多工作，所以本文采用继承自Imageview的方式。Imageview内容的绘制当言也是在onDraw方法中，关于点击事件的触发处理，当言也可以放在onTouchEvent方法中，但是我阅读了下view的源码发现有一个天然的回调方法dispatchSetPressed，或许可以一试。

选好了内容改变的时机，接下来就是内容改变的方式。我第一个想法图片变暗就像多绘制了一层透明的黑色，代码如下

@Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        if (pressed) {            canvas.drawColor(Color.parseColor("#7a000000"));        }    }    @Override    protected void dispatchSetPressed(boolean pressed) {        super.dispatchSetPressed(pressed);        this.pressed = pressed;        invalidate();    }

效果也还行

但是对于一些内容图片本身不是矩形的情况就不好使了。所以不是最佳方案。

那怎么能针对所有的图片都有效果呢，答案自然是改变绘制的内容本身。
既然改变内容，imageview绘制的主要内容当然就是里边的drawable对象了，看看drawable对象的一些方法。

第一个方法clearColorFilter吸引了我的注意，既然是clearColorFilter，drawAble对象肯定用到了ColorFilter，于是想到了爱哥文章自定义控件其实很简单1/6中提到的一个变暗的ColorFilter，或许可以一战。
代码如下：

final ColorMatrix colorMatrix = new ColorMatrix(new float[] { 0.5F, 0, 0, 0, 0, 0, 0.5F, 0, 0, 0, 0, 0, 0.5F, 0, 0, 0, 0, 0, 1, 0, });    @Override    protected void dispatchSetPressed(boolean pressed) {        super.dispatchSetPressed(pressed);        if (pressed) {            getDrawable().setColorFilter(new ColorMatrixColorFilter(colorMatrix));        } else {            getDrawable().setColorFilter(null);        }    }

注意这里使用getDrawable得到的对象就是绘制的内容，调用方法setColorFilter之后就会回调drawable对象绑定的回调对象也就是当前的view对象的invalidate方法。所以不用手动再调用invalidate方法。
最后附上一个整体的效果。

第一个imageview的背景selector

<selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_pressed="true">        <color android:color="#efefef"></color>    </item>    <item android:state_pressed="false">        <color android:color="#ffffff" />    </item></selector>