Android 颜色(不)透明度的使用及项目开发中的心得总结

Android 颜色(不)透明度的使用及项目开发中的心得总结,第1张

Android 颜色(不)透明度的使用及项目开发中的心得总结 背景:

总结一下平时工作开发中,如何对 UI 设计稿上的颜色(不)透明度的使用心得及注意事项。

1. Android中颜色简介

Android 中的颜色值通常遵循 RGB/ARGB 标准,使用时通常以#字符开头,以 16 进制表示。
其中 RGB 依次代表红色(Red)、绿色(Green)、蓝色(Blue)。
ARGB 依次代表 透明度(Alpha)、红色(Red)、绿色(Green)、蓝色(Blue)。

例如: #FF00CC99 其中 FF是透明度,00 是红色值,CC 是绿色值,99 是蓝色值。

其中关于 Alpha 的理解:

Alpha 没有透明度的意思,不代表透明度。opacity 和 transparency 才和透明度有关,前者是不透明度,后者是透明度。比如 css 中的「opacity: 0.5」就是设定元素有 50% 的不透明度。

一个图像的每个像素都有 RGB 三个通道,后来 Alvy Ray Smith 提出每个像素再增加一个 Alpha 通道,取值为0到1,用来储存这个像素是否对图片有「贡献」,0代表透明、1代表不透明。也就是说,「Alpha 通道」储存一个值,其外在表现是「透明度」,Alpha 和透明度没啥关系。

为什么取名为 Alpha 通道,我觉得是因为这是除 RGB以外「第一个通道」的意思,没有别的更深刻的含义。

「Alpha 通道」是图片内在的一个属性,用 css 或者其他外部方法设定透明度,并没有改变图片的 Alpha 通道的值。

参考:为什么用 ‘Alpha’ 代表透明度?

此时,在开发有个疑问 ,那么 Alpha 是透明度还是不透明度呢?

我的回答是:Alpha 透明度。如果 alpha = 1; 则不透明;如果 alpha = 0; 则全透明。

2. 不透明度

透明度的范围是:0-255。在计算机中,我们就用 16 进制( 00 - FF)表示,全透明就是 00,完全不透明就是 FF,

透明度和不透明度加起来等于 1 或者说 100%。

3. 使用方法

方法:255 * 不透明度 -> 转换成 16 进制。

例如: 30% 不透明度计算方式:255 * 30% = 76.5,四舍五入 77,转为 16 进制为 4D。

链接:16进制在线工具

3.1 第一种使用方法

在Android Studio 中的 color文件中, 我一般会把这个链接放进去,方便在开发时快速查找相要的颜色值。

这里需要注意一点的时,需要和 UI 同学确认一下 ,UI 设计稿中的是不透明度还是透明度。

以我们项目开发为例。设计稿协同软件为:figma

于时实际的 color 设值为:

    
    #E6000000

【懒人必备1】这里放一个开发中用得最多的不透明度转换为16进制的表格:

(00 表示完全透明,FF 表示完全不透明)

透明度16进制表100  %0099   %0398   %0597   %0796   %0A95   %0D94   %0F93   %1292   %1491   %1790   %1A89   %1C88   %1E87   %2186   %2485   %2684   %2983   %2B82   %2E81   %3080   %3379   %3678   %3877   %3B76   %3D75   %4074   %4273   %4572   %4771   %4A70   %4D69   %4F68   %5267   %5466   %5765   %5964   %5C63   %5E62   %6161   %6360   %6659   %6958   %6B57   %6E56   %7055   %7354   %7553   %7852   %7A51   %7D50   %8049   %8248   %8547   %8746   %8A45   %8C44   %8F43   %9142   %9441   %9640   %9939   %9C38   %9E37   %A136   %A335   %A634   %A833   %AB32   %AD31   %B030   %B329   %B528   %B827   %BA26   %BD25   %BF24   %C223   %C422   %C721   %C920   %CC19   %CF18   %D117   %D416   %D615   %D914   %DB13   %DE12   %E011   %E310   %E69   %E88   %EB7   %ED6   %F05   %F24   %F53   %F72   %FA1   %FC0   %FF

【懒人必备2】这里放一个开发中用得最多的不透明度转换为16进制的表格:(格式暂未统一)

不透明度(可以理解为 alpha:0 - 1 的值)

例如:

UI给出的颜色值为: #000000,不透明度为 40%。

根据上表,40% 不透明度对应的 16 进制的值为 66,那么最终颜色值就是#66000000

3.2 第二种使用方法

在 View 中也可以这样使用。通过 android:alpha="0.1"来实现透明度。

android:alpha 的值为 0 ~ 1之间的数。数字越大,越不透明。1 表示完全不透明,0 表示完全透明。

    
3.3. 第三种使用方法
text.getBackground().setAlpha(10)

点开源码可以发现:

// Specify an alpha value for the drawable. 0 means fully transparent, and 255 means fully opaque.(0 表示完全透明,255 表示完全不透明。) 
public abstract void setAlpha(@IntRange(from=0,to=255) int alpha);

setAlpha() 的括号中可以填 0 ~ 255 之间的数字。数字越大,越不透明。

4. 小结

本文总结了 UI 设计稿的交流方式和如何解读,以及在开始时如何使用的几种方式,如有疑问或者我有理解有不对的地方,欢迎交流或指出。

参考:

  1. 颜色值不透明度对应表(0%-100%)
  2. Android设置控件的透明度

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/5694207.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-12-17
下一篇 2022-12-17

发表评论

登录后才能评论

评论列表(0条)

保存