UniApp安卓启动图适配：.9.png原理、制作与集成全攻略

1. 项目概述：为什么.9.png是uniapp启动图的关键

如果你用uniapp开发过安卓应用，并且尝试过打包上架，大概率会遇到一个让人头疼的问题：应用启动时，那个全屏的启动图（Splash Screen）在部分手机上显示不正常。要么是图片被拉伸得模糊失真，要么是边缘的内容被裁切掉了，尤其是在现在各种全面屏、刘海屏、挖孔屏百花齐放的安卓生态里，这个问题尤为突出。很多开发者会直接找UI设计师要一张PNG图片，丢到unpackage/res目录下，结果发现效果总是不尽如人意。其实，解决这个问题的钥匙，就是一张特殊的图片——.9.png，也叫“九宫格”图。

简单来说，.9.png是安卓平台特有的一种可拉伸位图格式。它和普通PNG的唯一区别，就是在图片的四条边上多了1个像素宽度的黑线。你可别小看这圈黑线，它就像给图片加了一套“拉伸和内容区域”的说明书。上边和左边的黑线定义了图片中哪些区域可以被水平或垂直拉伸；下边和右边的黑线则定义了内容（比如文字、按钮）可以放置的安全区域。这样，无论你的启动图需要适配多么奇葩的屏幕分辨率，系统都知道该拉伸图片的哪个部分（通常是纯色或渐变区域），并保护关键内容（如Logo、品牌文字）不被拉伸或裁切。

对于uniapp开发者而言，虽然框架本身提供了便捷的跨端开发体验，但在处理原生平台特性时，我们仍需遵循其规则。制作一个正确的.9.png启动图，是确保你的应用在安卓端给用户留下专业、精致第一印象的基石。这不仅仅是“能用”，更是“好用”和“专业”的体现。

2. 核心原理与设计思路拆解

2.1 .9.png的工作原理：不止是拉伸

很多人把.9.png简单地理解为“可拉伸图片”，这其实只说对了一半。它的核心设计哲学是将图片的“可拉伸区域”和“内容填充区域”进行解耦。

1. 拉伸区域（Stretchable Area）：由图片顶部和左侧的黑色像素线标记。在这两条线上，你用纯黑色（#000000）像素点“打点”。一个点就代表一条可以拉伸的“线”。

   • 顶部黑线：标记了图片在水平方向的可拉伸区域。假设你在顶部黑线的第5到第15像素位置点了黑点，那么原图中对应的垂直带状区域（从第5列到第15列）就是可以被水平拉伸的部分。系统在适配不同宽度屏幕时，只会横向拉伸这个带状区域，其他部分（如左右两边的圆角或装饰）保持原样。
   • 左侧黑线：标记了图片在垂直方向的可拉伸区域。原理同上，它定义了可以被纵向拉伸的横向带状区域。

2. 内容区域（Content Area/Padding）：由图片底部和右侧的黑色像素线标记。它们定义了图片内部内容的“内边距”或“安全区”。

   • 底部黑线：定义了内容在垂直方向上的放置范围。黑点覆盖的区域，对应到图片内部，就是内容可以占据的垂直空间的下边界。
   • 右侧黑线：定义了内容在水平方向上的放置范围。

注意：对于启动图（Splash Screen）而言，我们通常只关心拉伸区域，因为启动图一般是全屏静态展示，不包含动态变化的内容（如文字）。因此，在制作启动图的.9.png时，底部和右侧的黑线常常可以留空（不画任何黑点），或者与拉伸线保持一致。我们的首要目标是保证图片在各种屏幕比例下拉伸不变形。

2.2 为uniapp启动图设计.9.png的思路

结合uniapp的特性，我们在设计启动图.9.png时需要明确几个要点：

1. 确定核心不可变区域：你的启动图上，哪些部分是绝对不能拉伸的？通常是公司的Logo、核心产品名称、特定的图标或边框。这些元素必须在设计稿中就集中在一个相对固定的区域，比如居中偏上。
2. 寻找合适的拉伸区域：观察你的启动图设计。通常，背景是纯色、渐变色或简单纹理的部分是最理想的拉伸区域。例如，一个从上到下的渐变背景，我们可以将拉伸线定义在背景的纯色部分，这样拉伸时渐变过渡依然平滑自然。
3. 考虑屏幕比例多样性：从传统的16:9，到现在的18:9、19.5:9、20:9，甚至更长的屏幕。你的.9.png需要能从容应对宽度和高度的独立变化。这意味着你可能需要同时定义水平和垂直的拉伸区域。
4. 与uniapp工程结构对接：制作好的.9.png需要放入uniapp项目的特定目录下，并且命名要规范，否则HBuilderX在打包时无法识别。

