先來切入一個場景:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!--gradient 中 android:angle數據類型為Integer,代表漸變顏色的角度。
0 表示從左到右, 90從下到上 . 逆時針方向依此類推即可獲得各種角度變化 但其取值必須
是45的整數倍.且該屬性只有在android:type="linear"情況下起作用,默認的type為linear。
android:angle默認取值為0. 表示從左到右 -->
<gradient
android:type="linear"
android:startColor="#27ae60"
android:endColor="@android:color/transparent"/>
</shape>
然后,請提前拖住下巴,我們一起瞧瞧效果圖:
綠色到透明的效果圖
怎么肥事!太Ugly了吧,中間夾雜的黑灰色東東從哪冒出來的?
哈哈,驚不驚喜,意不意外? 其實道理很簡單,我們只需要用照妖鏡看看@android:color/transparent
的真面目就明白了。且看下圖@android:color/transparent
之素面朝天照。
素顏照
真相:
@android:color/transparent
的十六進制顏色表示是#00000000
,這貨不就是一個全透明的黑色么!
是噠是噠 :smile: ~ 哈哈 這就是那坨黑灰色東東的來源所在!
大家應該都知道,我們的十六進制顏色數值由ARGB[1]四個部分組成.所以我們小五童鞋寫的從綠色到透明色漸變的代碼最終執行過程是這樣的:
小五童鞋代碼中startColor到endColor對應ARGB數值的變化過程
上圖顏色數值的變化:A:FF->00
R:27->00
G:AE->00
B:60->00
現在,看著這個顏色漸變過程演示圖,大家是不是立馬豁然開朗,茅塞頓開呀 哈哈
小五童鞋的代碼之所以有黑灰色雜質,就是因為坑爹的@android:color/transparent
雖然是全透明的,但卻是一個黑色的全透明,而代碼中的綠色#27ae60
[2]到#00000000
的漸變過程中,其對應的RGB也在變化,綠色#27ae60
[2]的Alpha值是到顏色漸變的最后才變為0的, 也就是中間的顏色漸變過程中Alpha并不等于0,因此顏色漸變的各個階段所對應呈現出來的顏色效果最終都會參雜著RGB數值變化帶來的顏色污染,就像這里的黑灰色雜質。
所以,小五童鞋該怎么做,才能實現想要的效果?
掃地僧:控制色域變化范圍
也就是只讓ARGB中的A變化,其余的RGB保持不變!一言不合上代碼:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:type="linear"
android:startColor="#27ae60"
android:endColor="#0027ae60"/>
</shape>
修改后的效果圖:終于綠徹底了 !
小五想要的效果圖