一文彻底读懂“点九图”

1,004 阅读5分钟

公众号的120篇文章

2019年的第17篇文章

距离2019年小目标20篇还有3篇

两年前我写了一篇关于点9图的原理科普文,后面说写一篇怎么切气泡框的,但一直迟迟没写,恰逢近期收UI中国邀请写一篇关于点9的知识点,所以加点案例,再梳理一遍! 大纲如下: 1.什么是点九图 2.点九图的作用是什么 3.点九图的原理 4.案例1 5.案例2  1.什么是点9图   点九图其实就是安卓系统中特有的一种图片格式,为了让大家更好的记住,我们只要知道,后缀名是“.9.png"的图片,就是点九图。  2.点9图的作用是什么?  每个事物都有其存在的价值,所以先弄清楚点九图能为我们解决什么问题,这样后面理解起来就会容易很多。 其实点九图的用处就是帮助我们拉伸切图的,比如这个切图:

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

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

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

 3.点9图的原理  

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  4.案例1  

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

我们来切上面的进度条:

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

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

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

 5.案例2 

第二个案例就是很久之前答应大家要写的例子了,也是我们平时最常用到点9切图的案例——气泡框。

如下面这个气泡框:

还是先来分析,我们先分析拉伸问题,这个气泡框纵向和横向都需要拉伸,如果直接拉伸,效果如下:

所以我们会发现,气泡框拉伸的时候,不仅要保护圆角,还要保护冒出来的“尖角”,所以在左边和上面画黑线时,一定要把圆角和三角的区域空出来:

这样圆角和小尖角就被保护了。

然后我们来分析内容区域,其实就是绿色为显示区域:

所以把显示区域画上黑线,注意画在下面和右面哦,因为右侧和下侧是掌管显示区域的,最后切图如下:

好了,以上就是目前对于点9的总结啦。

最后友情提醒下,对于新手,分析怎么切点9的时候,一定要把“拉伸”和“显示”两个分开来思考,这样可以保证思路清晰,不容易混乱。

行,2019还有26天,继续加油鸭!

推荐阅读:

进腾讯,我足足面了3年

非科班设计师的我,最怕做造型

扫码关注,给思维加一道菜