欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

最完整的安卓色彩透明度

最编程 2024-05-04 22:43:54
...

好记性不如烂笔头。生活中多做笔记,不仅可以方便自己,还可以方便他人。

背景

开发的都知道,UI微调都是令人头痛的,尤其是颜色的微调。

如果视觉稿直接给颜色值那倒没啥,可怕的是后面还有标了透明度,而且视觉还原后发现颜色太透明了,要你透明度再调调,这才烦人。我总不能记住100个透明度的值吧。

一次计算,无数次使用,这文章,稳了。

正文

Android中的颜色值一般格式是:#AARRGGBB。AA就是透明度值(这里我只聊透明度)。

1. 透明度的计算

透明度分为256个等级,即 0 - 2560就是透明,255就是不透明


透明度 (透明)0 --> 255(不透明) 对应着16进制 (透明)00 --> FF(不透明)


比如:50%透明度

50%也就是256的一半即128,因为是从0开始算的,所以是 127,转换成16进制就是 7F


2.献上透明度表格

注意:我这里写的是透明度值,不是不透明度值,这是两个不同的概念,注意区分。


需要不透明度值的,可以自己算:透明度值 + 不透明度值 = 100%

如果你的UI设计师给的视觉稿标注是:颜色#FFFFFF,透明度40% 。那你的计算方式应该是:

  1. 将透明度转换成不透明度。不透明度为:60%
  2. 不透明度乘以255。 我们得到结果:153
  3. 将计算结果转换成16进制。得到最终的不透明度:99
  4. 将不透明度和颜色值拼接成ARGB格式。得到最终的颜色值: #99FFFFFF

所以,你的UI设计师要的颜色是:#99FFFFFF


下面是我表格里的透明度值的计算方式是:(A:透明度; H:16进制)

255*(100% - A%) 通过计算器转为16进制 H

(ps:因为计算结果取整数,所以可能会有一个进制位的误差,比如50%的透明度值,上面“1.透明度的计算”中的计算是127,16进制为7F,这里计算是127.5,四舍五入为128,16进制为80。所以,看到这里不用惊慌,7F跟80肉眼看起来是差不多的,不用去计较)

00是完全透明(百分百透明),FF就是完全透明

透明度 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就可以来这里看。如果上面有写错了,欢迎来“搞”!哈哈!

参考文章

本文参考了这位同学的文章
http://blog.****.net/jabony/article/details/52804296