1. 项目概述：为什么启动图.9.png是安卓开发的“门面”工程

在安卓应用开发中，第一印象至关重要。用户点击图标到主界面加载完成的这短短几秒，启动图（Splash Screen）是留住用户、传递品牌调性的关键视觉载体。而.9.png，这个听起来有些神秘的后缀，正是确保这张“门面”在不同尺寸、不同分辨率的安卓设备上都能完美展示的核心技术。它不是普通的PNG图片，而是一种被称作“九宫格”（Nine-patch）的可拉伸图片格式。我见过太多开发者和设计师在这个环节踩坑：明明在模拟器上显示正常的启动图，一到真机上就边缘模糊、文字被拉伸、Logo变形，最终导致应用显得粗糙、不专业。究其根源，往往是对.9.png的制作原理和流程理解不透彻。

简单来说，一张.9.png图片在它的四个边缘各多了一条1像素宽的黑线。这四条黑线就是控制图片拉伸和内容区域的“密码”。上下两条黑线定义了水平方向和垂直方向的可拉伸区域；左右两条黑线则定义了内容（比如文字、Logo）的允许放置区域。安卓系统在渲染时，只会拉伸黑线标记的区域，其他部分（特别是边角和包含重要视觉元素的区域）则保持原样，从而实现了自适应且不变形的显示效果。对于启动图而言，这通常意味着我们要保护应用的Logo、品牌名称等核心元素不被拉伸，同时让纯色的背景或渐变背景能够自由延展以填充任何屏幕。接下来，我将结合多年实战经验，为你拆解从设计源文件到最终可用的.9.png的完整制作流程，并分享那些官方文档里不会写的“避坑指南”。

2. 核心原理与设计准备：理解“九宫格”的运作机制

在动手制作之前，我们必须彻底理解.9.png的工作原理，这能帮助我们在设计阶段就做出正确的决策，避免后续返工。

2.1 “九宫格”的解剖学：四条黑线的职责

你可以把一张.9.png想象成被两条横线和两条竖线分割成的九个宫格。这四条线就是图片边缘那1像素宽的黑线。

1. 顶部黑线（Top Line）：定义水平方向的可拉伸区域。这条黑线上的黑色像素段标记了在水平方向上允许被拉伸的部分。例如，如果你的启动图背景是中间一段水平渐变，两边是纯色，那么你只需要在渐变区域对应的顶部画上黑点，纯色区域则留空。系统在横向拉伸时，就只会拉伸渐变部分，两边的纯色保持原宽。
2. 左侧黑线（Left Line）：定义垂直方向的可拉伸区域。原理同顶部黑线，但它控制垂直方向的拉伸。通常用于处理垂直渐变或需要纵向适配的背景。
3. 底部黑线（Bottom Line）：定义水平方向的内容区域。这条线规定了图片中可放置文本、按钮等内容的水平范围。内容会被约束在这个区域内，防止超出或布局错乱。对于启动图，如果上面有“加载中…”这样的文字，就需要用这条线来划定文字的安全区。
4. 右侧黑线（Right Line）：定义垂直方向的内容区域。与底部黑线配合，共同划定一个矩形的内容框（Content Padding）。

关键心得：对于大多数启动图，其核心内容是居中且固定的（如Logo）。因此，顶部和左侧的黑线（拉伸控制）是必须精心设置的，而底部和右侧黑线（内容区域）如果启动图没有内嵌文字，可以简单地从左到右、从上到下画满（表示整个图片区域都可放内容），或者根据Logo的安全区域来划定。但如果有文字，就必须精确设定。

2.2 设计稿的注意事项：为“拉伸”而设计

很多UI设计师提供的启动图稿是“静态”的，只考虑了某一种分辨率（比如1080x1920）。但我们要制作的是能适配从小屏手机到大屏平板、从720p到4K的各种设备。因此，在设计源头就要有“动态适配”思维。

