android ImageView实现变暗效果

android项目中作一个默认图片变暗,有焦点时变亮的效果。相信你们都能各类办法,各类手段很容易的实现这个效果。这里记录下做者实现这个效果的过程及遇到的问题,仅供参考。
见下图(注:由于是eclipse截图,因此有点色差,黄色变成蓝色,不过暗亮的效果仍是明显的):
               html


1.脑壳里转的第一个实现的想法是:
    2张图片,一张暗图,一张亮图。监听焦点事件,更换图片。
    一个资源图片弄2份,而且这图片是从服务器上获取的,不实际。
java

2.记得以前有过用设置控件的透明度。好,来试试:
     有2个不一样的重载方法,形参分别为float和int。这俩有啥区别呢? android

public void setAlpha(float alpha)

设置View的透明度为0~1的值,0彻底透明,1彻底不透明。注意这里说的是View api

public void setAlpha(int alpha)

设置View的透明度为0~255的值,0彻底透明,255彻底不透明。
服务器

设置 image 的透明度,而且该方法在API 16的版本里被setImageAlPha(int)代替 eclipse

眼见为实,来分别看看效果: 测试

iv.setAlpha(0.5f)效果图为: this

setImageAlpha(100),效果为:╮(╯▽╰)╭报异常退出了。 spa

07-08 21:17:12.012: E/AndroidRuntime(29310): java.lang.NoSuchMethodError: android.widget.ImageView.setImageAlpha

测试机为android4.0.3,对应api为15.eclipse里有设置对应为16的api,但一运行就挂了╮(╯▽╰)╭。目测应该是兼容性问题,这里不深究了,感受上篇讲的targetVersion有关,不过没验证。
这里还有另一个方法,iv.getBackground().setAlpha(100);运行效果出来和上图使用iv.setAlpha(0.5f),不过透明程度有点不一致(但没大看出来)。前者值为(1~255),后者为(0~1)。 code

到这里你们应该发现,和想要实现的效果相差甚远吧,做者也大失所望。

继续找找还有啥子方法呢?不当心找到了个这个方法:

颜色过滤?是不ps的滤镜?来看下怎么用:

经过setColorFilter能够实现滤镜效果。 如: final WallpaperManager wallpaperManager = WallpaperManager.getInstance(this);
         //获取壁纸
 final Drawable wallpaperDrawable = wallpaperManager.getDrawable();
 //指定滤镜颜色以及混合模式
