【筆記】顏色漸變<gradient>標簽之坑爹的 @android:color/transparent

先來切入一個場景:

小五童鞋想要一個直線的漸變,從左到右,顏色從綠色逐漸變成透明的,按照這個想法,小五童鞋寫下了如下代碼:

<?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>

修改后的效果圖:終于綠徹底了 !

小五想要的效果圖

OL ! 就醬紫吧,希望對大家有所幫助,如果喜歡,不要小氣,給個唄!


  1. ARGB分別代表AlphaRedGreenBlue 四種色彩空間 ?

  2. #27ae60中缺失的Alpha值會自動用FF補全,也就是#FF27ae60 ? ?

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容