1. 核心元素居中且紧凑：Logo、品牌名称等核心视觉元素应尽量集中在画布中央区域。避免将重要元素放在靠近边缘的位置，因为在极端比例（如超宽屏）的设备上，边缘部分可能因拉伸或裁剪而变得不可预测。
2. 背景的选择：纯色背景是最简单、最安全的，因为任何部分的拉伸都不会产生视觉问题。渐变背景则需要谨慎：
   • 线性渐变：如果渐变方向是水平或垂直的，务必确保渐变区域位于你计划标记为可拉伸的区域。例如一个水平居中渐变，那么就在顶部黑线的中间部分标记拉伸点。
   • 径向渐变或复杂背景：非常不适合制作.9.png，因为拉伸会导致渐变中心偏移或图案变形。对于这类设计，更推荐使用多套切图（针对主流宽高比）或结合代码动态生成背景。
3. 画布尺寸的考量：虽然.9.png可以拉伸，但提供一个足够大的基础分辨率总是好的。通常，我会以目前主流高端机型的一种分辨率（如1440x3200）作为设计基准。更大的基础尺寸意味着在拉伸到更大屏幕时，细节损失更少。

3. 工具选型与实操制作：从PS插件到独立工具

制作.9.png的工具有很多，从集成在Android Studio内的编辑器，到独立的图形化工具，再到Photoshop插件，各有优劣。我将介绍最实用的几种。

3.1 使用Android Studio内置编辑器（最直接）

对于已经集成在项目中的图片，这是最快捷的修改方式。

1. 在Android Studio的Project视图里，双击你的.9.png文件（例如splash.9.png）。
2. 图片会在一个专属编辑器中打开，四周可以看到灰白相间的边框区域，这就是绘制黑线的地方。
3. 绘制拉伸区域（Stretch Area）：
   • 在上边框点击并拖动，绘制一条或多条黑色线段，定义水平拉伸区。
   • 在左边框点击并拖动，定义垂直拉伸区。
   • 按住Shift键点击可以擦除已绘制的黑线。
4. 绘制内容区域（Content Area）：
   • 在下边框绘制，定义水平内容区。
   • 在右边框绘制，定义垂直内容区。
5. 右侧的预览窗口会实时显示拉伸效果，你可以拖动预览窗格的边界，模拟在不同尺寸下的显示情况。

优点：与开发环境无缝集成，预览直观。缺点：功能相对基础，对于复杂拉伸区域的精细控制比较麻烦；无法直接创建新的.9.png，需要先有一张普通PNG。

3.2 使用独立工具：NinePatchEditor（推荐用于创作）

这是一个免费、开源、功能强大的独立工具，非常适合从零开始创建或精细调整.9.png。

1. 下载与启动：从其开源项目页面下载JAR包，通过Java运行。
2. 导入基础图片：将你的普通启动图PNG导入。
3. 绘制引导线：界面清晰地将四条边的绘制区域分开。你可以用画笔工具精确地在上下左右四个条带上画黑线。
   • 工具通常提供缩放视图，方便你对准像素进行绘制。
   • 有**“Patch Scale”** 滑块，可以实时看到图片被拉伸到不同比例的效果，比Android Studio的预览更灵活。
4. 保存与导出：编辑完成后，直接保存就会生成标准的.9.png文件。记得遵循安卓资源命名规范，如splash.9.png。

优点：操作专业，预览功能强大，适合处理复杂需求。缺点：需要单独运行一个Java程序。

3.3 使用Photoshop脚本或动作（适合设计师批量处理）

如果设计师需要批量产出多套不同尺寸或风格的.9.png，可以通过PS脚本自动化。

1. 手动制作模板：先手工制作一张标准的.9.png，分析其结构。你会发现，它就是在原图四周添加了1像素宽的黑边。
2. 录制PS动作：
   • 新建一个动作，开始录制。
   • 将画布大小增加2像素（宽和高各+2），定位在“中心”。
   • 新建一个图层，用1像素铅笔工具，根据预设的拉伸和内容区域，在图片的四个边缘精确绘制黑线。
   • 合并图层并保存为PNG。
   • 停止录制。
