点九图学习与制作

项目中一直有使用点九图，但是没咋接触，现在跟着大佬的blog来学习一下点九图的制作。

1. 点九图概述

1.1 点九图是什么？

Android平台里有一种特殊的图片形式，文件扩展名 xxx.9.png，为了方便记忆，所以称其为点九图，英文是 Nine Patch。

1.2 为什么使用点九图

先来看下下面的场景：

1. 当我们需要为一段文字添加图片背景，而我们并不知道这段文字的长度和宽度，该如何解决？
2. 一个图片在不同的分辨率下，边角会失真，如何解决？

比如社交IM中，我们并不知道用户聊天的字数长度，如果我们给其定死一个图片Drawable作为Background，那么在字数超过一定范围后，背景将会失真，视觉体验极差。而如果我们对图片根据实际情况进行拉伸，也会存在很多问题。

而点九图则是为了帮助我们更好的对图片进行拉伸。比如下面这个切图：

如果他需要纵向拉伸，直接拉会变成下面这个样子：

而点九图可以做到局部拉伸，而不是整体拉伸，这样就可以容易把变形的部分保护起来：

所以，从上面的保护和变形就能大致知道，点九图名称的由来，点九图一共分为九个部分：四个角、四条边和中间区域。
其中，4个角是不做拉伸的，而2条水平边和垂直边只做水平和垂直拉伸。所以可以保持圆角一直清晰、四条边不会被拉粗的情况。只有中间用黑线指定的区域做拉伸。结果是图片不会失真、走样。

1.3 点九图的优势

点九图对标的是 .png格式的图片。
一组测试，普通png经过拉伸，会产生明显的变色横纹，而使用 .9.png图片的效果则明显更好：

这是因为Android系统对点九图有专门的优化算法，优化其在多种分辨率下的显示。总的来说下面几个优势：

1. 点九图虽然由程序员自己制作，但是Android提供了专门的工具，所以可以减少开发工作量
2. 点九图具有极高的适配性，只需要一套切图，就可以适配多种分辨率，这样可以大幅减少Apk的大小
3. 经过大量测试表明，使用点九图在多场景的显示效果远远优于png图片

总的来说，在Android端，点九图适用于需要图片拉伸的场景，比如说聊天小气泡、各种Tip气泡等。

2. 使用Android Studio制作点九图

在制作之前，我们需要先搞懂点九图的四条黑边的意义：

1. 顶部黑边：在水平拉伸的时候，保持其他位置不动，只在这个点的区域做无限延伸
2. 左边：在竖直拉伸的时候，保持其他位置不同，只在这个点的区域做无限延伸
3. 底部：在水平拉伸的时候，指定图片里的内容显示区域
4. 右边：在竖直拉伸的时候，指定图片里的内容显示区域

我们来制作一个聊天用的气泡，我们需要一张 png作为原图，这样的话我们就拿Android自带的 ic_lancher.png吧。
我们找到该图片，右键点击 Create 9-Patch file:

选择好路径和名称后，会产生一个点九图：

点击之后，我们就可以对图片进行操作了。

左边的界面是操作界面，右边的是图片拉伸后的预览效果。假如我们的目标是要在下面红框中做文字的展示，那我们需要通过四条黑边画出这个区域来。

滑动的地方在四个边界上，只要按下鼠标左键，就能进行描边，如果想要去掉黑边、恢复操作，则需要按下 Shift，做橡皮檫态。
一顿操作下来，绘制的黑边如下：

可以看到，我们把中下方的区域做为内容显示的区域，那么在内容变长后，会做一个水平、垂直的拉伸，效果如右边图片所示。
一般来说，左边和上边是一点决定了拉伸宽度，而右边和下边决定了位置

接下来我们将该图片应用到TextView中去，如下所示：

3. 参考资料

点九切图你知道怎么切吗？
看完这篇基础科普，别再说你不会用点九图了！
百度百科：点九
Android studio中.9图片的含义及制作教程