背景

總結一下平時作業開發中，如何對 UI 設計稿上的顏色（不）透明度的使用心得及注意事項，

1. Android中顏色簡介

Android 中的顏色值通常遵循 RGB/ARGB 標準，使用時通常以#字符開頭，以 16 進制表示，
其中 RGB 依次代表紅色（Red）、綠色（Green）、藍色（Blue），
ARGB 依次代表 透明度(Alpha)、紅色（Red）、綠色（Green）、藍色（Blue），

例如: #FF00CC99 其中 FF是透明度，00 是紅色值，CC 是綠色值，99 是藍色值，

其中關于 Alpha 的理解：

Alpha 沒有透明度的意思，不代表透明度，opacity 和 transparency 才和透明度有關，前者是不透明度，后者是透明度，比如 css 中的「opacity: 0.5」就是設定元素有 50% 的不透明度，

一個影像的每個像素都有 RGB 三個通道，后來 Alvy Ray Smith 提出每個像素再增加一個 Alpha 通道，取值為0到1，用來儲存這個像素是否對圖片有「貢獻」，0代表透明、1代表不透明，也就是說，「Alpha 通道」儲存一個值，其外在表現是「透明度」，Alpha 和透明度沒啥關系，

為什么取名為 Alpha 通道，我覺得是因為這是除 RGB以外「第一個通道」的意思，沒有別的更深刻的含義，

「Alpha 通道」是圖片內在的一個屬性，用 css 或者其他外部方法設定透明度，并沒有改變圖片的 Alpha 通道的值，

參考：為什么用 ‘Alpha’ 代表透明度？

此時，在開發有個疑問 ，那么 Alpha 是透明度還是不透明度呢？

我的回答是：Alpha 透明度，如果 alpha = 1; 則不透明；如果 alpha = 0; 則全透明，

2. 不透明度

透明度的范圍是：0-255，在計算機中，我們就用 16 進制( 00 - FF)表示，全透明就是 00，完全不透明就是 FF，

透明度和不透明度加起來等于 1 或者說 100%，

3. 使用方法

方法：255 * 不透明度 -> 轉換成 16 進制，

例如: 30% 不透明度計算方式：255 * 30% = 76.5，四舍五入 77，轉為 16 進制為 4D，

鏈接：16進制在線工具

3.1 第一種使用方法

在Android Studio 中的 color檔案中， 我一般會把這個鏈接放進去，方便在開發時快速查找相要的顏色值，

這里需要注意一點的時，需要和 UI 同學確認一下 ，UI 設計稿中的是不透明度還是透明度，

以我們專案開發為例，設計稿協同軟體為:figma

于是實際的 color 設值為：

    <!--  背景顏色  -->
    <color name="color_bg">#E6000000</color>

【懶人必備1】這里放一個開發中用得最多的不透明度轉換為16進制的表格：

（00 表示完全透明，FF 表示完全不透明）

【懶人必備2】這里放一個開發中用得最多的不透明度轉換為16進制的表格：（格式暫未統一）

不透明度(可以理解為 alpha:0 - 1 的值)

<!--百分比- 開頭字母--> 
<!--100% --FF-->
<!--99% -- FC-->
<!--98% -- FA-->
<!--97% -- F7-->
<!--96% -- F5-->
<!--95% -- F2-->
<!--94% -- F0-->
<!--93% -- ED-->
<!--92% -- EB-->
<!--91% -- E8-->
<!--90% -- E6-->
<!--89% -- E3-->
<!--88% -- E0-->
<!--87% -- DE-->
<!--86% -- DB-->
<!--85% -- D9-->
<!--84% -- D6-->
<!--83% -- D4-->
<!--82% -- D1-->
<!--81% -- CF-->
<!--80% -- CC-->
<!--79% -- C9-->
<!--78% -- C7-->
<!--77% -- C4-->
<!--76% -- C2-->
<!--75% -- BF-->
<!--74% -- BD-->
<!--73% -- BA-->
<!--72% -- B8-->
<!--71% -- B5-->
<!--70% -- B3-->
<!--69% -- B0-->
<!--68% -- AD-->
<!--67% -- AB-->
<!--66% -- A8-->
<!--65% -- A6-->
<!--64% -- A3-->
<!--63% -- A1-->
<!--62% -- 9E-->
<!--61% -- 9C-->
<!--60% -- 99-->
<!--59% -- 96-->
<!--58% -- 94-->
<!--57% -- 91-->
<!--56% -- 8F-->
<!--55% -- 8C-->
<!--54% -- 8A-->
<!--53% -- 87-->
<!--52% -- 85-->
<!--51% -- 82-->
<!--50% -- 80-->
<!--49% -- 7D-->
<!--48% -- 7A-->
<!--47% -- 78-->
<!--46% -- 75-->
<!--45% -- 73-->
<!--45% -- 73-->
<!--44% -- 70-->
<!--43% -- 6E-->
<!--42% -- 6B-->
<!--41% -- 69-->
<!--40% -- 66-->
<!--39% -- 63-->
<!--38% -- 61-->
<!--37% -- 5E-->
<!--36% -- 5C-->
<!--35% -- 59-->
<!--34% -- 57-->
<!--33% -- 54-->
<!--32% -- 52-->
<!--31% -- 4F-->
<!--30% -- 4D-->
<!--29% -- 4A-->
<!--28% -- 47-->
<!--27% -- 45-->
<!--26% -- 42-->
<!--25% -- 40-->
<!--24% -- 3D-->
<!--23% -- 3B-->
<!--22% -- 38-->
<!--21% -- 36-->
<!--20% -- 33-->
<!--19% -- 30-->
<!--18% -- 2E-->
<!--17% -- 2B-->
<!--16% -- 29-->
<!--15% -- 26-->
<!--14% -- 24-->
<!--13% -- 21-->
<!--12% -- 1F-->
<!--11% -- 1C-->
<!--10% -- 1A-->
<!--9% -- 17-->
<!--8% -- 14-->
<!--7% -- 12-->
<!--6% -- 0F-->
<!--5% -- 0D-->
<!--4% -- 0A-->
<!--3% -- 08-->
<!--2% -- 05-->
<!--1% -- 03-->
<!--0% -- 00-->

例如:

UI給出的顏色值為： #000000，不透明度為 40%，

根據上表，40% 不透明度對應的 16 進制的值為 66，那么最終顏色值就是#66000000 ，

3.2 第二種使用方法

在 View 中也可以這樣使用，通過 android:alpha="0.1"來實作透明度，

android:alpha 的值為 0 ~ 1之間的數，數字越大，越不透明，1 表示完全不透明，0 表示完全透明，

    <View
       android:layout_width="match_parent"
       android:layout_height="1dp"
       android:alpha="0.1"
       android:background="@color/white" />

3.3. 第三種使用方法

text.getBackground().setAlpha(10)

點開原始碼可以發現：

// Specify an alpha value for the drawable. 0 means fully transparent, and 255 means fully opaque.（0 表示完全透明，255 表示完全不透明，） 
public abstract void setAlpha(@IntRange(from=0,to=255) int alpha);

setAlpha() 的括號中可以填 0 ~ 255 之間的數字，數字越大，越不透明，

4. 小結

本文總結了 UI 設計稿的交流方式和如何解讀，以及在開始時如何使用的幾種方式，如有疑問或者我有理解有不對的地方，歡迎交流或指出，

參考：

1. 顏色值不透明度對應表（0%-100%）
2. Android設定控制元件的透明度