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~

相關文章
相關標籤/搜索