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

　　欢迎关注作者的微信公众号：「菜心设计铺」

　　先来看看大纲：

　　什么是点九图

　　点九图的作用是什么

　　点九图的原理

　　总结

　　一. 什么是点九图

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

　　二. 点九图的作用是什么

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

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

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

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

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

　　这有能让你快速制作点九图的小教程 → 《你知道Android里的“点九”吗?》。

　　三. 点九图的原理

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　四. 总结

　　最后总结几个要点：

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

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

　　输出的图片后缀必须是「.9.png」。

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

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