“点9图”看这一篇就够了

点九图相信大家在入门 UI 的时候就开始接触过，只要涉及到Android开发，就会被广泛运用在很多场景。本次将结合我在实际工作中碰到的问题，详细介绍下「点九图」的具体应用方法。

1. 什么是点九图

在Android开发中，常用到的一种特殊格式的图片，它具有可拉伸的特性，官方学名叫NinePatchDrawable，简称「点九图」。 点九图是一种可拉伸的位图，安卓会自动调整它的大小，来使图像在充当背景时可以在界面中自适应。 点九图是标准PNG格式的图像，并包含了多出来的1像素宽的边界。保存点九图时要以 .9.png 结尾，放置在项目中【res/drawable/】路径之下。

从官方的解释我们可以知道以下几点：

1. 首先是安卓设备才被支持
2. 其特征主要是在原本很小的元素上进行定位拉伸序列表项
3. 必须以.9.png结尾，才能被识别到序列表项序列表项

2. 为什么需要

Android 机型适配

Android有很多不同尺寸的屏幕，从720p，1080p，再到2k，还有现在的全面屏，固定尺寸的图片在这些屏幕上呈现会各不相同。 文案长度自适应

在点九图充当背景，上面承载文案时，因为文案的长短会根据实际需求动态调整，无法固定长度。所以一张图片无法适配这些复杂的场景。 提升性能

点九图不需要全尺寸输出图片，加上文案自适应，从而减小了安装包大小，降低了用户下载安装时长并提升性能。

3. 使用场景

聊天气泡

聊天气泡是最普遍的应用场景，包括特殊的样式，动态的文案长度，以及不同分辨率的适配。

小Tips提醒

我们经常看到的促销引导，功能说明，也可以根据产品运营需要动态调整大小，长度。

特殊背景的按钮

一些特殊的背景样式，高级投影的按钮，也可以用点九图输出，达到效果。

4. 实现原理

通过在图片四周添加「黑线」标记，达到信息传达和定义的目的。

当图片在程序中被编译并最终生成Apk程序时，程序会将「黑线」所代表的信息提取并实现图片拉伸，然后再把这部分去除，因此图中的「黑线」不会影响到图片的最终展示。

黑线的含义

1. 纵向拉伸区域，控制图片高的拉伸
2. 横向拉伸区域，控制图片宽的拉伸
3. 纵向内容显示区域，文字在这个高度内显示
4. 横向内容显示区域，文字在这个宽度内显示

5. 点9图的切图方法

下面以聊天气泡为例

1. 在设计软件（Sketch/Figma/PS）将图片的展示区域缩到最小（预留出标注拉伸的空间，尽量让图片大小为偶数）， 输出png资源
2. 导入PS，选择图像->画布大小，宽和高各增加2px（上下左右各需要多出1px）
3. 打开参考线显示，水平和垂直各拉几条对齐和居中的参考线（参考线的辅助可以帮助我们更准确画出「黑线」，不影响到特殊的边角）
4. 用【选框工具】，选择纯黑色#000，分别在四周合适区域填充1px宽/高的 纯黑色线条。
5. 完成后将图片保存为png格式，并将文件后缀名改成【.9.png】，输出给开发。

6. 需要注意的点

1. 导出的文件必须是png格式，文件名必须以「.9.png」结尾
2. 「黑色线条」一定是纯黑色#000的1px宽/高的线条，且在画的过程中要注意拉伸的位置
3. 点九图只能被拉伸变大变长，不能被压缩变小变短，所以原图要尽量缩小范围
4. 切图若有投影，要保证投影完整输出，且要在「黑色线条」范围内