3. 批处理：对需要转换的所有启动图设计稿运行这个动作。

优点：能与设计流程深度整合，效率极高。缺点：需要一定的PS脚本或动作编写能力，且修改拉伸规则时需要调整动作，不够灵活。

避坑提示：无论用哪种工具，完成后务必在多种宽高比的模拟器或真机上测试。最常见的错误是黑线画在了错误的像素上（例如，应该画在扩展的边框上，却画到了原图内容里），导致编译失败或显示异常。在Android Studio中编译时，如果.9.png格式错误，Gradle构建会报错“NinePatch image malformed”，并指出具体哪个文件有问题，这是重要的调试信息。

4. 高级技巧与适配策略：应对复杂场景

掌握了基础制作后，我们来看看一些更复杂的实战场景和提升效率的技巧。

4.1 处理带边框或阴影的启动图

如果启动图有细微的边框或投影，直接拉伸会导致边框变粗或阴影变形。解决方案是：

• 将边框/阴影置于不可拉伸区域：在绘制顶部和左侧黑线时，确保边框和阴影所在的像素行/列没有被标记为可拉伸。通常，这意味着你的可拉伸区域是图片最中心的纯色部分，而将四周包含边框的几个像素保护起来。
• 使用图层分离：更专业的做法是将背景（可拉伸部分）和前景（Logo、边框等）在设计中就分图层。导出时，背景层制作成.9.png，前景层作为普通PNG覆盖在上面。在代码中，可以使用FrameLayout或LayerDrawable来实现叠加。这能获得最高的显示质量。

4.2 多分辨率适配与自动化

虽然.9.png解决了拉伸问题，但对于不同分辨率，我们可能还是需要提供不同尺寸的切图以保真度。安卓的res资源目录系统就是干这个的。

1. 准备多套切图：根据安卓的密度限定符，至少准备mdpi,hdpi,xhdpi,xxhdpi,xxxhdpi几套不同分辨率的启动图原稿。比例通常是1:1.5:2:3:4。
2. 批量生成.9.png：利用前面提到的PS动作，或者编写一个简单的脚本（例如使用Python的PIL库），为每一套不同分辨率的原图自动添加相同的黑线边框，生成对应的.9.png文件。
3. 资源目录放置：

   res/ drawable-mdpi/splash.9.png drawable-hdpi/splash.9.png drawable-xhdpi/splash.9.png drawable-xxhdpi/splash.9.png drawable-xxxhdpi/splash.9.png

   系统会根据设备屏幕密度自动选择最合适的一个。

4.3 在代码中动态使用.9.png

在XML布局文件中引用.9.png和引用普通图片没有区别，系统会自动识别并处理拉伸。

<ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/splash" <!-- 注意，这里不要加.9后缀 --> android:scaleType="fitXY"/> <!-- 通常需要设置为fitXY以填充屏幕 -->

在Java/Kotlin代码中设置也一样：

val splashView: ImageView = findViewById(R.id.splash_image) splashView.setImageResource(R.drawable.splash) // 同样只使用基础名

关键点：在引用时，务必省略文件名的.9后缀。系统通过资源编译工具（aapt）在构建时已经识别了它的九宫格属性。

5. 常见问题排查与实战调试记录

即使按照流程操作，在实际开发中还是会遇到各种问题。下面是我总结的常见“坑位”及解决方案。

5.1 问题现象：图片边缘出现多余黑线或白线

• 原因分析：这是最典型的问题。根本原因是.9.png四周那1像素的黑线，在绘制时不小心被包含进了最终显示的图片内容区域。或者相反，该画黑线的地方没有画，导致系统误将图像边缘像素当作拉伸标记。
• 排查步骤：
  1. 用图片查看软件（如NinePatchEditor）放大查看图片的四个边缘，确认黑线是否严格在边缘的1像素内，且没有多余的半透明或杂色像素。
  2. 检查黑线是否连续、清晰。有时用PS等工具缩放画布时，算法可能导致边缘像素模糊或产生抗锯齿，这会让系统无法正确解析。
