菜心设计铺
每人每天仅限5票，快给你心仪的作品鼓励的一票。
投票
0.0°
两年前我写了一篇关于点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
全部评论：39条
更多作品
发表评论