还不明白点九图?还没看这篇文章吧!

很多朋友说看了网上很多关于点九的文章,越看越糊涂,之前也有答应大家,科普一下点九图,所以今天文章来啦!

先来看看大纲:

1. 什么是点九图

2.点九图的作用是什么

3.点九图的原理

4.总结

1. 什么是点九图

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

2.点九图的作用是什么

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

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

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

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


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

3.点九图的原理

点九图最大的原则就是四个边必须各有一条纯黑的线(或一像素的点),如下图:


如果四条线少任何一条,或者线不是纯黑的(#000000),安卓系统就不认你!

其中这四条线,左上两条线掌管可拉伸区域,右下两条线掌管内容显示区:


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

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


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


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

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

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


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


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

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

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


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

4.总结

最后总结几个要点:

1.点九切图四周必须要有四条一像素纯黑的线或点

2.左上两条线控制拉伸区,右下两条线控制内容区

3.输出的图片后缀必须是“.9.png"

至于用插件还是自己手动切点九图,看自己习惯吧,我一般都是自己画,比较放心一点。

好了,今天就讲这些了,我猜你应该大概明白了,如果没明白,再看一遍吧。

科科!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 文 | 豆豆来源公众号 | 写给设计 (ruodesign) Hi,亲爱的设计师: 今天,是你2018年上班的第二...
    有福气的DI雪峰阅读 11,902评论 0 2
  • 我们呀,二十出头这个年龄,最美也最尴尬。 二十多岁,意味着满脸的胶原蛋白就算笑的时候没有那两颗虎牙也照...
    心水粉红豹阅读 812评论 0 0
  • 为了戒掉你 我逃避自己 为了戒掉你 与你共同的回忆 不再触碰 为了戒掉你 我不刻意想你 放弃了很多爱好 为了戒掉你...
    雨落竹声阅读 1,683评论 0 0
  • 祝君明日登金榜, 儿时应逐志高昂。 童年勤勉学业忙, 节节高升心飞扬。 快马加鞭当自强, 乐学善思成贤良。 201...
    tulipjia阅读 5,952评论 4 8
  • 尽管对于Android的的MVVM的设计模式并不是理解的很透彻,目前我所理解的就是VM就是绑定有数据的布局,与前些...
    小白猿阅读 747评论 0 0