玩運彩練小喂

Android 設定背景透明度

在套版時,常會碰到設計師要求元件呈現透明的效果
例如,設計師會設計一個按鈕
希望背景顏色為 #212121
並且指定 Opacity 85% (不透明度,0%完全透明、100%完全不透明)
這時該怎麼做呢?

根據使用場景的不同
我們會有不同的實作方式
底下介紹幾種方式

一、使用色碼的地方直接指定 Alpha 值

關於  Alpha 的定義,可以參考 Wiki

如果背景顏色是直接在 XML 檔裡設定,如下描述
Button 的背景顏色是 #212121

設定不透明度,就是在 RGB 前面加上 A (Alpha) 值,即 ARGB
所以, 85% 不透明度、顏色 #212121 的按鈕背景顏色就是 #D9212121

D9 如何計算的呢?

Alpha 的值,範圍為 0 ~ 255
設計師要求的 Opacity 85%,即是計算 Alpha 值的 85%

255 x 0.85 = 217 (四捨五入)
217 以 16 進位來看 就是 13 x 16 +  9
前面的 13 代表 16 進位的 D
後面的 9 代表 16 進位的 9
所以 Alpha 在色碼表示就是 D9

學會計算這個值以後,能夠運用的地方就相當多了
例如,Android Studio 中有個好用的 Plugin

Android Material Design Icon Generator Plugin

這個 Plugin 可以讓我們很輕鬆的在 Android Studio 中匯入官方的 Material Design Icon
透過介面挑選、預覽 icon,也能夠直接設定 icon 的顏色、大小等參數
特別是在顏色 (Color) 的欄位,可以直接加入指定的 Alpha 值
這樣就能輕鬆產生透明的 icon 了

例如下圖中,是設定 Alpha 值為 44 的黑色 icon (#44000000)

 

二、程式動態指定

根據使用情境的不同,有時必須在程式中動態產生 View 元件,並動態設定 View 元件的屬性
如果要設定 Button 的背景透明度,可以參考底下 2 種方式

1.利用 setAlpha(int alpha)

2.利用 Color.argb(A, R, G, B)

 

番外篇 – AlertDialog 的背景透明度如何指定?

AlertDialog 是個很常用的元件,想要自訂背景透明度的話,可以利用

使用方式如下範例

 

參考資料來源:
How to make a background 20% transparent on Android
RGBA – 維基百科,自由的百科全書
Android Material Design Icon Generator Plugin

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *