android項(xiàng)目中做一個(gè)默認(rèn)圖片變暗,有焦點(diǎn)時(shí)變亮的效果。相信大家都能各種辦法,各種手段很容易的實(shí)現(xiàn)這個(gè)效果。這里記錄下作者實(shí)現(xiàn)這個(gè)效果的過程及遇到的問題,僅供參考。 見下圖(注:因?yàn)槭莈clipse截圖,所以有點(diǎn)色差了,黃色變成藍(lán)色,不過暗亮的效果還是明顯的O(∩_∩)O~):
1.腦袋里轉(zhuǎn)的第一個(gè)實(shí)現(xiàn)的想法是: 2張圖片,一張暗圖,一張亮圖。監(jiān)聽焦點(diǎn)事件,更換圖片。 誒,這不是demo誒,哪來一個(gè)資源圖片弄2份,并且這圖片是從服務(wù)器上獲取的,不實(shí)際。
2.記得之前有過用設(shè)置控件的透明度。好,來試試: 嗯?有2個(gè)不同的重載方法,形參分別為float和int。這倆有啥區(qū)別呢?
1 | public void setAlpha( float alpha)
|
設(shè)置View的透明度為0~1的值,0完全透明,1完全不透明。注意這里說的是View
1 | public void setAlpha( int alpha)
|
設(shè)置 image 的透明度,并且該方法在API 16的版本里被setImageAlPha(int)代替
好吧,眼見為實(shí),來分別看看效果:
iv.setAlpha(0.5f)效果圖為:
setImageAlpha(100),效果為:╮(╯▽╰)╭給我報(bào)異常退出了。
1 | 07 - 08 21 : 17 : 12.012 : E/AndroidRuntime( 29310 ): java.lang.NoSuchMethodError: android.widget.ImageView.setImageAlpha
|
測(cè)試機(jī)為android4.0.3,對(duì)應(yīng)api為15.eclipse里有設(shè)置對(duì)應(yīng)為16的api,但一運(yùn)行就掛了╮(╯▽╰)╭。目測(cè)應(yīng)該是兼容性問題,這里不深究了,感覺上篇講的targetVersion有關(guān),不過沒驗(yàn)證哈。 這里還有另外一個(gè)方法,iv.getBackground().setAlpha(100);運(yùn)行效果出來和上圖使用iv.setAlpha(0.5f),不過透明程度有點(diǎn)不一致(但沒大看出來)。前者值為(1~255),后者 為(0~1)。
好吧。到這里大家應(yīng)該發(fā)現(xiàn),和想要實(shí)現(xiàn)的效果相差甚遠(yuǎn)吧,作者也大失所望。因?yàn)檫@個(gè)我也是百度google“android imageView 實(shí)現(xiàn)變暗效果”,一堆的鏈接進(jìn)去就是上面這種方法。這明顯是變透明, 變暗透明,不可為誒。
繼續(xù)找找還有啥子方法呢?不小心找到了個(gè)這個(gè)方法:
顏色過濾?是不ps的濾鏡?來看下怎么用:
通過setColorFilter可以實(shí)現(xiàn)濾鏡效果。 如: final WallpaperManager wallpaperManager = WallpaperManager.getInstance(this); //獲取壁紙 final Drawable wallpaperDrawable = wallpaperManager.getDrawable(); //指定濾鏡顏色以及混合模式 wallpaperDrawable.setColorFilter(Color.RED, PorterDuff.Mode.MULTIPLY); /*注意:PorterDuff.Mode枚舉值: 1.PorterDuff.Mode.CLEAR 所繪制不會(huì)提交到畫布上。 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 //調(diào)亮 14.PorterDuff.Mode.LIGHTEN //用于顏色濾鏡 15.PorterDuff.Mode.MULTIPLY 16.PorterDuff.Mode.SCREEN
來試下效果:
1 | iv.setColorFilter(Color.TRANSPARENT,PorterDuff.Mode.XOR);
|
額,貌似效果沒變誒??纯瓷厦嬗梅ㄕf明
Set a tinting option for the image
貌似是設(shè)置圖片image,不是控件ImageView的.好吧,換成下面的用法:
1 2 3 | Drawable drawable = imgs.get(i);
drawable.setColorFilter(Color.TRANSPARENT,PorterDuff.Mode.XOR);
iv.setImageDrawable(drawable);
|
誒,貌似沒效果。再仔細(xì)琢磨下,是不上面用的顏色值不對(duì)呢?好吧,換下成Color.GRAY,也不對(duì)呀。之后不管用哪個(gè)顏色,圖片都顯示不出來。
好吧,我妥協(xié)了。用上面帖子里的例子試下吧。改成多層樣式的:
1 | drawable.setColorFilter(Color.GRAY,PorterDuff.Mode.MULTIPLY);
|
O(∩_∩)O~哈哈,效果出來了:
這是個(gè)不錯(cuò)的嘗試。然后獲取焦點(diǎn)時(shí),把這個(gè)濾鏡清掉就OK了。
1 | drawable.clearColorFilter();
|
顯示為原始亮圖了。
注:其實(shí)作者最開始貼上去的2張圖并不是用上面濾鏡方法實(shí)現(xiàn)的。上面方法只是在整理這篇博客時(shí),臨時(shí)發(fā)現(xiàn)的。就嘗試下,沒想到成功了。早知道當(dāng)時(shí)就都多試幾次,就不用下面這種方法了。
繼續(xù)瞅瞅ImageView的api吧,看看都有些啥子屬性。相信大家都會(huì)注意到ImageView特有的這2個(gè)方法:
1 2 3 4 5 6 7 | 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
|
1 2 | public void setBackgroundDrawable(Drawable background)
This method was deprecated in API level 16 . use setBackground(Drawable) instead
|
這2者有啥區(qū)別呢?這個(gè)相信用過的人都不難理解。
當(dāng)設(shè)置setBackgroundDrawable時(shí),整個(gè)ImageView的控件背景色會(huì)變。 當(dāng)設(shè)置setImageDrawable時(shí),ImageView中間內(nèi)容區(qū)會(huì)被圖片填充。但是周圍會(huì)有一些邊距,默認(rèn)無法填充整個(gè)控件(當(dāng)然,這也是有屬性設(shè)置的)。
ScaleType的值分別代表的意義: ImageView是Android中的基礎(chǔ)圖片顯示控件,該控件有個(gè)重要的屬性是ScaleType,該屬性用以表示顯示圖片的方式,共有8種取值
ScaleType.CENTER::圖片大小為原始大小,如果圖片大小大于ImageView控件,則截取圖片中間部分,若小于,則直接將圖片居中顯示。
ScaleType.CENTER_CROP:將圖片等比例縮放,讓圖像的短邊與ImageView的邊長(zhǎng)度相同,即不能留有空白,縮放后截取中間部分進(jìn)行顯示。
ScaleType.CENTER_INSIDE:將圖片大小大于ImageView的圖片進(jìn)行等比例縮小,直到整幅圖能夠居中顯示在ImageView中,小于ImageView的圖片不變,直接居中顯示。
ScaleType.FIT_CENTER:ImageView的默認(rèn)狀態(tài),大圖等比例縮小,使整幅圖能夠居中顯示在ImageView中,小圖等比例放大,同樣要整體居中顯示在ImageView中。
ScaleType.FIT_END:縮放方式同F(xiàn)IT_CENTER,只是將圖片顯示在右方或下方,而不是居中。
ScaleType.FIT_START:縮放方式同F(xiàn)IT_CENTER,只是將圖片顯示在左方或上方,而不是居中。
ScaleType.FIT_XY:將圖片非等比例縮放到大小與ImageView相同。
ScaleType.MATRIX:是根據(jù)一個(gè)3x3的矩陣對(duì)其中圖片進(jìn)行縮放
比如說上圖,藍(lán)色圖標(biāo)為setImageDrawable,后面灰色背景為setBackgroundDrawable,src在背景之上。這樣大家應(yīng)該能明白了吧。 好吧。言歸正傳,有這2個(gè)屬性+ScaleType.CENTER_CROP,完全可以實(shí)現(xiàn)圖片變暗變亮效果了。
1.用一張過濾遮蓋變暗的圖片filter_bg.png作為ImageView的源圖片:setImageDrawable
2.把要顯示的圖片show.png設(shè)置為背景:setBackgroundDrawable
3.當(dāng)變亮?xí)r,用一張遮蓋后完全透明的圖片transparent_bg.png替換filter_bg.png
這樣就實(shí)現(xiàn)變暗變亮的效果了。
注:設(shè)置時(shí),要設(shè)置src填充整個(gè)控件CENTER_CROP
1 2 3 4 5 6 | <ImageView
android:id= "@+id/ivs_show1"
android:layout_width= "315px"
android:layout_height= "120px"
android:src= "@drawable/filter_bg"
android:scaleType= "centerCrop" />
|
嘿嘿,作者就是采用這種笨方法來實(shí)現(xiàn)的。歡迎大家吐槽O(∩_∩)O~
|