顏色

作者微博: @GcsSloop

【本系列相關(guān)文章】

簡要介紹安卓中的顏色相關(guān)內(nèi)容，包括顏色的定義，創(chuàng)建顏色的幾種方式，以及顏色的混合模式等。

一.簡單介紹顏色

安卓支持的顏色模式：

PS：其中字母表示通道類型，數(shù)值表示該類型用多少位二進(jìn)制來描述。如ARGB8888則表示有四個通道(ARGB),每個對應(yīng)的通道均用8位來描述。

注意：我們常用的是ARGB8888和ARGB4444，而在所有的安卓設(shè)備屏幕上默認(rèn)的模式都是RGB565,請留意這一點。

以ARGB8888為例介紹顏色定義:

其中 A R G B 的取值范圍均為0_{255(即16進(jìn)制的0x00}0xff)

A 從ox00到oxff表示從透明到不透明。

RGB 從0x00到0xff表示顏色從淺到深。

當(dāng)RGB全取最小值(0或0x000000)時顏色為黑色，全取最大值(255或0xffffff)時顏色為白色

二.幾種創(chuàng)建或使用顏色的方式

1.java中定義顏色

  int color = Color.GRAY;     //灰色

由于Color類提供的顏色僅為有限的幾個，通常還是用ARGB值進(jìn)行表示。

  int color = Color.argb(127, 255, 0, 0);   //半透明紅色
  
  int color = 0xaaff0000;                   //帶有透明度的紅色

2.在xml文件中定義顏色

在/res/values/color.xml 文件中如下定義：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="red">#ff0000</color>
    <color name="green">#00ff00</color>
</resources>

詳解： 在以上xml文件中定義了兩個顏色，紅色和藍(lán)色，是沒有alpha（透明）通道的。

定義顏色以‘#’開頭，后面跟十六進(jìn)制的值，有如下幾種定義方式：

  #f00            //低精度 - 不帶透明通道紅色
  #af00           //低精度 - 帶透明通道紅色
  
  #ff0000         //高精度 - 不帶透明通道紅色
  #aaff0000       //高精度 - 帶透明通道紅色

3.在java文件中引用xml中定義的顏色：

  int color = getResources().getColor(R.color.mycolor);

4.在xml文件(layout或style)中引用或者創(chuàng)建顏色

    <!--在style文件中引用-->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/red</item>
    </style>

  android:background="@color/red"     //引用在/res/values/color.xml 中定義的顏色
  
  android:background="#ff0000"        //創(chuàng)建并使用顏色

三.取色工具

顏色都是用RGB值定義的，而我們一般是無法直觀的知道自己需要顏色的值，需要借用取色工具直接從圖片或者其他地方獲取顏色的RGB值。

1.屏幕取色工具

取色調(diào)色工具，可以從屏幕取色或者使用調(diào)色板調(diào)制顏色，非常小而精簡。

<b>點擊這里獲取屏幕取色工具</b>

2.Picpick

功能更加強(qiáng)大的工具：PicPick。

PicPick具備了截取全屏、活動窗口、指定區(qū)域、固定區(qū)域、手繪區(qū)域功能，支持滾動截屏，屏幕取色，支持雙顯示器，具備白板、屏幕標(biāo)尺、直角座標(biāo)或極座標(biāo)顯示與測量，具備強(qiáng)大的圖像編輯和標(biāo)注功能。

<b>點擊這里獲取PicPick</b>

四.顏色混合模式(Alpha通道相關(guān))

通過前面介紹我們知道顏色一般都是四個通道(ARGB)的，其中(RGB)控制的是顏色,而A(Alpha)控制的是透明度。

因為我們的顯示屏是沒法透明的，因此最終顯示在屏幕上的顏色里可以認(rèn)為沒有Alpha通道。Alpha通道主要在兩個圖像混合的時候生效。

默認(rèn)情況下，當(dāng)一個顏色繪制到Canvas上時的混合模式是這樣計算的：

(RGB通道) 最終顏色 = 繪制的顏色 + (1 - 繪制顏色的透明度) × Canvas上的原有顏色。

<b>注意：</b>

1.這里我們一般把每個通道的取值從0(ox00)到255(0xff)映射到0到1的浮點數(shù)表示。

2.這里等式右邊的“繪制的顏色"、“Canvas上的原有顏色”都是經(jīng)過預(yù)乘了自己的Alpha通道的值。如繪制顏色：0x88ffffff，那么參與運算時的每個顏色通道的值不是1.0，而是(1.0 * 0.5333 = 0.5333)。 (其中0.5333 = 0x88/0xff)

使用這種方式的混合，就會造成后繪制的內(nèi)容以半透明的方式疊在上面的視覺效果。

其實還可以有不同的混合模式供我們選擇，用Paint.setXfermode，指定不同的PorterDuff.Mode。

下表是各個PorterDuff模式的混合計算公式：（D指原本在Canvas上的內(nèi)容dst，S指繪制輸入的內(nèi)容src，a指alpha通道，c指RGB各個通道）

用示例圖來查看使用不同模式時的混合效果如下（src表示輸入的圖，dst表示原Canvas上的內(nèi)容）：

五.參考資料

【安卓圖形動畫】

About Me

作者微博: @GcsSloop

你可以在下面平臺找到我。
微博 | GitHub | 知乎