很多朋友说看了网上很多关于点九的文章，越看越糊涂，之前也有答应大家，科普一下点九图，所以今天文章来啦！
欢迎关注作者的微信公众号：「菜心设计铺」
先来看看大纲：
- 什么是点九图
- 点九图的作用是什么
- 点九图的原理
- 总结
一. 什么是点九图
点九图其实就是安卓系统中特有的一种图片格式，为了让大家更好的记住，我们只要知道，后缀名是「.9.png」的图片，就是点九图。
二. 点九图的作用是什么
每个事物都有其存在的价值，所以先弄清楚点九图能为我们解决什么问题，这样后面理解起来就会容易很多。
其实点九图的用处就是帮助我们拉伸切图的，比如这个切图：
如果它需要纵向拉伸，直接拉会变成下面这个样子：
而用了点九图就可以让切图局部拉伸，而不是整体拉伸，这样就可以把容易变形的地方保护起来：
是不是拉伸的很完美！有黑线不用怕，那只是告诉安卓系统：嘿，大兄弟，这是张点九图，特殊对待一下！
这有能让你快速制作点九图的小教程 → 《你知道Android里的“点九”吗？》。
三. 点九图的原理
点九图最大的原则就是四个边必须各有一条纯黑的线（或一像素的点），如下图：
如果四条线少任何一条，或者线不是纯黑的（#000000），安卓系统就不认你！
其中这四条线，左上两条线掌管可拉伸区域，右下两条线掌管内容显示区：
先说左上两条线，因为两条线原理是一样的，所以我们单独拿左边这条线来举例吧，当我们没有左边那条黑线时，纵向拉伸是这样的：
圆角是不是变形了，如果左边加一条黑线，就相当于把原来的图形分为三个部分：
当再次纵向拉伸的时候，只有标记了黑线的部分可以被拉伸，而上下两部分是完好无损的，想象一下，无论你拉伸到多高，是不是都不会变形了：
当然，你左边画一个点也可以起到相同的效果：
左边这条线是控制纵向拉伸的，所以上面那条黑线就是控制横向拉伸的，原理是一样的！
接下来我们来说右下两条线，是控制内容区域的，单独拿右边那条线来举例，如果没有右边那条黑线，在这个切图上输入内容，比如文字，是没有限制的，内容会撑满整个背景图：
当有了右边那条黑线后，切图相当于在纵向上又被分开了：
而这次是右边有黑线哦，别忘了右边的黑线是控制显示区域的，所以只有带黑线的部分才可以显示内容。
当然，文字不会这样被切断一半显示的，这里只是方便大家观看哪里可以显示内容！
同样的原理，当我下面也画一条线后，横向上也是只有带黑线的部分可以显示内容（红线是辅助示意的哈）：
这就是点九的基本原理了！
四. 总结
最后总结几个要点：
- 点九切图四周必须要有四条一像素纯黑的线或点。
- 左上两条线控制拉伸区，右下两条线控制内容区。
- 输出的图片后缀必须是「.9.png」。
至于用插件还是自己手动切点九图，看自己习惯吧，我一般都是自己画，比较放心一点。
好了，今天就讲这些了，我猜你应该大概明白了，如果没明白，再看一遍吧。
欢迎关注作者的微信公众号：「菜心设计铺」
「还有哪些必读的基础知识」
- 《简单易懂！写给初学者的UI、UX、GUI新手科普指南》
- 《超全面！信息图形设计知识全方位科普》
- 《新手科普文！每个设计师都该懂的参考线完全手册》
================明星栏目推荐================
优优教程网： UiiiUiii.com 是优设旗下优质中文教程网站，分享了大量PS、AE、AI、C4D等中文教程，为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章，按照我们的专栏一步步学习，一定可以迅速上手并制作出酷炫的视觉效果。
设计导航：国内人气最高的设计网址导航，设计师必备：http://hao..com
