两年前我写了一篇关于点9图的原理科普文，近期收UI中国邀请，加点案例，再梳理一遍！

大纲如下：

1.什么是点九图

2.点九图的作用是什么

3.点九图的原理

4.案例1

5.案例2

1. 什么是点九图

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

2.点九图的作用是什么

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

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

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

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

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

3.点九图的原理

点九图最大的原则就是系统只认#000000的纯黑线或者点，还有就是四个边的四条线，左上两条线掌管可拉伸区域，右下两条线掌管内容显示区：

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

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

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

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

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

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

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

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

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

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

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

然后有几点需要强调一下：

·每条边画满黑线=没画黑线，就相当于没有起到保护作用。

·黑线或黑点一定是纯黑#000000

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

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

4.案例1

拿最近的一汽比赛为例，找到其中一个界面：

我们来切上面的进度条：

先来分析一下， 首先这个进度条内不会放置文字，所以对于右测和下方就不用管了（因为他们是控制显示内容的），其次这个进度条会发生的情况就是横向拉伸，但是如果我们不用点9，直接横向拉伸，就会导致结果如下：

圆角变形，没有被保护好，所以现在我们就需要利用点9来保护横向拉伸时的圆角，也就是在非圆角处画黑线，所以这个切图样式如下：

这样就可以保证横向拉伸不变形了。

5.案例2

还是一汽比赛的例子，界面如下：

我们要的切图是文字下面的光晕：

还是先来分析一下，首先这个切图不会被横向或者纵向单独拉伸，所以在拉伸上不用管，画整条黑线或者直接不画黑线都OK。

其次我们要管的就是内容显示区域，我们需要文字始终在光线的上面，也就是文字一定是在绿色区域上面（红色是整个切图的大小）：

所以我们就可以在右侧画线的时候，把绿色这一块空出来，如下图：

这样就可以保证文字始终在光线的上面了。

好了，以上就是关于点9图的理解和总结，欢迎交流。

Powered by Froala Editor