一文彻底读懂点9图

菜心设计铺

2019-12-04

原创文章

15351

31

170

经验分类:经验/观点/原创文章


两年前我写了一篇关于点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

全部评论:31

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票