3. 工具选择与素材准备

3.1 制作工具推荐

制作.9.png并不需要特别高深的工具，但选对工具能事半功倍。

1. Android Studio（推荐）：这是最官方、最可靠的工具。它内置的draw9patch工具非常直观。你只需要将普通PNG拖进去，用鼠标在边缘画黑线即可，所见即所得，还能实时预览拉伸效果。

   • 优点：官方工具，功能准确，预览直观。
   • 缺点：需要安装完整的Android Studio，略显笨重。

2. 在线.9.png制作工具：搜索“9 patch tool online”可以找到一些网页工具。它们通常提供一个画板让你绘制黑线。

   • 优点：无需安装，打开即用。
   • 缺点：功能可能不完整，预览效果可能与真机有差异，存在隐私风险（上传公司Logo图需谨慎）。

3. Photoshop/GIMP等专业图像软件：通过手动添加一个1像素宽的边框图层，并用铅笔工具绘制黑点。这要求你对原理非常清楚，且容易出错。

   • 优点：适合熟悉设计软件的设计师。
   • 缺点：步骤繁琐，无法实时预览，不推荐新手使用。

对于大多数uniapp开发者，我强烈建议使用Android Studio。虽然它是个“大家伙”，但一次安装，终身受益，不仅能处理.9.png，以后需要处理原生安卓代码时也能用上。

3.2 准备原始启动图素材

在开始制作前，你需要一份高质量的启动图设计稿。这里有几个关键参数：

1. 分辨率：虽然.9.png可以拉伸，但提供一个高分辨率的底图总是好的。建议至少提供一张1440x2560px（或更高）的PNG图片。这能覆盖绝大多数高分辨率设备。
2. 设计规范：
   • 安全区域：考虑到刘海屏和挖孔屏，重要的视觉元素（如Logo）应放置在屏幕中央区域，避免太靠顶部。
   • 背景：尽量使用可无缝拉伸的样式，如纯色、对称渐变、简单的重复纹理。复杂的、非对称的摄影图或插画很难用.9.png完美适配，可能需要为不同比例单独切图，但这违背了.9.png的初衷。
3. 文件格式：导出为32位PNG（带Alpha通道），这样可以保留透明度，方便处理非矩形启动图（虽然全屏启动图通常不需要）。

4. 使用Android Studio制作.9.png详解

假设你已经安装好了Android Studio。我们一步步来。

4.1 创建测试工程与导入图片

1. 打开Android Studio，选择“New Project”，随便创建一个“Empty Views Activity”项目，项目名称和位置任意。
2. 在项目视图的app/src/main/res目录下，找到drawable文件夹。如果没有，可以右键res->New->Android Resource Directory，类型选择drawable。
3. 将你准备好的高清启动图PNG文件（例如splash.png）复制到drawable文件夹中。

4.2 使用Draw 9-patch工具

1. 在Android Studio的Project面板中，右键点击刚才导入的splash.png文件。
2. 在右键菜单中，选择Create 9-Patch file...。
3. 弹出一个对话框，建议你重命名文件（默认是在原文件名后加.9，变成splash.9.png），点击OK。
4. 此时，splash.9.png文件会自动生成，并且会用Android Studio内置的Draw 9-patch编辑器打开。

这个编辑器界面很简单：

• 中间：是你的图片预览。
• 左侧和顶部：有一条像素带，用于绘制拉伸线（顶部和左侧）。
• 右侧和底部：有一条像素带，用于绘制内容线（底部和右侧）。
• 右侧预览窗格：会实时显示图片被拉伸后的效果。

4.3 绘制拉伸线（关键步骤）

这是最核心的一步。我们的目标是让背景拉伸，而Logo不变。

1. 放大视图：使用编辑器右下角的滑块放大图片，直到能清晰看到每一个像素。这是精确操作的前提。
2. 分析图片结构：观察你的启动图。假设它是一个中心有Logo，背景为从上到下的蓝色渐变的图片。
   • 我们需要水平拉伸时，只拉伸背景的渐变部分，而避开中心的Logo。因此，顶部的拉伸线，应该在Logo左侧和右侧的背景区域画点。
   • 同样，垂直拉伸时，也只拉伸Logo上方和下方的背景区域。因此，左侧的拉伸线，应该在Logo上方和下方的背景区域画点。
