关于.9图的那些事

    UI在APP设计切图的时候,总是会遇到开发要求切.9图,可是什么是.9图,.0图用来干什么,什么时候该切.9图以及.9图该怎么切呢?让我们一起来看看吧。

· 什么是.9图?

    .9.PNG是.9图的全称,通常我们亲切的称它为.9图。来看看官方是怎么解释的:

    .9.PNG是安卓开发里面的一种特殊的图片,这种格式的图片通过ADT自带的编辑工具生成,使用九宫格切分的方法,使图片支持在android 环境下的自适应展示。

    这么说大家可能不是很明白,我们来举一些例子了解一下吧。

    在日常看到.9图最频繁使用的应该要算是像这样的聊天气泡了,聊天气泡里可能包含一个字符,或是一句话,一段话,而且根据聊天内容长短宽高不一,像这样的聊天气泡应该怎么切图呢?

    如果我们只是正常的切图,那么来看看会发生什么吧。


    可以看到,如果我们切一张图,图片拉伸以后圆角和小三角都已经变形,这是UI设计师万万不能接受的效果。


    如果可以只拉伸图上橙色区域的话是不是就达到了我们想要的效果呢,所以,就轮到.9图登场了。


· 如何制作.9图?

    之前说到,.9.PNG是使图片支持在android 环境下的自适应展示。既然是在andriod下专属的图片格式,我们的android工程师们当然是有办法制作.9.PNG的了。而UI的萌妹子们要做的,就是输出一张最小边界情况的图给到工程师就好了。

    依然拿刚才的聊天气泡举例。 我们只需要输出一张单字符的聊天气泡给工程师并命名为.9.png就好了,因为聊天最小边界的情况就是发一个字符,比如说单独发出一个:!。

切片:

命名:                                                      chart_bg.9.png

划重点:

1.一张最小边界情况的切片;

2.命名时后缀名改为.9.png。

    虽然andriod开发工程师可以自己制作.9.PNG,但是始终坚持让UI出.9.png作为UI设计师该怎么办呢?别慌,依然有办法的。

    打开刚才的切片,用1px的纯黑色线条在边缘标记出可拉伸区域,并命名为XXX_XXX.9.png,就完成拉。

划重点:

1.线条为1px;

2.手绘的黑线拉伸区必须是#000000,透明度100%,并且图像四边不能出现半透明像素;

3. 存储为web所用格式,选择png-24,储存时手动将后缀名改为.9.png


· 什么情况下使用.9图?

    除了聊天气泡,还有很多情况下都可以使用.9图,大家不要只局限于气泡制作哦,下面给大家一些参考吧。

同一样式 不同大小的按钮背景
同一样式 不同大小的背景框

    类似于上面的这些统一样式,不同大小的图,我们都可以用.9图进行处理。使用了*.9.png图片技术后,我们就不需要每一个尺寸都出一个切片了,只需要采用一套界面切图去适配不同的分辨率,而且大幅减少安装包的大小。而且这样程序不需要专门做处理的就可以实现其拉伸,也减少了代码量和开发工作量。


· 番外篇

Android工程师如何利用png切片制作.9图?

1.将png文件拖入项目的drawable中;

2.在图片上点击右键点击Create 9-patch file…,然后直接点保存,你会看到drwable中多出一个后缀名名为.9.png的图片(当然你可以直接手动修改后缀名再放入drwable中,达到的效果是一样的)。

3.点开创建好的点9图片。然后左键点击,绘制你需要改变的地方,也就是可以拉伸的部分。这时你就会看到黑线和右边拉伸后的效果了。

    由于android工程师在制作.9图的时候可以实时查看图片拉伸后的效果,这样可以达到最佳效果,所以建议UI设计师们直接给切片到工程师,工程师自己动手做一下.9图哦,但是要记得切拉伸前最小尺寸的图。


· 不使用.9图的IOS开发工程师们又是怎么实现适配的呢?

    之前说到.9图是使图片支持在android 环境下的自适应展示,那么IOS怎么办呢?像这样类型的图片我们又该怎么给IOS切片呢?

    其实依然和.9图的原理相似,都是选取某一块区域拉伸。将图片拖入,点击图片,然后点击Start Slicing或者是在右边Slices选取模式,就可以开始调整可拉伸区域了。

    所以IOS的切图也切拉伸前最小尺寸的图就可以了,不需要改后缀名。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • A: 今日在JR交流的时候,感受到某位主管一直在质疑。 M: 如果陷入解答质疑,会失去本次交流的大方向。 B: 1...
    三回头阅读 1,364评论 0 0
  • 大家好,今天是“倚龙的读书俱乐部”关于《心理学百科》第二模块“行为主义”流派解读的第6讲。 今天这一讲,我们要讲的...
    倚龙杂谈阅读 4,350评论 0 0
  • 原本觉得可惜的。竟然有了意外的结果~ 原本认为不可能的。竟然是这样的结果~ 该来的,都要来。躲不掉~ 该走的,留不...
    SummerLee110484阅读 3,034评论 0 0
  • 云兮泥兮阅读 619评论 0 0
  • 爸,童年的记忆里很少有你的身影。你常年在外打工,妈妈照顾不了我们三个,把我放在奶奶家,只有你回来时我才回家,记忆中...
    燊儿阅读 1,436评论 0 1

友情链接更多精彩内容