很多朋友说看了网上很多关于点九的文章，越看越糊涂，所以今天文章来啦！
先来看看大纲：
- 什么是点九图
- 点九图的作用是什么
- 点九图的原理
- 总结
一. 什么是点九图
点九图其实就是安卓系统中特有的一种图片格式，为了让大家更好的记住，我们只要知道，后缀名是「.9.png」的图片，就是点九图。
二. 点九图的作用是什么
每个事物都有其存在的价值，所以先弄清楚点九图能为我们解决什么问题，这样后面理解起来就会容易很多。
其实点九图的用处就是帮助我们拉伸切图的，比如这个切图：
uisdc-9png-20171206-1.jpg
如果它需要纵向拉伸，直接拉会变成下面这个样子：
uisdc-9png-20171206-2.jpg
而用了点九图就可以让切图局部拉伸，而不是整体拉伸，这样就可以把容易变形的地方保护起来：
uisdc-9png-20171206-3.jpg
是不是拉伸的很完美！有黑线不用怕，那只是告诉安卓系统：嘿，大兄弟，这是张点九图，特殊对待一下！
三. 点九图的原理
点九图最大的原则就是四个边必须各有一条纯黑的线（或一像素的点），如下图：
uisdc-9png-20171206-4.jpg
如果四条线少任何一条，或者线不是纯黑的（#000000），安卓系统就不认你！
其中这四条线，左上两条线掌管可拉伸区域，右下两条线掌管内容显示区：
uisdc-9png-20171206-5.jpg
先说左上两条线，因为两条线原理是一样的，所以我们单独拿左边这条线来举例吧，当我们没有左边那条黑线时，纵向拉伸是这样的：
uisdc-9png-20171206-6.jpg
圆角是不是变形了，如果左边加一条黑线，就相当于把原来的图形分为三个部分：
uisdc-9png-20171206-7.jpg
当再次纵向拉伸的时候，只有标记了黑线的部分可以被拉伸，而上下两部分是完好无损的，想象一下，无论你拉伸到多高，是不是都不会变形了：
uisdc-9png-20171206-8.jpg
当然，你左边画一个点也可以起到相同的效果：
uisdc-9png-20171206-9.jpg
左边这条线是控制纵向拉伸的，所以上面那条黑线就是控制横向拉伸的，原理是一样的！
接下来我们来说右下两条线，是控制内容区域的，单独拿右边那条线来举例，如果没有右边那条黑线，在这个切图上输入内容，比如文字，是没有限制的，内容会撑满整个背景图：
uisdc-9png-20171206-10.jpg
当有了右边那条黑线后，切图相当于在纵向上又被分开了：
uisdc-9png-20171206-11.jpg
而这次是右边有黑线哦，别忘了右边的黑线是控制显示区域的，所以只有带黑线的部分才可以显示内容。
uisdc-9png-20171206-12.jpg
当然，文字不会这样被切断一半显示的，这里只是方便大家观看哪里可以显示内容！
同样的原理，当我下面也画一条线后，横向上也是只有带黑线的部分可以显示内容（红线是辅助示意的哈）：
uisdc-9png-20171206-13.jpg
这就是点九的基本原理了！
四. 总结
最后总结几个要点：
- 点九切图四周必须要有四条一像素纯黑的线或点。
- 左上两条线控制拉伸区，右下两条线控制内容区。
- 输出的图片后缀必须是「.9.png」。
好了，今天就讲这些了，我猜你应该大概明白了，如果没明白，再看一遍吧。
网友评论