免费获取学习方案
ARTICLE DETAIL

资讯详情

深耕编程基础知识与建站技术分享的一线实战洞察。

Android开发必备:颜色透明度对照表与ARGB编码原理详解

Android开发必备:颜色透明度对照表与ARGB编码原理详解 1. 为什么你需要一份自己的透明度对照表在Android开发里颜色和透明度是绕不开的话题。无论是UI设计师给的标注图还是产品经理提的“这个按钮要半透明一点”的需求最终都得落到代码里那一串十六进制数字上。最经典的场景就是设计师在Sketch或Figma里调好了一个漂亮的半透明背景色标注上写着“背景色#80FF5722”。你一看心里大概知道这是个带透明度的橙色但当你打开Android Studio准备在colors.xml里定义这个颜色或者在Java/Kotlin代码里直接设置时问题就来了Android系统认的格式是0xAARRGGBB或#AARRGGBB这个80到底对应多少透明度是50%还是60%新手可能会去搜“Android 透明度 百分比 十六进制”然后找到一张广为流传但可能不太清晰的网络图片上面密密麻麻地列着从0%到100%的对应值。老手则可能早已把几个常用值刻在了脑子里FF是完全不透明00是完全透明80大概是50%透明度。但遇到4D、B3这种不常用的还是得停下来想一下或者临时写行代码Log.d(TAG, 透明度值: ${(0x4D / 255.0f * 100).toInt()}%)来算一下。这个过程不仅打断思路还容易出错。把#80FF5722写成#80572FF2这种笔误或者把透明度4D误当作B3都会导致UI效果和设计稿相去甚远轻则影响视觉效果重则可能因为可访问性比如文字对比度不足而引发问题。所以拥有一份自己理解、自己验证过、并且针对Android开发场景优化过的颜色透明度转换对照表就像木匠有一把顺手的尺子不是可有可无而是效率和质量的基本保障。这份对照表的核心是建立起“人类理解的透明度百分比”、“设计师常用的十六进制Alpha值”和“Android系统处理的整型Alpha值”三者之间的桥梁。本文将不仅提供一份可直接“抄作业”的详细对照表更会深入讲解其背后的原理、在代码中的多种应用方式以及如何避免那些常见的“坑”。2. 透明度编码原理从百分比到十六进制要真正搞懂对照表而不是死记硬背我们必须先拆解透明度的编码方式。在数字色彩的世界里透明度Alpha和红Red、绿Green、蓝Blue三个颜色通道一样通常用一个8位二进制数即1个字节来表示。2.1 核心概念8位Alpha通道一个8位二进制数能表示的范围是0到255即2的8次方256个值。其中0代表完全透明。像素的Alpha值为0时无论RGB颜色值是什么该像素都将完全不可见直接显示出背后的内容。255代表完全不透明。像素的Alpha值为255时其RGB颜色将完全覆盖背景。1 到 254代表不同程度的半透明。数值越大越不透明数值越小越透明。这是计算机内部处理透明度的基础。但我们在UI设计和开发中更习惯用百分比0%到100%来思考透明度。这就引出了第一个转换百分比到整数的转换。Alpha整数值 百分比 * 255例如50%的透明度对应的整数值就是0.5 * 255 127.5。由于Alpha值必须是整数这里就需要进行四舍五入或取整。通常的做法是四舍五入所以50%对应128。这是一个关键点也是许多网上表格数值略有差异的原因之一——它们可能采用了不同的取整规则向下取整、四舍五入等。为了与大多数设计工具和系统行为保持一致本文采用四舍五入规则。2.2 十六进制的登场在代码和设计稿中我们很少直接写255这样的十进制数更常见的是两位的十六进制数。十六进制用0-9和A-F代表10-15来表示一位十六进制数对应4位二进制数。因此一个8位的Alpha值正好可以用两位十六进制数表示。转换关系如下十进制 255 - 十六进制FF十进制 128 - 十六进制80十进制 0 - 十六进制00所以我们得到了第二个转换将计算出的十进制Alpha整数值转换为两位的十六进制字符串。将这两个步骤合并就得到了从透明度百分比到十六进制Alpha值的完整公式十六进制Alpha值 Math.round(百分比 * 255).toString(16).padStart(2, 0).toUpperCase()这个公式看起来有点复杂我们分解一下百分比 * 255将百分比转换为0-255范围的浮点数。Math.round(...)对结果进行四舍五入得到最接近的整数。.toString(16)将这个整数转换为十六进制字符串。注意转换结果可能是7f、80这样的一位或两位字符串。.padStart(2, 0)确保字符串至少有两位不足两位的在前面补0。例如f会变成0f。.toUpperCase()将字母转换为大写这是为了符合通常的书写习惯如#FF而不是#ff。2.3 Android中的颜色格式理解了Alpha的编码我们再来看Android中颜色的完整格式。Android支持多种颜色格式但最常用的是ARGB8888。A (Alpha)8位透明度。R (Red)8位红色通道。G (Green)8位绿色通道。B (Blue)8位蓝色通道。每个通道8位总共32位4字节。在代码中它通常表现为以下两种形式十六进制表示法#AARRGGBB例如不透明的红色是#FFFF000050%透明的蓝色是#800000FF。在XML资源文件如colors.xml和某些API中直接使用。整型表示法0xAARRGGBB这是一个32位的整数。最高8位是A接着8位是R然后是G最后8位是B。在Java/Kotlin代码中经常直接使用这种整型值或者通过Color.argb(a, r, g, b)方法来构造。例如0x80FF5722表示Alpha为0x80128红色为0xFF255绿色为0x5787蓝色为0x2234的颜色。一个非常重要的易错点注意顺序在#AARRGGBB和0xAARRGGBB中Alpha值在最前面。这与一些CSS中的RGBA格式rgba(255, 87, 34, 0.5)Alpha在最后是不同的混合使用时极易出错。3. Android颜色透明度对照表百分比/十六进制/整型基于上述原理并采用四舍五入规则我整理了一份在Android开发中更实用的对照表。与网上很多以5%或10%为间隔的表格不同这里我重点列出了开发中最常用、以及最容易产生疑惑的透明度值并补充了对应的整型Alpha值方便在代码中直接使用。透明度百分比十六进制 Alpha 值十进制 Alpha 整数值常见场景与备注100%FF255完全不透明。默认状态大部分实色背景、文字颜色。95%F2242极轻微的透明用于细微的层次区分或按压态Pressed State比纯黑或纯白叠加一层更柔和。90%E623085%D921780%CC204Material Design 中轻度遮盖层Scrim的常用值用于对话框、底部动作条BottomSheet背后的遮罩。75%BF19170%B317965%A616660%99153一个非常常用的半透明值用于卡片Card的轻微阴影叠加、非主要按钮的背景等。55%8C14050%80128最经典的半透明值。常用于半透明背景、加载蒙层Loading Overlay、禁用态Disabled State的控件。45%7311540%6610238%6197Material Design 中强调文本如标题在禁用状态下的建议透明度。35%598930%4D7726%4266Material Design 中提示性文本如Hint在禁用状态下的建议透明度。25%406420%3351非常浅的遮盖用于极其轻微的视觉分隔。15%263812%1F3110%1A265%0D13几乎完全透明仅用于极细微的效果。0%000完全透明。用于隐藏元素但保留占位或实现形状描边Stroke等效果。表格使用指南与心得记忆技巧不需要死记硬背整张表。记住几个关键锚点FF(100%)、80(50%)、00(0%)。80因为是128正好是255的一半所以对应50%这个很容易记。然后可以推导CC是204大约是255的80%所以对应80%透明度。4D是77大约是255的30%所以对应30%透明度。Material Design 的特别值Google的Material Design规范对文本在不同状态下的透明度有具体建议如正文禁用态是38%。在实现遵循MD设计规范的应用时直接使用#61、#42这些值能更好地保证视觉一致性。我特意在表格中标注了这些值。“50%不是80吗”的误区常有人疑惑50%为什么是80十进制128而不是7F十进制127这是因为0%到100%对应0到255这256个阶梯。0%是第一个阶梯0100%是最后一个阶梯255。50%对应的正好是第128个阶梯从0开始数也就是0x80。如果除以255128/255≈0.502确实非常接近50%。从视觉上看80和7F的差异人眼几乎无法分辨但为了标准和工具的统一建议采用80。4. 在Android项目中应用透明度知道了数值关键是要会用。下面是在Android项目不同地方设置透明度的具体方法。4.1 在XML资源文件中定义颜色这是最推荐的方式便于统一管理和主题化。res/values/colors.xmlresources !-- 完全不透明颜色 -- color namecolor_primary#FF5722/color !-- 省略Alpha默认为FF -- color namecolor_primary_solid#FFFF5722/color !-- 显式写出Alpha FF -- !-- 带透明度的颜色定义 -- color namecolor_primary_50pct#80FF5722/color !-- 50%透明的主色 -- color namescrim_80pct#CC000000/color !-- 80%透明的黑色遮罩 -- color namehint_text_disabled#42000000/color !-- 26%透明的黑色用于禁用态提示文字 -- !-- 也可以引用其他颜色并覆盖Alpha -- !-- 注意这种方法在某些旧版本或特定配置下可能不支持最稳妥还是直接写完整的ARGB值 -- color namecolor_primary_30pct_transparent#4DFF5722/color /resources在布局XML中使用TextView android:layout_widthwrap_content android:layout_heightwrap_content android:text半透明文本 android:textColorcolor/color_primary_50pct / View android:layout_widthmatch_parent android:layout_height100dp android:backgroundcolor/scrim_80pct /注意在XML中颜色值可以省略Alpha通道如#FF5722会被当作#FFFF5722处理。但为了清晰尤其是定义带透明度的颜色时强烈建议始终写出完整的8位十六进制值#AARRGGBB避免歧义。4.2 在Java/Kotlin代码中动态设置在代码中你有多种方式来处理带透明度的颜色。方法一使用完整的十六进制整型值// Kotlin view.setBackgroundColor(0x80FF5722.toInt()) // 50%透明的橙色背景 // 注意0x80FF5722是Long类型在Java中可以直接用int在Kotlin中需要.toInt()// Java view.setBackgroundColor(0x80FF5722); // 50%透明的橙色背景方法二使用Color.argb() 或 Color.parseColor()// 使用Color.argb(a, r, g, b)参数是十进制整数(0-255) val alpha 128 // 50%透明度对应的整数值 val color Color.argb(alpha, 255, 87, 34) view.setBackgroundColor(color) // 或者使用Color.parseColor()解析字符串这与XML中写法一致 val colorFromString Color.parseColor(#80FF5722) view.setBackgroundColor(colorFromString)方法三修改已有颜色的Alpha值这是一个非常实用的技巧当你需要基于一个基准色来创建不同透明度的变体时。// 假设有一个基准色 val baseColor Color.parseColor(#FF5722) // 或者从资源获取 ContextCompat.getColor(context, R.color.color_primary) // 创建一个50%透明度的版本 val alpha 128 val semiTransparentColor baseColor and 0x00FFFFFF or (alpha shl 24) // 分解说明 // 1. baseColor and 0x00FFFFFF将原颜色的Alpha通道置为0清空高8位。 // 2. alpha shl 24将Alpha值左移24位放到最高8位的位置。 // 3. or将新的Alpha通道和原来的RGB通道合并。 // 更清晰的方式使用ColorUtilsAndroidX支持库 val semiTransparentColor2 androidx.core.graphics.ColorUtils.setAlphaComponent(baseColor, alpha) // ColorUtils.setAlphaComponent()方法更直观易读推荐使用。4.3 在Drawable或Shape中使用透明度在XML中定义形状或选择器时也可以直接使用带透明度的颜色。res/drawable/bg_semi_transparent_rounded_rect.xml?xml version1.0 encodingutf-8? shape xmlns:androidhttp://schemas.android.com/apk/res/android android:shaperectangle corners android:radius8dp / solid android:color#80FF5722 / !-- 半透明填充色 -- stroke android:width1dp android:color#CCFFFFFF / !-- 80%透明的白色描边 -- /shape5. 实战中的常见“坑”与最佳实践即使有了对照表在实际开发中还是会遇到一些意想不到的问题。下面是我总结的几个高频“坑点”和应对策略。5.1 坑点一XML与代码中颜色值顺序混淆问题描述在代码中Color.rgb(red, green, blue)和Color.argb(alpha, red, green, blue)的参数顺序是(A, R, G, B)。但在使用十六进制整型0xAARRGGBB或解析字符串#AARRGGBB时顺序也是Alpha在前。然而人的思维惯性有时会把它记成RRGGBBAA像某些PNG图片数据格式。一旦写错颜色完全不对。案例想设置50%透明的蓝色#800000FF。错误写法view.setBackgroundColor(0x0000FF80)。这实际上变成了一个Alpha为0完全透明、RGB为00FF80一种绿色的颜色渲染出来什么都看不到。正确写法view.setBackgroundColor(0x800000FF)。避坑指南强制注释在定义颜色常量时旁边用注释明确写出格式。companion object { // 格式0xAARRGGBB val SEMI_TRANSPARENT_BLUE 0x800000FF.toInt() // 50%透明蓝色 }优先使用命名资源尽可能在colors.xml中定义颜色然后在代码中通过R.color.xxx引用。这样只需在XML中保证一次正确代码中就不会出现裸的十六进制数降低出错概率。使用Color.argb()函数当Alpha值需要动态计算时使用Color.argb(alpha, r, g, b)比拼接十六进制数更安全、更可读。5.2 坑点二叠加透明度导致的视觉偏差问题描述透明度的效果不是独立的它会与背景进行混合。如果你在一个灰色背景上放置一个50%透明的黑色层(#80000000)得到的是中灰色。但如果你期望的是“颜色变深50%”那结果可能不符合预期。更复杂的是当多个半透明层叠加时最终透明度是乘性的。案例一个View本身背景是#80FF000050%透明红它的父容器背景是#8000FF0050%透明绿最底层是白色背景。最终这个View呈现的颜色并非简单的“红绿”而是经过多层混合后的复杂结果。避坑指南使用设计工具验证在实现复杂叠加效果如遮罩、阴影叠加、毛玻璃前先用Figma、Sketch等设计工具模拟出最终效果并直接从设计稿中拾取最终颜色的色值而不是手动计算每一层的透明度。理解混合模式在自定义View或使用PorterDuffXfermode进行高级绘制时必须了解不同的混合模式如SRC_OVER,SRC_IN,MULTIPLY等对透明度混合的影响。这超出了基础透明度范围但知道它的存在很重要。简化层级尽量减少不必要的视图层级和透明度叠加。每多一层半透明性能开销和颜色计算的复杂度就增加一分。考虑能否用一张精心制作的带透明度的PNG图片来代替多层View的叠加绘制。5.3 坑点三性能考量与硬件加速问题描述过度使用透明度特别是动态改变透明度做渐隐渐现动画可能会引发性能问题导致界面卡顿。根因分析当View设置了透明度Alpha 1时Android系统通常需要将它以及可能受影响的子View渲染到一个离屏缓冲区Offscreen Buffer然后再将这个缓冲区与屏幕上的其他内容进行合成。这个过程比渲染不透明视图要昂贵。软件渲染如果关闭了硬件加速Alpha合成由CPU完成非常耗性能。硬件渲染开启硬件加速后合成工作由GPU负责效率高很多。但即便如此离屏渲染Offscreen Rendering本身也是有开销的过多的半透明层叠加会加重GPU的负担。最佳实践静态透明度多用资源文件对于不变化的半透明背景、遮罩等直接在XML中定义好颜色或Drawable。系统会对这些静态资源进行优化。谨慎使用View.setAlpha()相比于直接设置带透明度的颜色背景对整个View设置Alpha属性view.alpha 0.5f的影响范围更大因为它会影响整个View及其所有子View的渲染。如果只想改变背景的透明度优先考虑修改背景Drawable的颜色Alpha值。动画优化做透明度动画时对于简单的淡入淡出使用ViewPropertyAnimatorview.animate().alpha(0.5f).setDuration(300).start()它是优化过的。避免在滚动列表如RecyclerView的Item中做复杂的实时透明度变化动画。考虑使用Transition Framework来处理场景切换时的透明度动画它通常有更好的性能。Profile工具使用Android Studio的Profiler或“开发者选项”中的“显示GPU过度绘制”Show GPU Overdraw功能来检查应用中的过度绘制情况。半透明区域经常是过度绘制的高发区。5.4 工具与技巧快速转换与验证在线工具与插件Color Picker工具Android Studio内置的颜色选择器在XML中点击颜色值可以打开支持直接输入百分比来获取十六进制Alpha值非常方便。浏览器开发者工具Chrome或Firefox的开发者工具中的颜色选择器通常都支持在Hex、RGB、HSL等格式间切换并直观地调整透明度滑块可以快速获取值然后用到Android中注意格式转换。Figma/Sketch插件有些插件可以直接将设计稿中的颜色导出为Androidcolors.xml格式自动包含透明度。代码片段速查在项目里建立一个ColorUtils.kt之类的工具类存放一些常用的转换函数和颜色常量。object ColorUtils { /** * 将百分比透明度转换为十六进制字符串两位 * param percent 透明度百分比0-100 */ fun alphaPercentToHex(percent: Int): String { require(percent in 0..100) { Percent must be between 0 and 100 } val alpha (percent / 100.0 * 255).roundToInt() return alpha.toString(16).padStart(2, 0).uppercase() } /** * 为颜色添加透明度 * param color 原始颜色 (不带Alpha或Alpha会被覆盖) * param alphaPercent 透明度百分比0-100 */ ColorInt fun withAlpha(ColorInt color: Int, alphaPercent: Int): Int { val alpha (alphaPercent / 100.0 * 255).roundToInt() return ColorUtils.setAlphaComponent(color, alpha) } // 常用透明度常量 const val ALPHA_100 0xFF const val ALPHA_80 0xCC const val ALPHA_50 0x80 const val ALPHA_30 0x4D const val ALPHA_0 0x00 }设计沟通与设计师约定在标注透明度时除了提供#AARRGGBB格式的色值最好也附上百分比。这能减少沟通误解。同时可以推动设计师在设计规范中统一使用几个特定的透明度等级如100%、80%、60%、50%、30%、15%、0%而不是随意取值这样能极大提升开发效率和视觉一致性。
返回列表