android View实现变暗效果

android项目中做一个默认图片变暗,有焦点时变亮的效果。相信大家都能各种办法,各种手段很容易的实现这个效果。这里记录下作者实现这个效果的过程及遇到的问题,仅供参考。
见下图(注:因为是eclipse截图,所以有点色差了,黄色变成蓝色,不过暗亮的效果还是明显的O(∩_∩)O~):
              

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

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

public void setAlpha(float alpha)

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

public void setAlpha(int alpha)

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

好吧,眼见为实,来分别看看效果:

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

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

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)。

好吧。到这里大家应该发现,和想要实现的效果相差甚远吧,作者也大失所望。因为这个我也是百度google“android imageView 实现变暗效果”,一堆的链接进去就是上面这种方法。这明显是变透明,
变暗透明,不可为诶。

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

颜色过滤?是不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"/>
时间: 2024-10-15 17:11:05

android View实现变暗效果的相关文章

Android:通过滤镜实现点击图片变暗效果

实现点击图片(ImageView)变暗效果,有一个较简单的方法,就是讲目标图片设置为背景图片(setBackground),再创建一个selector.xml文件,里面放置一张普通状态时的透明图片,一张点击状态下的棕色半透明图片,将其设置为ImageView的源图片.这样在点击ImageView时,源图片会变换透明度,达到变暗效果.但这种方法有个缺点:由于源图片已经被限制死了,假如我们需要自定义背景图片,将目标图片放置在背景图片上,就无法实现了.这里介绍一种通过滤镜和监听onTouchEvent

android图像处理,实现变暗效果

图像处理主要是图像的颜色矩阵和坐标矩阵进行处理,要实现变暗效果只需要对颜色矩阵中的RGB偏移减小即可,具体代码如下: int brightness = -80; //RGB偏移量,变暗为负数 ColorMatrix matrix = new ColorMatrix(); matrix.set(new float[]{1, 0, 0, 0, brightness, 0, 1, 0, 0, brightness, 0, 0, 1, 0, brightness, 0, 0, 0, 1, 0}); Co

android 自定义view实现验证码效果(一)

此博客来自:http://blog.csdn.net/lmj623565791/article/details/24252901,感谢博客的无私奉献,在这拿来自己学习下. 自定义控件一直对我来说都比较恐怖,就此有时间好好学习下, 我们知道一个View对象要经过onMeasure()测量 ,onLayout()计算大小,onDraw()到屏幕上,然后根据你的需求看需要那方面就使用了,这是最简单的自定义view,先从最简单的做起 新建一个项目customview1 第一步:先自定义view的属性,首

【Android - View】之自定义View实现“刮刮卡”效果

首先来介绍一下这个自定义View: (1)这个自定义View的名字叫做 GuaguakaView ,继承自View类: (2)这个View实现了很多电商项目中的"刮刮卡"的效果,即用户可以刮开覆盖层,查看自己是否中奖: (3)用户可以设置覆盖层的图片以及显示的文本内容和字体大小等参数: (4)用户可以设置一个阈值,当刮开的面积大于这个阈值时,就会自动清除所有覆盖物. 接下来简单介绍一下在这个自定义View中用到的技术点: (1)自定义属性:在 /res/values/attr.xml 

Android TransitionDrawable ImageView过度效果使用实例

实现两张图片渐隐渐现的过渡效果Transition Drawable实现两张图片之间动态过度效果的方式. 运行如下所示:第一张为初始界面,第二张为过度中界面,第三张为过渡结束         新建一个TransitionDrawable的Android工程. 目录结构: 主界面activity_main.xml代码如下: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns

Android View体系(二)实现View滑动的六种方法

相关文章: Android View体系(一)视图坐标系 1.View的滑动简介 View的滑动是Android实现自定义控件的基础,同时在开发中我们也难免会遇到View的滑动的处理.其实不管是那种滑动的方式基本思想都是类似的:当触摸事件传到View时,系统记下触摸点的坐标,手指移动时系统记下移动后的触摸的坐标并算出偏移量,并通过偏移量来修改View的坐标. 实现View滑动有很多种方法,这篇文章主要讲解六种滑动的方法,分别是:layout().offsetLeftAndRight()与offs

Android View 触摸事件传递机制

PS:以现在的眼光看以前写的博客感觉写的很烂,或许或一段时间再看现在的博客会有同样的感觉.所以每时每刻都去学习,去发现和理解新的东西. 引言 由于之前写的一篇关于Android事件传递顺序的博客质量太差,可能是理解不到位的原因,故最近又花了许多时间再次去看Android源码,看完之后有了新的理解,所以打算重新整理这篇博客.理解Android触摸事件传递机制有助于日后的开发以及自定义一些手势效果等.注意:这篇博客是基于Android2.0源码来分析的,不管老版本还是新版本的Android,其内部触

Android仿IOS回弹效果 ScrollView回弹 总结

Android仿IOS回弹效果  ScrollView回弹 总结 应项目中的需求  需要仿IOS 下拉回弹的效果 , 我在网上搜了很多 大多数都是拿scrollview 改吧改吧 试了一些  发现总有点小问题 下面的代码是我对大家发布的做了点小修改   觉得没太大问题 package com.example.myscrollview; import android.content.Context; import android.graphics.Rect; import android.util

Android View体系(八)从源码解析View的layout和draw流程

相关文章 Android View体系(一)视图坐标系 Android View体系(二)实现View滑动的六种方法 Android View体系(三)属性动画 Android View体系(四)从源码解析Scroller Android View体系(五)从源码解析View的事件分发机制 Android View体系(六)从源码解析Activity的构成 Android View体系(七)从源码解析View的measure流程 前言 上一篇文章我们讲了View的measure的流程,接下来我们