• 解决方案：重新编辑.9.png，确保四条边上的黑线是纯黑色（RGB #000000）的1像素宽线段，并且完全位于图片的边界上。在NinePatchEditor中，使用像素级别的画笔工具进行修正。

5.2 问题现象：图片拉伸后，Logo或关键图形变形

• 原因分析：拉伸区域（顶部和左侧黑线）标记错误，将本应保护起来的Logo区域也标记为可拉伸了。
• 排查步骤：在编辑工具中，仔细检查你绘制的顶部和左侧黑线。它们覆盖的垂直和水平投影区域，是否与Logo所在区域有重叠？
• 解决方案：修改拉伸区域标记。原则是：只标记那些纯色、渐变或简单重复纹理的区域。对于Logo、文字等复杂图形所在的水平和垂直带，必须在顶部和左侧黑线中留空（不画黑点）。例如，Logo在水平方向占据了中间200像素，那么顶部黑线的这200像素区间就应该是空的。

5.3 问题现象：编译通过，但在某些特定屏幕比例上显示不全或过度拉伸

• 原因分析：内容区域（底部和右侧黑线）设置不合理。如果内容区域画得比实际内容小，在系统进行布局计算时，可能会错误地裁剪内容。如果拉伸区域设置得太窄，在极端宽高比屏幕上，系统为了填满空间，会对仅有的可拉伸区域进行剧烈拉伸，导致背景图案（如渐变）被拉得很稀疏难看。
• 解决方案：
  • 针对内容区域：如果不确定，一个保守的做法是将底部和右侧黑线从头到尾画满（即内容区域等于整个图片）。这对于只有背景和居中Logo的启动图是安全的。
  • 针对拉伸区域：不要只标记一个像素点。对于渐变背景，应该标记整个渐变区域。对于纯色背景，则可以标记除边缘保护区域外的所有部分，让拉伸更均匀。在NinePatchEditor中，充分利用缩放预览功能，拖动到各种奇葩比例（如21:9, 1:1）查看效果。

5.4 问题速查表

6. 从启动图到现代Splash Screen API的最佳实践

随着Android 12（API level 31）的发布，Google引入了新的SplashScreenAPI，它提供了一种标准化、性能更好的启动体验。了解它与传统.9.png启动图的关系很重要。

1. 核心变化：新的API将启动画面分为两部分：初始显示（Initial Display）和动画退出（Animated Exit）。系统会首先自动创建一个默认启动画面，这个画面由应用图标（Adaptive Icon）和窗口背景（theme中设置）构成。
2. .9.png的角色演变：在这种情况下，传统的全屏图片启动图不再是唯一或推荐的选择。你的品牌元素可以通过以下方式融入：
   • 设置窗口背景：在主题（Theme）中，可以通过android:windowSplashScreenBackground设置一个纯色或渐变，这可以替代之前.9.png的背景功能。
   • 设置动画标志：通过android:windowSplashScreenAnimatedIcon可以设置一个带动画的图标，这比静态Logo更吸引人。
   • 自定义进场动画：你仍然可以延迟关闭系统默认的启动画面，并在这段时间内展示自己的自定义视图（比如一个包含品牌元素的ImageView）。此时，如果你在这个自定义视图里使用图片，.9.png技术依然适用，用于适配这个视图内的图片元素。
3. 兼容性处理：对于API 31以下的设备，应用还是会回退到传统的启动方式（即你在Activity的onCreate之前显示的界面）。因此，一套完美的.9.png启动图对于支持旧版本设备仍然是必不可少的。你的应用需要同时处理新旧两套逻辑。

实操建议：对于新项目，应该优先按照新的SplashScreenAPI进行设计，将品牌背景色、图标动画作为重点。同时，准备一个高质量的.9.png格式的启动图，作为旧版系统的后备方案，并确保两者在视觉风格上保持一致。这个过渡阶段，理解.9.png的制作，能让你更好地控制在所有用户设备上的第一印象。