还不明白点九图？还没看这篇文章吧！

很多朋友说看了网上很多关于点九的文章，越看越糊涂，之前也有答应大家，科普一下点九图，所以今天文章来啦！

先来看看大纲：

1. 什么是点九图

2.点九图的作用是什么

3.点九图的原理

4.总结

1. 什么是点九图

点九图其实就是安卓系统中特有的一种图片格式，为了让大家更好的记住，我们只要知道，后缀名是“.9.png"的图片，就是点九图。

2.点九图的作用是什么

每个事物都有其存在的价值，所以先弄清楚点九图能为我们解决什么问题，这样后面理解起来就会容易很多。

其实点九图的用处就是帮助我们拉伸切图的，比如这个切图：

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

而用了点九图就可以让切图局部拉伸，而不是整体拉伸，这样就可以把容易变形的地方保护起来：

是不是拉伸的很完美！有黑线不用怕，那只是告诉安卓系统：“嘿，大兄弟，这是张点九图，特殊对待一下！”

3.点九图的原理

点九图最大的原则就是四个边必须各有一条纯黑的线（或一像素的点），如下图：

如果四条线少任何一条，或者线不是纯黑的（#000000），安卓系统就不认你！

其中这四条线，左上两条线掌管可拉伸区域，右下两条线掌管内容显示区：

先说左上两条线，因为两条线原理是一样的，所以我们单独拿左边这条线来举例吧，当我们没有左边那条黑线时，纵向拉伸是这样的：

圆角是不是变形了，如果左边加一条黑线，就相当于把原来的图形分为三个部分：

当再次纵向拉伸的时候，只有标记了黑线的部分可以被拉伸，而上下两部分是完好无损的，想象一下，无论你拉伸到多高，是不是都不会变形了：

当然，你左边画一个点也可以起到相同的效果：

左边这条线是控制纵向拉伸的，所以上面那条黑线就是控制横向拉伸的，原理是一样的！

接下来我们来说右下两条线，是控制内容区域的，单独拿右边那条线来举例，如果没有右边那条黑线，在这个切图上输入内容，比如文字，是没有限制的，内容会撑满整个背景图：

当有了右边那条黑线后，切图相当于在纵向上又被分开：

而这次是右边有黑线哦，别忘了右边的黑线是控制显示区域的，所以只有带黑线的部分才可以显示内容

当然，文字不会这样被切断一半显示的，这里只是方便大家观看哪里可以显示内容！

同样的原理，当我下面也画一条线后，横向上也是只有带黑线的部分可以显示内容（红线是辅助示意的哈）：

这就是点九的基本原理了！

4.总结

最后总结几个要点：

1.点九切图四周必须要有四条一像素纯黑的线或点

2.左上两条线控制拉伸区，右下两条线控制内容区

3.输出的图片后缀必须是“.9.png"

至于用插件还是自己手动切点九图，看自己习惯吧，我一般都是自己画，比较放心一点。

好了，今天就讲这些了，我猜你应该大概明白了，如果没明白，再看一遍吧。

科科！