当前位置: 代码迷 >> 综合 >> 最全的Android 颜色透明度
  详细解决方案

最全的Android 颜色透明度

热度:108   发布时间:2023-10-18 18:02:12.0

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

背景

开发的都知道,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就可以来这里看。如果上面有写错了,欢迎来“搞”!哈哈!

 

  相关解决方案