3. 绘制顶部黑线（控制水平拉伸）：
   • 在顶部像素带的最左端点一个黑点。这代表从图片左边界开始。
   • 将鼠标移动到Logo左侧背景区域的右边界（紧挨着Logo），在顶部像素带对应位置点一个黑点。这代表水平拉伸区域的左边界。
   • 将鼠标移动到Logo右侧背景区域的左边界（紧挨着Logo），在顶部像素带对应位置点一个黑点。这代表水平拉伸区域的右边界。
   • 在顶部像素带的最右端点一个黑点。这代表到图片右边界结束。
   • 效果：现在顶部黑线被分成了三段：左背景区、Logo区、右背景区。只有左背景区和右背景区被标记为可拉伸，Logo区域被保护起来。
4. 绘制左侧黑线（控制垂直拉伸）：
   • 同理，在左侧像素带的最顶端点一个黑点。
   • 在Logo上方背景区域的下边界（紧挨着Logo）点一个黑点。
   • 在Logo下方背景区域的上边界（紧挨着Logo）点一个黑点。
   • 在左侧像素带的最底端点一个黑点。
   • 效果：左侧黑线也被分成三段，保护了Logo所在的水平区域。

实操心得：绘制时，按住鼠标左键拖动比点击更高效，可以画出一条连续的线段。但务必精确，确保黑点只覆盖你希望拉伸的1像素宽列。一个常见的技巧是，如果整个背景都是可拉伸的纯色/渐变，你可以简单地在顶部黑线的左端和右端点两个点，中间全部留白。这表示整行（整个顶部区域对应的垂直列）都是可拉伸的。这适用于Logo很小或位于正中央的情况。

4.4 处理内容线（针对启动图）

对于启动图，内容线通常不是必须的。但为了规范，你可以：

• 底部黑线：与顶部黑线绘制相同的模式（如果顶部画了左右两点，底部也画在同样的水平位置）。这定义了垂直方向的内容区域，但对于全屏启动图意义不大。
• 右侧黑线：与左侧黑线绘制相同的模式。

更简单的做法是让底部和右侧的黑线留空（不画任何点）。这表示内容区域就是整个图片，在启动图场景下是完全可接受的。

4.5 预览与检查

绘制过程中，随时观察右侧的预览窗格。它会将你的图片在几个不同尺寸的框里拉伸显示。

• 检查Logo是否在任何预览框中都保持原样，没有变形。
• 检查背景的拉伸是否平滑，有无明显的断裂或畸变。
• 如果发现Logo被拉伸了，说明你的拉伸线画得离Logo太近，或者把Logo区域包含进去了，需要调整黑点位置。

保存：绘制满意后，直接关闭编辑器窗口即可，Android Studio会自动保存文件。你会看到drawable目录下生成了一个splash.9.png文件。

5. 集成到UniApp项目

制作好.9.png文件后，需要将它正确地放入uniapp项目。

1. 定位目录：打开你的uniapp项目，找到nativeplugins目录（如果没有，请在项目根目录创建）。
2. 安卓资源路径：在nativeplugins下，创建路径：Android/res/drawable-xxhdpi/。drawable-xxhdpi代表超超高密度，这是一个通用的高分辨率资源目录。HBuilderX在打包时，会优先从这里查找资源。
3. 放入文件：将制作好的splash.9.png文件复制到Android/res/drawable-xxhdpi/目录下。
4. 配置manifest.json：在项目的manifest.json文件中，你需要配置启动图。但注意，对于安卓原生.9.png，我们通常不在manifest.json的splashscreen节点里直接引用，因为那里配置的图片会被uniapp框架处理，可能无法正确识别.9.png特性。
5. 正确配置方法（推荐）：
   • 实际上，对于安卓原生启动图，更标准的做法是通过原生插件或自定义基座的方式来替换。但对于许多只需要替换启动图场景，一个更直接的方法是：
   • 将splash.9.png重命名为安卓系统约定的启动图名称。最常见的名称是launch_screen.9.png。你可以查阅uniapp官方文档或对应原生引擎的文档，确认确切的文件名。
   • 将重命名后的launch_screen.9.png文件，覆盖到nativeplugins/Android/res/drawable-xxhdpi/目录下（如果已有则覆盖）。
   • 这种方式利用了HBuilderX云打包或本地打包时，nativeplugins目录下的资源会覆盖引擎默认资源的机制。

重要提示：这种方法可能因uniapp版本和打包方式（云打包/本地打包）而异。最稳妥的方式是查阅你当前使用版本的uniapp官方文档中关于“原生插件开发”或“本地资源引用”的章节，了解如何替换安卓原生资源。

