不慌！【点九图】就这样给
点九图相信大家在入门 UI 的时候就开始接触过，只要涉及到Android开发，就会被广泛运用在很多场景。
前言
点九图相信大家在入门 UI 的时候就开始接触过，只要涉及到Android开发，就会被广泛运用在很多场景。而作为一名在互联网搬了三四年砖的老民工，居然现在才搞懂原理和具体的操作步骤，想想之前几年都干了些啥……😓本次将结合我在实际工作中碰到的问题，直接明了的解释点九图的具体应用。那我们废话不多说，现在开始…
1. 什么是点九图
在Android开发中，常用到的一种特殊格式的图片，它具有可拉伸的特性，官方学名叫【NinePatchDrawable】，俗称【点九图】。 点九图是一种可拉伸的位图，安卓会自动调整它的大小，来使图像在充当背景时可以在界面中自适应。 点九图是标准PNG格式的图像，并包含了多出来的1像素宽的边界。保存点九图时要以【.9.png】结尾，放置在项目中【res/drawable/】路径之下。
从官方的解释我们可以知道以下几点：
首先是安卓设备才被支持
其特征主要是在原本很小的元素上进行定位拉伸
必须以【.9.png】结尾，才能被识别到
2. 为什么需要
Android 机型适配
Android有很多不同尺寸的屏幕，从720p，1080p，再到2k，还有现在的全面屏，固定尺寸的图片在这些屏幕上呈现会各不相同。
文案长度自适应
在点九图充当背景，上面承载文案时，因为文案的长短会根据实际需求动态调整，无法固定长度。所以一张图片无法适配这些复杂的场景。
提升性能
点九图不需要全尺寸输出图片，加上文案自适应，从而减小了安装包大小，降低了用户下载安装时长并提升性能。
3.使用场景
聊天气泡
聊天气泡是最普遍的应用场景，包括特殊的样式，动态的文案长度，以及不同分辨率的适配。
Tips
我们经常看到的促销引导，功能说明，也可以根据产品运营需要动态调整大小，长度。
背景按钮
一些特殊的背景样式，高级投影的按钮，也可以用点九图输出，达到效果。
4. 实现原理
通过在图片四周添加 【黑边】标记，达到信息传达和定义的目的。
当图片在程序中被编译并最终生成Apk程序时，程序会将 【黑边】所代表的信息提取并实现图片拉伸，然后再把这部分去除，因此这些【点九图】中的 【黑边】就不会影响到图片的最终展示。
黑边的含义
❶ 纵向拉伸区域。控制图片高的拉伸
❷ 横向拉伸区域。控制图片宽的拉伸
❸ 纵向显示区域。文字在这个高度内显示
❹ 横向显示区域。文字在这个宽度内显示
💡 理解小窍门
一开始我也老是不能理解四个边分别代表的含义，每次画的时候都会翻出资料，看看是不是对的，后来发现只要记住 自然+顺时针两个关键词，就可以很好的理解了。
自然+顺时针。自然的阅读顺序，即从前到后，从上到下，加上顺时针，就是前-上-后-下，前面两个控制拉伸范围，最后两个控制显示区域。
5. 制作方法
下面以聊天气泡为例：
1. 在设计软件（Sketch/Figma/PS）将图片的展示区域缩放到最小（聊天气泡的话宽高一般控制在以容纳一句文字为基准，预留出拉伸的空间，尽量让图片大小为偶数）， 输出png资源
2. 导入PS，选择图像->画布大小，宽和高各增加2px（上下左右各需要多出1px）
3. 打开参考线显示，水平和垂直各拉几条对齐和居中的参考线（参考线的辅助可以帮助我们更准确画出【黑边】，不影响到特殊的边角）
4. 用【选取工具】，选择纯黑色，分别在四边填充大小合适的区域，注意四边分别代表的含义（一定是一条1px的纯黑色线）
5. 完成后保存，并将文件后缀名改成【.9.png】，输出给开发。
6. 需要注意的点
👉🏻 导出的文件必须是png格式，文件名必须以【.9.png】结尾
👉🏻 【黑边】一定是纯黑色，且在画的过程中要注意拉伸的位置
👉🏻 点九图只能被拉伸变大变长，不能被压缩变小变短，所以原图要尽量小
👉🏻 类似带有渐变样式、不可平铺的图层，不适合使用点九图
👉🏻 切图若有投影，要保证投影完整输出，且控制在黑线内
7. 参考文章
写在后面
【点九图】在我们实际工作中经常用到，所以对它的理解和操作步骤一定要牢记在心，这样不至于要给到开发时，手忙脚乱不知道该如何输出。
也借此机会，将这个很基础的小知识点分享出来，记录的过程也让我重新回顾，提取更通俗易懂的方法。
下篇将介绍我工作所做的内容，关于中东直播产品的那些事。
