【UI】关于点9切图

点9即 .9 ，是Andriod平台的应用软件开发里的一种特殊的图片形式，可自适应调节图片大小，常用于对话框背景图片中，背景随着聊天对话文字的多少进行横向，纵向，横纵向拉伸。文件扩展名为：.9.png，是一种特殊的文件格式。在UI切图过程中，UI设计师往往需要切.9.png格式的图片给开发人员，下面具体介绍如何制作点9切图。

相当于把一张png图分成了9个部分（九宫格），分别为4个角，4条边，以及一个中间区域。具体如下图：上方2区域表示横向拉伸的区域，左边4区域表示纵向拉伸的区域，下方8区域表示横向显示内容的区域，右方区域6表示纵向显示内容的区域。区域1，3，7,9代表不被拉伸的区域。

制作点9切图的方法有很多种，在这里具体介绍两个工具。一个是手机软件NinePng九图神器，另一个则是电脑软件draw9patch。个人觉得NinePng使用起来更加方便，具体使用方法将以一个例子进行说明。如下......

以聊天背景为例，如下图

作为聊天背景图，要保证四个圆角及右边三角形不变。横向拉伸时，保证四个圆角不变即可，所以只需标注圆角以外的区域。纵向拉伸时，要保证三角区域及圆角不变，所以需要在除三角区域及圆角区域以外进行标注。内容显示区域，横向显示需具体标注效果如上图；具体效果见下图

以上......

---