乐趣区

View进阶之颜色

jiezi

大家可以关注一下我，我会一直更新 Android 最新的技术文章

一. 简单介绍颜色

安卓支持的颜色模式：

PS：其中字母表示通道类型，数值表示该类型用多少位二进制来描述。如 ARGB8888 则表示有四个通道(ARGB), 每个对应的通道均用 8 位来描述。

以 ARGB8888 为例介绍颜色定义:

其中 A R G B 的取值范围均为 0255(即 16 进制的 0x000xff)

A 从 0x00 到 0xff 表示从透明到不透明。

RGB 从 0x00 到 0xff 表示颜色从浅到深。

当 RGB 全取最小值 (0 或 0x000000) 时颜色为黑色，全取最大值 (255 或 0xffffff) 时颜色为白色

二. 几种创建或使用颜色的方式

1.java 中定义颜色

int color = Color.GRAY;     // 灰色
复制代码

由于 Color 类提供的颜色仅为有限的几个，通常还是用 ARGB 值进行表示。

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 文件中定义了两个颜色，红色和蓝色，是没有 alpha（透明）通道的。

定义颜色以‘#’开头，后面跟十六进制的值，有如下几种定义方式：

#f00            // 低精度 - 不带透明通道红色
  #af00           // 低精度 - 带透明通道红色

  #ff0000         // 高精度 - 不带透明通道红色
  #aaff0000       // 高精度 - 带透明通道红色
复制代码

3. 在 java 文件中引用 xml 中定义的颜色：

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

  int color = getColor(R.color.myColor);    //API 23 及以上支持该方法
复制代码

4. 在 xml 文件 (layout 或 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"        // 创建并使用颜色
复制代码

三. 取色工具

颜色都是用 RGB 值定义的，而我们一般是无法直观的知道自己需要颜色的值，需要借用取色工具直接从图片或者其他地方获取颜色的 RGB 值。

1. 屏幕取色工具

取色调色工具，可以从屏幕取色或者使用调色板调制颜色，非常小而精简。

2.Picpick

功能更加强大的工具：PicPick。

PicPick 具备了截取全屏、活动窗口、指定区域、固定区域、手绘区域功能，支持滚动截屏，屏幕取色，支持双显示器，具备白板、屏幕标尺、直角座标或极座标显示与测量，具备强大的图像编辑和标注功能。

四. 颜色混合模式(Alpha 通道相关)

通过前面介绍我们知道颜色一般都是四个通道 (ARGB) 的，其中 (RGB) 控制的是颜色, 而 A(Alpha)控制的是透明度。

因为我们的显示屏是没法透明的，因此最终显示在屏幕上的颜色里可以认为没有 Alpha 通道。Alpha 通道主要在两个图像混合的时候生效。

默认情况下，当一个颜色绘制到 Canvas 上时的混合模式是这样计算的：

(RGB 通道) 最终颜色 = 绘制的颜色 + (1 – 绘制颜色的透明度) × Canvas 上的原有颜色。

注意：

1. 这里我们一般把每个通道的取值从 0(0x00)到 255(0xff)映射到 0 到 1 的浮点数表示。

2. 这里等式右边的“绘制的颜色 ”、“Canvas 上的原有颜色”都是经过预乘了自己的 Alpha 通道的值。如绘制颜色：0x88ffffff，那么参与运算时的每个颜色通道的值不是 1.0，而是(1.0 * 0.5333 = 0.5333)。(其中 0.5333 = 0x88/0xff)

使用这种方式的混合，就会造成后绘制的内容以半透明的方式叠在上面的视觉效果。

其实还可以有不同的混合模式供我们选择，用 Paint.setXfermode，指定不同的 PorterDuff.Mode。

下表是各个 PorterDuff 模式的混合计算公式：（D 指原本在 Canvas 上的内容 dst，S 指绘制输入的内容 src，a 指 alpha 通道，c 指 RGB 各个通道）

用示例图来查看使用不同模式时的混合效果如下（src 表示输入的图，dst 表示原 Canvas 上的内容）：

我自己也整理了一些视频资料，免费领取方式私信我【资料】

退出移动版