一、背景
作为一名Android开发人员,在每次开发的时候,UI会在设计图中标注颜色值,或者会直接给出颜色值,如:#FF2309,但是有时候为了达到某种效果,需要在颜色值前面添加透明度,如:40%|的透明度。还有一种情况就是交给UI验收的时候,说界面和设计图不符,让自己回去做对比,往往和透明度的值有关系,我的天!整个人都不好了,透明度怎么计算?怎么搞?
一定要和UI对接好,UI给的是透明度不透明度的值,很重要!!!
二、颜色值标准格式
Android中的颜色值标准格式为RGB/ARGB标准,使用时通常以“#”字符开头,以16进制表示。
如:#RGB、#RRGGBB、#ARGB、#AARRGGBB。R:红色;G:绿色;B:蓝色;A:透明度,如果不含A,说明完全透明(即默认100%,完全不透明)。
三、透明度
一定要和UI对接好,UI给的是透明度不透明度的值,很重要!!!
口语说的透明度从0%~100%,换算成二进制为256个值(0-255),计算机上用16进制表示为(00-ff)。透明就是0,不透明就是255,如果50%|透明就是127(256的一半是128,但因为是从0开始,所以实际上是127)。
透明度 和 不透明度 是两个概念, 它们加起来是1,或者100%
ARGB 中的透明度alpha,表示的是不透明度。
四、透明度计算
需要不透明度值的,可以自己算:透明度值 + 不透明度值 = 100%
如果你的UI设计师给的视觉稿标注是:颜色#FFFFFF,透明度40% 。那你的计算方式应该是:
将透明度转换成不透明度。不透明度为:60%
不透明度乘以255。 我们得到结果:153
将计算结果转换成16进制。得到最终的不透明度:99
将不透明度和颜色值拼接成ARGB格式。得到最终的颜色值: #99FFFFFF
所以,你的UI设计师要的颜色是:#99FFFFFF
如果UI给的是透明度值A%,则计算公式:255(100% - A%) ,将计算结果转为16进,对照表1:*
表一:
透明度 | 16进制表示 |
---|---|
100 % | 00 |
99 % | 03 |
98 % | 05 |
97 % | 07 |
96 % | 0A |
95 % | 0D |
94 % | 0F |
93 % | 12 |
92 % | 14 |
91 % | 17 |
90 % | 1A |
89 % | 1C |
88 % | 1E |
87 % | 21 |
86 % | 24 |
85 % | 26 |
84 % | 29 |
83 % | 2B |
82 % | 2E |
81 % | 30 |
80 % | 33 |
79 % | 36 |
78 % | 38 |
77 % | 3B |
76 % | 3D |
75 % | 40 |
74 % | 42 |
73 % | 45 |
72 % | 47 |
71 % | 4A |
70 % | 4D |
69 % | 4F |
68 % | 52 |
67 % | 54 |
66 % | 57 |
65 % | 59 |
64 % | 5C |
63 % | 5E |
62 % | 61 |
61 % | 63 |
60 % | 66 |
59 % | 69 |
58 % | 6B |
57 % | 6E |
56 % | 70 |
55 % | 73 |
54 % | 75 |
53 % | 78 |
52 % | 7A |
51 % | 7D |
50 % | 80 |
49 % | 82 |
48 % | 85 |
47 % | 87 |
46 % | 8A |
45 % | 8C |
44 % | 8F |
43 % | 91 |
42 % | 94 |
41 % | 96 |
40 % | 99 |
39 % | 9C |
38 % | 9E |
37 % | A1 |
36 % | A3 |
35 % | A6 |
34 % | A8 |
33 % | AB |
32 % | AD |
31 % | B0 |
30 % | B3 |
29 % | B5 |
28 % | B8 |
27 % | BA |
26 % | BD |
25 % | BF |
24 % | C2 |
23 % | C4 |
22 % | C7 |
21 % | C9 |
20 % | CC |
19 % | CF |
18 % | D1 |
17 % | D4 |
16 % | D6 |
15 % | D9 |
14 % | DB |
13 % | DE |
12 % | E0 |
11 % | E3 |
10 % | E6 |
9 % | E8 |
8 % | EB |
7 % | ED |
6 % | F0 |
5 % | F2 |
4 % | F5 |
3 % | F7 |
2 % | FA |
1 % | FC |
0 % | FF |
举个例子:
UI给出的颜色值为#FFFF00,透明度40%。
结合表1,40%的透明度16进制的值为 99,那么最终的颜色值为 #99FFFF00
如果UI给的是不透明度值A%,则计算公式:255*(A%) ,将计算结果转为16进,对照表2:
表二:
不透明度 | 十六进制 |
---|---|
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 |
57% | 94 |
56% | 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 |
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 |
28% | 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给出的颜色值为#FFFF00,不透明度40%。
结合表2,40%的不透明度16进制的值为 66,那么最终的颜色值为 #66FFFF00