好记性不如烂笔头。生活中多做笔记,不仅可以方便自己,还可以方便他人。
背景
开发的都知道,UI微调都是令人头痛的,尤其是颜色的微调。
如果视觉稿直接给颜色值那倒没啥,可怕的是后面还有标了透明度,而且视觉还原后发现颜色太透明了,要你透明度再调调,这才烦人。我总不能记住100个透明度的值吧。
一次计算,无数次使用,这文章,稳了。
正文
Android中的颜色值一般格式是:#AARRGGBB。AA就是透明度值(这里我只聊透明度)。
1. 透明度的计算
透明度分为256个等级,即 0 - 256,0就是透明,255就是不透明
透明度 (透明)0 --> 255(不透明) 对应着16进制 (透明)00 --> FF(不透明)
比如:50%透明度
50%也就是256的一半即128,因为是从0开始算的,所以是 127,转换成16进制就是 7F
2.献上透明度表格
注意:我这里写的是透明度值,不是不透明度值,这是两个不同的概念,注意区分。
需要不透明度值的,可以自己算:透明度值 + 不透明度值 = 100%
如果你的UI设计师给的视觉稿标注是:颜色#FFFFFF,透明度40% 。那你的计算方式应该是:
- 将透明度转换成不透明度。不透明度为:60%
- 不透明度乘以255。 我们得到结果:153
- 将计算结果转换成16进制。得到最终的不透明度:99
- 将不透明度和颜色值拼接成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.csdn.net/jabony/article/details/52804296
