文章来源：转行人的设计笔记，ID：zhrenui
作者：Andrew_臣

点九图是安卓独有的切图格式，这种格式可以使圆角矩形在拉伸放大时不会模糊失真。之前对点九只是有了解，后来在实际案例中磕磕碰碰，参考了大量文章才有了较为切实的理解体会。鉴于很多小伙伴对于这一块依旧是一知半解，因此我将这一部分单独拎出来进行复盘，希望对小伙伴们有所帮助。


什么是点九图

点九图（Nine Patch Drawable Grahpic）是安卓独有的切图格式，针对界面中所有可拉伸的圆角矩形，最常用的场景就是界面中那些会随字段长度而变化的聊天对话框、标签等等，以及android各式各样终端设备的自适应。

举个通俗易懂的例子。微信中的对话气泡会随着用户输入文本的长短或者终端屏幕的尺寸大小，会产生长度高度的自由变化，但是气泡本身并不会失真。这就是因为拉伸动作只存在于四个圆角外的部分，所以不论你输入多少文本，横屏竖屏，手机还是平板，都可以很好得自适应。而一旦没有做这些处理，圆角矩形就会变成右下图：

ios对于这类情况只需要一串UIImage代码即可解决，然鹅android就没有那么友好了。为了避免失真变形，需要咱们设计师先制作android专属的点九图，再交付给前端才能解决。

点九图的原理

为了方便定义可拉伸区域，我们一般先将圆角矩形划分为九个区域，除了1、2、3、4的圆角区域不可拉伸外，其他区域都可以自由拉伸。而实现原理就是，程序通过识别圆角矩形四周的1px、#000000的黑线（需要设计画出），来达到定义拉伸区域和文本区域的目的。

那这四条黑线又各自代表什么呢？

左上的两条黑线：定义圆角矩形的可拉伸区域

右下的两条黑线：定义圆角矩形中的文本区域

可拉伸区域的定义

当你在5、6区域的旁边画两条1px的黑线时，android程序便可以识别到这俩玩意儿是可以分别横向和纵向拉伸的，为了方便各位理解，这里借鉴了菜心大佬的方法，画了更浅显易懂的示意图。

当我们只画出左侧黑线时，相当于将圆角矩形划分为三个形状，两个深蓝色不可拉伸形状+绿色可拉伸形状。后者即黑线高度所对应的形状，可以实现纵向的自由拉伸：

如果黑线高度只有2px，可拉伸形状高度也同样会缩至2px，但依旧可以得到想要的高度：

这时可能有人想问：那到底要多高的黑线呢？

一般在实际项目中要考虑到图片占用的内存，因此我们需要尽可能得压缩图片尺寸，一到两个像素的黑线（可拉伸区域）足矣，没必要搞多长。

试想下，在一个有20个tag的筛选页中，如果每个tag定义了10px的纵向拉伸区域，相当于最终切图高度比2px高出8px，累计多出来的这160px毫无意义得降低了App性能，终端用户的体验也会受到连带影响。

而上侧的黑线同理，这里不再赘述。

文本区域的定义

有文本填充的情况下，则需要我们画出右下的两条黑线来限制文本的区域。

当没有黑线时，文本就会不受限制得撑满整个背景图。

而当我们只画出右侧的黑线时，就定义了文本的高度区域。

我们再加上右侧黑线，去限制下文本的宽度区域，一个像模像样的气泡就出来啦～

怎么画点九图

点九图的切图有工具（draw9patch）和手动两种方法，这里我结合实际案例仅讲解手动的方法，也建议小伙伴们可以自己亲手去试一下，知其然知其所以然嘛～

Sale Assistant是我目前负责的一个线上产品，android端中筛选界面的tag同样是随字段长度进行拉伸的需求，因此我们先拿它来开刀～(为了让大家能看清，我加深了tag颜色)

1. 首先，我们将其中一个tag切出透明png，并用PS打开（尺寸根据前端的要求来，这里只演示xxhdpi）；

2. 新建参考线定义可拉伸区域的可删除部分。这里我需要将可拉伸区域缩减到2px，因此在每个圆角两边只预留一个像素；


3. 使用选框工具（M）选中刚刚定义的可删除的可拉伸区域，删掉它！


4. 将这四块部分（4个圆角和压缩后的可拉伸区域）拼合在一起，并用裁剪工具（C）裁剪画布，为黑线预留2px；

5. 用1px粗的铅笔工具（B）在可拉伸区域旁边画2px长度的线段即可～（必须是#000000的纯黑不透明线段）

6. 切图保存准备交付，命名后缀必须是.9.png哦。就此搞定，是不是很简单？

总结

最后来波小总结～

1.点九图是android端独有的切图格式；、

2.我们需要以1px的纯黑线段来定义图片的可拉伸区域和文本区域；

3.为了帮助前端小哥降低图片的占用内存，我们要尽可能得压缩可拉伸区域的尺寸；

4.最后的切图命名后缀必须是.9.png。




本文原创，未经作者允许不可转载！
更多内容，欢迎关注作者微信公众号：转行人的设计笔记！