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简单地理解为“可拉伸图片”这其实只说对了一半。它的核心设计哲学是将图片的“可拉伸区域”和“内容填充区域”进行解耦。拉伸区域Stretchable Area由图片顶部和左侧的黑色像素线标记。在这两条线上你用纯黑色#000000像素点“打点”。一个点就代表一条可以拉伸的“线”。顶部黑线标记了图片在水平方向的可拉伸区域。假设你在顶部黑线的第5到第15像素位置点了黑点那么原图中对应的垂直带状区域从第5列到第15列就是可以被水平拉伸的部分。系统在适配不同宽度屏幕时只会横向拉伸这个带状区域其他部分如左右两边的圆角或装饰保持原样。左侧黑线标记了图片在垂直方向的可拉伸区域。原理同上它定义了可以被纵向拉伸的横向带状区域。内容区域Content Area/Padding由图片底部和右侧的黑色像素线标记。它们定义了图片内部内容的“内边距”或“安全区”。底部黑线定义了内容在垂直方向上的放置范围。黑点覆盖的区域对应到图片内部就是内容可以占据的垂直空间的下边界。右侧黑线定义了内容在水平方向上的放置范围。注意对于启动图Splash Screen而言我们通常只关心拉伸区域因为启动图一般是全屏静态展示不包含动态变化的内容如文字。因此在制作启动图的.9.png时底部和右侧的黑线常常可以留空不画任何黑点或者与拉伸线保持一致。我们的首要目标是保证图片在各种屏幕比例下拉伸不变形。2.2 为uniapp启动图设计.9.png的思路结合uniapp的特性我们在设计启动图.9.png时需要明确几个要点确定核心不可变区域你的启动图上哪些部分是绝对不能拉伸的通常是公司的Logo、核心产品名称、特定的图标或边框。这些元素必须在设计稿中就集中在一个相对固定的区域比如居中偏上。寻找合适的拉伸区域观察你的启动图设计。通常背景是纯色、渐变色或简单纹理的部分是最理想的拉伸区域。例如一个从上到下的渐变背景我们可以将拉伸线定义在背景的纯色部分这样拉伸时渐变过渡依然平滑自然。考虑屏幕比例多样性从传统的16:9到现在的18:9、19.5:9、20:9甚至更长的屏幕。你的.9.png需要能从容应对宽度和高度的独立变化。这意味着你可能需要同时定义水平和垂直的拉伸区域。与uniapp工程结构对接制作好的.9.png需要放入uniapp项目的特定目录下并且命名要规范否则HBuilderX在打包时无法识别。3. 工具选择与素材准备3.1 制作工具推荐制作.9.png并不需要特别高深的工具但选对工具能事半功倍。Android Studio推荐这是最官方、最可靠的工具。它内置的draw9patch工具非常直观。你只需要将普通PNG拖进去用鼠标在边缘画黑线即可所见即所得还能实时预览拉伸效果。优点官方工具功能准确预览直观。缺点需要安装完整的Android Studio略显笨重。在线.9.png制作工具搜索“9 patch tool online”可以找到一些网页工具。它们通常提供一个画板让你绘制黑线。优点无需安装打开即用。缺点功能可能不完整预览效果可能与真机有差异存在隐私风险上传公司Logo图需谨慎。Photoshop/GIMP等专业图像软件通过手动添加一个1像素宽的边框图层并用铅笔工具绘制黑点。这要求你对原理非常清楚且容易出错。优点适合熟悉设计软件的设计师。缺点步骤繁琐无法实时预览不推荐新手使用。对于大多数uniapp开发者我强烈建议使用Android Studio。虽然它是个“大家伙”但一次安装终身受益不仅能处理.9.png以后需要处理原生安卓代码时也能用上。3.2 准备原始启动图素材在开始制作前你需要一份高质量的启动图设计稿。这里有几个关键参数分辨率虽然.9.png可以拉伸但提供一个高分辨率的底图总是好的。建议至少提供一张1440x2560px或更高的PNG图片。这能覆盖绝大多数高分辨率设备。设计规范安全区域考虑到刘海屏和挖孔屏重要的视觉元素如Logo应放置在屏幕中央区域避免太靠顶部。背景尽量使用可无缝拉伸的样式如纯色、对称渐变、简单的重复纹理。复杂的、非对称的摄影图或插画很难用.9.png完美适配可能需要为不同比例单独切图但这违背了.9.png的初衷。文件格式导出为32位PNG带Alpha通道这样可以保留透明度方便处理非矩形启动图虽然全屏启动图通常不需要。4. 使用Android Studio制作.9.png详解假设你已经安装好了Android Studio。我们一步步来。4.1 创建测试工程与导入图片打开Android Studio选择“New Project”随便创建一个“Empty Views Activity”项目项目名称和位置任意。在项目视图的app/src/main/res目录下找到drawable文件夹。如果没有可以右键res-New-Android Resource Directory类型选择drawable。将你准备好的高清启动图PNG文件例如splash.png复制到drawable文件夹中。4.2 使用Draw 9-patch工具在Android Studio的Project面板中右键点击刚才导入的splash.png文件。在右键菜单中选择Create 9-Patch file...。弹出一个对话框建议你重命名文件默认是在原文件名后加.9变成splash.9.png点击OK。此时splash.9.png文件会自动生成并且会用Android Studio内置的Draw 9-patch编辑器打开。这个编辑器界面很简单中间是你的图片预览。左侧和顶部有一条像素带用于绘制拉伸线顶部和左侧。右侧和底部有一条像素带用于绘制内容线底部和右侧。右侧预览窗格会实时显示图片被拉伸后的效果。4.3 绘制拉伸线关键步骤这是最核心的一步。我们的目标是让背景拉伸而Logo不变。放大视图使用编辑器右下角的滑块放大图片直到能清晰看到每一个像素。这是精确操作的前提。分析图片结构观察你的启动图。假设它是一个中心有Logo背景为从上到下的蓝色渐变的图片。我们需要水平拉伸时只拉伸背景的渐变部分而避开中心的Logo。因此顶部的拉伸线应该在Logo左侧和右侧的背景区域画点。同样垂直拉伸时也只拉伸Logo上方和下方的背景区域。因此左侧的拉伸线应该在Logo上方和下方的背景区域画点。绘制顶部黑线控制水平拉伸在顶部像素带的最左端点一个黑点。这代表从图片左边界开始。将鼠标移动到Logo左侧背景区域的右边界紧挨着Logo在顶部像素带对应位置点一个黑点。这代表水平拉伸区域的左边界。将鼠标移动到Logo右侧背景区域的左边界紧挨着Logo在顶部像素带对应位置点一个黑点。这代表水平拉伸区域的右边界。在顶部像素带的最右端点一个黑点。这代表到图片右边界结束。效果现在顶部黑线被分成了三段左背景区、Logo区、右背景区。只有左背景区和右背景区被标记为可拉伸Logo区域被保护起来。绘制左侧黑线控制垂直拉伸同理在左侧像素带的最顶端点一个黑点。在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项目。定位目录打开你的uniapp项目找到nativeplugins目录如果没有请在项目根目录创建。安卓资源路径在nativeplugins下创建路径Android/res/drawable-xxhdpi/。drawable-xxhdpi代表超超高密度这是一个通用的高分辨率资源目录。HBuilderX在打包时会优先从这里查找资源。放入文件将制作好的splash.9.png文件复制到Android/res/drawable-xxhdpi/目录下。配置manifest.json在项目的manifest.json文件中你需要配置启动图。但注意对于安卓原生.9.png我们通常不在manifest.json的splashscreen节点里直接引用因为那里配置的图片会被uniapp框架处理可能无法正确识别.9.png特性。正确配置方法推荐实际上对于安卓原生启动图更标准的做法是通过原生插件或自定义基座的方式来替换。但对于许多只需要替换启动图场景一个更直接的方法是将splash.9.png重命名为安卓系统约定的启动图名称。最常见的名称是launch_screen.9.png。你可以查阅uniapp官方文档或对应原生引擎的文档确认确切的文件名。将重命名后的launch_screen.9.png文件覆盖到nativeplugins/Android/res/drawable-xxhdpi/目录下如果已有则覆盖。这种方式利用了HBuilderX云打包或本地打包时nativeplugins目录下的资源会覆盖引擎默认资源的机制。重要提示这种方法可能因uniapp版本和打包方式云打包/本地打包而异。最稳妥的方式是查阅你当前使用版本的uniapp官方文档中关于“原生插件开发”或“本地资源引用”的章节了解如何替换安卓原生资源。6. 真机测试与常见问题排查6.1 测试验证配置完成后不要急于提交市场必须进行真机测试。使用自定义调试基座在HBuilderX中运行 - 运行到手机或模拟器 - 制作自定义调试基座。在制作过程中选择包含你刚配置了.9.png资源的原生插件如果你是以插件形式配置的。然后使用这个自定义基座安装到测试机上。准备多种屏幕比例的测试机至少找一台传统16:9屏幕的手机和一台全面屏如19.5:9或更长的手机进行测试。观察启动图正常情况启动图快速显示Logo清晰无变形背景填充整个屏幕无黑边拉伸过渡自然。异常情况Logo被拉扁或拉高、背景出现重复的断层、屏幕四周有黑边。6.2 常见问题与解决方案实录下面是我在实际项目中踩过的坑和解决方案整理成了速查表问题现象可能原因排查步骤与解决方案启动图拉伸后Logo模糊或变形1. 拉伸线画在了Logo所在的像素列上。2. 原始图片分辨率太低拉伸后必然模糊。1.检查.9.png用Android Studio重新打开.9.png放大检查顶部和左侧的黑线确保没有任何一个黑点位于Logo垂直或水平投影区域内。将黑点向背景区域调整。2.检查原图提供更高分辨率的原始设计稿建议2880x以上重新制作.9.png。启动图四周有黑边1. 拉伸区域定义得太小不足以填满屏幕。2. 内容线底部、右侧定义错误限制了显示区域。3. uniapp启动图配置的尺寸模式不对。1.扩大拉伸区域对于纯色或渐变背景最简单的方法是在顶部黑线的最左和最右点一个点中间全部留空在左侧黑线的最顶和最底点一个点。这表示整个背景区域都可拉伸。2.清空内容线将底部和右侧的黑线全部擦除留空。3.检查manifest配置确保manifest.json中splashscreen下的android配置style或drawable引用正确。.9.png图片在手机上显示为全黑或异常1..9.png文件本身制作错误黑线画在了错误的位置或超出了1像素边框。2. 图片未放入正确的资源目录或文件名不符合规范。1.验证.9.png将.9.png文件拖回Android Studio的draw9patch工具中检查边缘黑线是否规整。也可以使用aapt工具验证在Android SDK的build-tools目录下找到aapt执行aapt l -a your_app.apk | grep splash查看资源是否被正确打包。2.检查路径和命名确认文件放在nativeplugins/Android/res/drawable-xxhdpi/下并且文件名正确如launch_screen.9.png。注意.9.png这个后缀是完整的不要写成launch_screen.png。云打包后启动图未生效nativeplugins目录下的资源在云打包时未被成功合并。1.检查插件配置确认你是否创建了对应的原生插件配置文件package.json等。如果只是简单放文件云打包可能不会处理。2.使用本地打包尝试使用Android Studio进行本地离线打包这样可以完全控制资源合并过程便于调试。3.提交工单如果确认配置无误可能是HBuilderX云打包服务的个别问题可以提交工单咨询DCloud官方。iOS启动图正常仅Android有问题混淆了iOS和Android的启动图配置。iOS使用.storyboard或静态图片集完全不支持.9.png格式。分开处理iOS启动图需要在manifest.json的splashscreen-ios下单独配置或者提供2x,3x的PNG图片集。Android的.9.png配置只针对安卓平台生效。务必确保平台特异性配置正确。一个关键的避坑技巧在将.9.png集成到uniapp项目前可以先在一个纯净的安卓原生测试项目里验证它的正确性。在Android Studio里新建一个安卓项目把你的.9.png放到res/drawable下然后在布局文件中用一个ImageView设置android:backgrounddrawable/your_splash并让这个ImageView的宽高设为match_parent。在不同尺寸的模拟器上运行观察效果。这样可以100%确定图片本身没问题排除了uniapp打包流程带来的干扰。7. 高级技巧与自动化思路当你的应用需要适配多个品牌渠道可能要求不同的启动图或者需要频繁更新启动图时手动制作和替换.9.png会变得繁琐。这里有一些进阶思路。7.1 使用脚本批量生成如果你的启动图遵循固定的设计模板例如只有Logo和背景色会变你可以考虑使用脚本自动化生成.9.png。原理使用ImageMagick一个强大的命令行图像处理工具组合操作。步骤准备一个“模板”.9.png这个图片只有黑线标记中间区域是透明的。准备一张“内容”图即你的实际启动图不带黑边。使用ImageMagick命令将“内容”图复合到“模板”图的透明区域上生成最终的.9.png。示例命令需先安装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流程中集成在团队协作或持续集成环境中可以将上述脚本集成到构建流水线中。在package.json中定义脚本命令例如“generate:splash-android”: “node scripts/generate-9patch.js”。在scripts/generate-9patch.js中使用sharpNode.js图像处理库或调用ImageMagick命令行读取配置文件和原始素材自动生成对应尺寸和渠道的.9.png文件并输出到nativeplugins的正确目录下。在HBuilderX的云打包或本地打包命令执行前先运行这个生成脚本。这样做的好处是UI设计师只需要提供一张高质量的、符合规范的基础启动图开发者无需再手动打开Android Studio进行绘制减少了人为错误也提升了效率。7.3 应对极端屏幕比例对于超长屏如21:9或折叠屏单纯的拉伸可能仍会导致背景过度拉伸而显得稀疏。更专业的做法是提供多套.9.png为drawable-xxhdpi(通用)、drawable-xxxhdpi(超清) 等不同密度目录提供略微不同的.9.png。在超高密度设备上使用背景细节更丰富的版本。使用图层分离将启动图设计成“背景层”和“前景层”。背景层是一张纯色或简单渐变、可以安全拉伸的.9.png。前景层Logo、文字作为另一张PNG在代码中居中覆盖在背景层上。这需要更深入的原生开发通过自定义Splash Activity来实现超出了简单替换图片的范围但提供了最大的灵活性。制作一个完美的.9.png启动图是uniapp安卓应用打磨细节的第一步。它看似是个小点却直接影响用户打开应用瞬间的感官体验。花点时间理解原理用对工具做好测试就能让你的应用从启动那一刻起就显得专业而可靠。