6. 真机测试与常见问题排查

6.1 测试验证

配置完成后，不要急于提交市场，必须进行真机测试。

1. 使用自定义调试基座：在HBuilderX中，运行 -> 运行到手机或模拟器 -> 制作自定义调试基座。在制作过程中，选择包含你刚配置了.9.png资源的原生插件（如果你是以插件形式配置的）。然后使用这个自定义基座安装到测试机上。
2. 准备多种屏幕比例的测试机：至少找一台传统16:9屏幕的手机和一台全面屏（如19.5:9或更长）的手机进行测试。
3. 观察启动图：
   • 正常情况：启动图快速显示，Logo清晰无变形，背景填充整个屏幕无黑边，拉伸过渡自然。
   • 异常情况：Logo被拉扁或拉高、背景出现重复的断层、屏幕四周有黑边。

6.2 常见问题与解决方案实录

下面是我在实际项目中踩过的坑和解决方案，整理成了速查表：

一个关键的避坑技巧：在将.9.png集成到uniapp项目前，可以先在一个纯净的安卓原生测试项目里验证它的正确性。在Android Studio里新建一个安卓项目，把你的.9.png放到res/drawable下，然后在布局文件中用一个ImageView，设置android:background="@drawable/your_splash"，并让这个ImageView的宽高设为match_parent。在不同尺寸的模拟器上运行，观察效果。这样可以100%确定图片本身没问题，排除了uniapp打包流程带来的干扰。

7. 高级技巧与自动化思路

当你的应用需要适配多个品牌渠道（可能要求不同的启动图），或者需要频繁更新启动图时，手动制作和替换.9.png会变得繁琐。这里有一些进阶思路。

7.1 使用脚本批量生成

如果你的启动图遵循固定的设计模板（例如，只有Logo和背景色会变），你可以考虑使用脚本自动化生成.9.png。

1. 原理：使用ImageMagick（一个强大的命令行图像处理工具）组合操作。
2. 步骤：
   • 准备一个“模板”.9.png，这个图片只有黑线标记，中间区域是透明的。
   • 准备一张“内容”图，即你的实际启动图（不带黑边）。
   • 使用ImageMagick命令，将“内容”图复合到“模板”图的透明区域上，生成最终的.9.png。
3. 示例命令（需先安装ImageMagick）：

   # 假设 template.9.png 是带黑边标记的透明模板，content.png 是1920x1080的启动图 # 将content.png放置到template.9.png的中央，生成final_splash.9.png convert template.9.png -gravity center content.png -composite final_splash.9.png

   你可以将此命令写入Shell脚本或Node.js脚本，结合设计稿的导出，实现一键生成多个渠道的启动图。

7.2 在CI/CD流程中集成

在团队协作或持续集成环境中，可以将上述脚本集成到构建流水线中。

1. 在package.json中定义脚本命令，例如“generate:splash-android”: “node scripts/generate-9patch.js”。
2. 在scripts/generate-9patch.js中，使用sharp（Node.js图像处理库）或调用ImageMagick命令行，读取配置文件和原始素材，自动生成对应尺寸和渠道的.9.png文件，并输出到nativeplugins的正确目录下。
3. 在HBuilderX的云打包或本地打包命令执行前，先运行这个生成脚本。

这样做的好处是，UI设计师只需要提供一张高质量的、符合规范的基础启动图，开发者无需再手动打开Android Studio进行绘制，减少了人为错误，也提升了效率。

7.3 应对极端屏幕比例

对于超长屏（如21:9）或折叠屏，单纯的拉伸可能仍会导致背景过度拉伸而显得稀疏。更专业的做法是：

1. 提供多套.9.png：为drawable-xxhdpi(通用)、drawable-xxxhdpi(超清) 等不同密度目录提供略微不同的.9.png。在超高密度设备上，使用背景细节更丰富的版本。
2. 使用图层分离：将启动图设计成“背景层”和“前景层”。背景层是一张纯色或简单渐变、可以安全拉伸的.9.png。前景层（Logo、文字）作为另一张PNG，在代码中居中覆盖在背景层上。这需要更深入的原生开发，通过自定义Splash Activity来实现，超出了简单替换图片的范围，但提供了最大的灵活性。

制作一个完美的.9.png启动图，是uniapp安卓应用打磨细节的第一步。它看似是个小点，却直接影响用户打开应用瞬间的感官体验。花点时间理解原理，用对工具，做好测试，就能让你的应用从启动那一刻起就显得专业而可靠。