wallpaperDrawable.setColorFilter(Color.RED, PorterDuff.Mode.MULTIPLY);
/*注意:PorterDuff.Mode枚举值:
 1.PorterDuff.Mode.CLEAR 所绘制不会提交到画布上。
 2.PorterDuff.Mode.SRC 显示上层绘制图片
 3.PorterDuff.Mode.DST 显示下层绘制图片
 4.PorterDuff.Mode.SRC_OVER 正常绘制显示,上下层绘制叠盖。
 5.PorterDuff.Mode.DST_OVER 上下层都显示。下层居上显示。
 6.PorterDuff.Mode.SRC_IN 取两层绘制交集。显示上层。
 7.PorterDuff.Mode.DST_IN 取两层绘制交集。显示下层。
 8.PorterDuff.Mode.SRC_OUT 取上层绘制非交集部分。
 9.PorterDuff.Mode.DST_OUT 取下层绘制非交集部分。
10.PorterDuff.Mode.SRC_ATOP 取下层非交集部分与上层交集部分
11.PorterDuff.Mode.DST_ATOP 取上层非交集部分与下层交集部分
12.PorterDuff.Mode.XOR //变暗
13.PorterDuff.Mode.DARKEN //调亮
14.PorterDuff.Mode.LIGHTEN //用于颜色滤镜
15.PorterDuff.Mode.MULTIPLY
16.PorterDuff.Mode.SCREEN


来试下效果:


iv.setColorFilter(Color.TRANSPARENT,PorterDuff.Mode.XOR);
貌似效果没变。看看上面用法说明
Set a tinting option for the image

是设置图片image,不是控件ImageView的.换成下面的用法:

Drawable drawable = imgs.get(i);
drawable.setColorFilter(Color.TRANSPARENT,PorterDuff.Mode.XOR);
iv.setImageDrawable(drawable);
仍是没效果。
再仔细琢磨下,是不上面用的颜色值不对呢?换下成Color.GRAY,也不对。以后无论用哪一个颜色,图片都显示不出来。


 好吧,我妥协了。用上面帖子里的例子试下吧。改为多层样式的:
drawable.setColorFilter(Color.GRAY,PorterDuff.Mode.MULTIPLY);

O(∩_∩)O~哈哈,效果出来了:

这是个不错的尝试。而后获取焦点时,把这个滤镜清掉就OK了。

drawable.clearColorFilter();
显示为原始亮图了。

注:其实做者最开始贴上去的2张图并非用上面滤镜方法实现的。上面方法只是在整理这篇博客时,临时发现的。就尝试下,没想到成功了。早知道当时就都多试几回,就不用下面这种方法了。


继续瞅瞅ImageView的api吧,看看都有些啥子属性。相信你们都会注意到ImageView特有的这2个方法:

public void setImageDrawable (Drawable drawable)

Added in API level 1
Sets a drawable as the content of this ImageView.

Parameters
drawable	The drawable to set



public void setBackgroundDrawable(Drawable background)
This method was deprecated in API level 16. use setBackground(Drawable) instead
这2者有啥区别呢?这个相信用过的人都不难理解。

当设置setBackgroundDrawable时,整个ImageView的控件背景色会变。
当设置setImageDrawable时,ImageView中间内容区会被图片填充。可是周围会有一些边距,默认没法填充整个控件(固然,这也是有属性设置的)。

ScaleType的值分别表明的意义: ImageView是Android中的基础图片显示控件,该控件有个重要的属性是ScaleType,该属性用以表示显示图片的方式,共有8种取值   
ScaleType.CENTER::图片大小为原始大小,若是图片大小大于ImageView控件,则截取图片中间部分,若小于,则直接将图片居中显示。   
ScaleType.CENTER_CROP:将图片等比例缩放,让图像的短边与ImageView的边长度相同,即不能留有空白,缩放后截取中间部分进行显示。   
ScaleType.CENTER_INSIDE:将图片大小大于ImageView的图片进行等比例缩小,直到整幅图可以居中显示在ImageView中,小于ImageView的图片不变,直接居中显示。   
ScaleType.FIT_CENTER:ImageView的默认状态,大图等比例缩小,使整幅图可以居中显示在ImageView中,小图等比例放大,一样要总体居中显示在ImageView中。   
ScaleType.FIT_END:缩放方式同FIT_CENTER,只是将图片显示在右方或下方,而不是居中。   
ScaleType.FIT_START:缩放方式同FIT_CENTER,只是将图片显示在左方或上方,而不是居中。   
ScaleType.FIT_XY:将图片非等比例缩放到大小与ImageView相同。   
ScaleType.MATRIX:是根据一个3x3的矩阵对其中图片进行缩放


好比说上图,蓝色图标为setImageDrawable,后面灰色背景为setBackgroundDrawable,src在背景之上。这样你们应该能明白了吧。
好吧。言归正传,有这2个属性+ScaleType.CENTER_CROP,彻底能够实现图片变暗变亮效果了。

1.用一张过滤遮盖变暗的图片filter_bg.png做为ImageView的源图片:setImageDrawable

2.把要显示的图片show.png设置为背景:setBackgroundDrawable

3.当变亮时,用一张遮盖后彻底透明的图片transparent_bg.png替换filter_bg.png

这样就实现变暗变亮的效果了。

注:设置时,要设置src填充整个控件CENTER_CROP

<ImageView
        android:id="@+id/ivs_show1"
        android:layout_width="315px"
        android:layout_height="120px"
        android:src="@drawable/filter_bg"
        android:scaleType="centerCrop"/>

做者就是采用这种笨方法来实现的。欢迎你们吐槽O(∩_∩)O~

相关文章
相关标签/搜索