什么是点9?
点9即 .9 ,是Andriod平台的应用软件开发里的一种特殊的图片形式,可自适应调节图片大小,常用于对话框背景图片中,背景随着聊天对话文字的多少进行横向,纵向,横纵向拉伸。文件扩展名为:.9.png,是一种特殊的文件格式。在UI切图过程中,UI设计师往往需要切.9.png格式的图片给开发人员,下面具体介绍如何制作点9切图。
为什么叫点9?
相当于把一张png图分成了9个部分(九宫格),分别为4个角,4条边,以及一个中间区域。具体如下图:上方2区域表示横向拉伸的区域,左边4区域表示纵向拉伸的区域,下方8区域表示横向显示内容的区域,右方区域6表示纵向显示内容的区域。区域1,3,7,9代表不被拉伸的区域。
![](https://img.haomeiwen.com/i3166107/89e0cf3c6078aafe.png)
如何制作点9?
制作点9切图的方法有很多种,在这里具体介绍两个工具。一个是手机软件NinePng九图神器,另一个则是电脑软件draw9patch。个人觉得NinePng使用起来更加方便,具体使用方法将以一个例子进行说明。如下......
![](https://img.haomeiwen.com/i3166107/353d421331244bae.png)
![](https://img.haomeiwen.com/i3166107/bcc4ba30361edd24.png)
实例详解
以聊天背景为例,如下图
![](https://img.haomeiwen.com/i3166107/79622805d2a28cd6.png)
作为聊天背景图,要保证四个圆角及右边三角形不变。横向拉伸时,保证四个圆角不变即可,所以只需标注圆角以外的区域。纵向拉伸时,要保证三角区域及圆角不变,所以需要在除三角区域及圆角区域以外进行标注。内容显示区域,横向显示需具体标注效果如上图;具体效果见下图
![](https://img.haomeiwen.com/i3166107/8585576f2346287e.jpeg)
以上......
网友评论