提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
两年前我写了一篇关于点9图的原理科普文,近期收UI中国邀请,加点案例,再梳理一遍!
大纲如下:
1.什么是点九图
2.点九图的作用是什么
3.点九图的原理
4.案例1
5.案例2
点九图其实就是安卓系统中特有的一种图片格式,为了让大家更好的记住,我们只要知道,后缀名是“.9.png"的图片,就是点九图。
每个事物都有其存在的价值,所以先弄清楚点九图能为我们解决什么问题,这样后面理解起来就会容易很多。
其实点九图的用处就是帮助我们拉伸切图的,比如这个切图:
如果它需要纵向拉伸,直接拉会变成下面这个样子:
而用了点九图就可以让切图局部拉伸,而不是整体拉伸,这样就可以把容易变形的地方保护起来:
是不是拉伸的很完美!有黑线不用怕,那只是告诉安卓系统:“嘿,大兄弟,这是张点九图,特殊对待一下!”
点九图最大的原则就是系统只认#000000的纯黑线或者点,还有就是四个边的四条线,左上两条线掌管可拉伸区域,右下两条线掌管内容显示区:
先说左上两条线,因为两条线原理是一样的,所以我们单独拿左边这条线来举例吧,当我们没有左边那条黑线时,纵向拉伸是这样的:
圆角是不是变形了,如果左边加一条黑线,就相当于把原来的图形分为三个部分:
当再次纵向拉伸的时候,只有标记了黑线的部分可以被拉伸,而上下两部分是完好无损的,想象一下,无论你拉伸到多高,是不是都不会变形了:
当然,你左边画一个点也可以起到相同的效果:
左边这条线是控制纵向拉伸的,所以上面那条黑线就是控制横向拉伸的,原理是一样的!
接下来我们来说右下两条线,是控制内容区域的,单独拿右边那条线来举例,如果没有右边那条黑线,在这个切图上输入内容,比如文字,是没有限制的,内容会撑满整个背景图:
当有了右边那条黑线后,切图相当于在纵向上又被分开了:
而这次是右边有黑线哦,别忘了右边的黑线是控制显示区域的,所以只有带黑线的部分才可以显示内容
当然,文字不会这样被切断一半显示的,这里只是方便大家观看哪里可以显示内容!
同样的原理,当我下面也画一条线后,横向上也是只有带黑线的部分可以显示内容(红线是辅助示意的哈):
这就是点九的基本原理了!
然后有几点需要强调一下:
·每条边画满黑线=没画黑线,就相当于没有起到保护作用。
·黑线或黑点一定是纯黑#000000
·左上两条线控制拉伸区,右下两条线控制内容区。
·输出的图片后缀必须是「.9.png」。
拿最近的一汽比赛为例,找到其中一个界面:
我们来切上面的进度条:
先来分析一下, 首先这个进度条内不会放置文字,所以对于右测和下方就不用管了(因为他们是控制显示内容的),其次这个进度条会发生的情况就是横向拉伸,但是如果我们不用点9,直接横向拉伸,就会导致结果如下:
圆角变形,没有被保护好,所以现在我们就需要利用点9来保护横向拉伸时的圆角,也就是在非圆角处画黑线,所以这个切图样式如下:
这样就可以保证横向拉伸不变形了。
还是一汽比赛的例子,界面如下:
我们要的切图是文字下面的光晕:
还是先来分析一下,首先这个切图不会被横向或者纵向单独拉伸,所以在拉伸上不用管,画整条黑线或者直接不画黑线都OK。
其次我们要管的就是内容显示区域,我们需要文字始终在光线的上面,也就是文字一定是在绿色区域上面(红色是整个切图的大小):
所以我们就可以在右侧画线的时候,把绿色这一块空出来,如下图:
这样就可以保证文字始终在光线的上面了。
好了,以上就是关于点9图的理解和总结,欢迎交流。
Powered by Froala Editor
微信公众号:菜心设计铺
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册