这周第一次正经的给开发小哥哥切.9图，可能这个小哥哥对.9图也不是很了解，导致刚开始一直报错，在我导师的讲解下我也是半懂状态，自己再私下反复看了讲解，哎妈呀，终于懂了！！！！谢谢安卓开发的小哥哥让我又涨知识了哈哈哈，于是赶紧记录下来，怕我下次又是之前的固定思维哈哈，也想跟大家一起分享.9切图的方法。

什么是.9切图

-

.9是andriod平台里的一种特殊图片格式，文件扩展名为.9.png，点九图片可以将图片横向和纵向同时进行局部拉伸，但依旧保持圆角大小不变、渐变质感和像素大小不失真。开发小哥哥只需要一套.9图就可以去适配安卓不同的分辨率，简直完美～

.9切图原理

-

.9切图就是相当于把一张png图分成了9个部分（这句话不重要）。对于.9切图我们只需要理解四个参数就行：

1.纵向内容显示区域（右）

2.横行内容显示区域（下）

3.纵向拉升区域（左）

4.横向拉升区域（上）

拉升区域为除了固定部分（如圆角）外，可以自由拉升的部分。

内容显示区域也就是信息（如文字）显示的区域。内容显示区域可以包含圆角在内，也可以不包含。

看看下面这张图片就可以很好的理解内容显示区域了，其实可以理解为用来控制内边距的，想成里面的文本距离外面盒子的内边距就行。

△ 对比文本框距离边框的边距

左图纵向与横向内容显示区域包含了圆角范围，右图纵向与横向内容显示区域未包含圆角区域。文本都采用左对齐的方式，我们可以很明显的看到左图抵死了按钮边框，右图距离按钮边框的距离为圆角半径大小。

如何切.9图

-

一、手动切图

1.导入你需要切图的普通png资源至ps中，直接在sketch里做也行。如果在sketch里面我们的图形有投影的话，建议导入ps里切更方便。

需注意的是，为了精简切图资源，我们应该尽量将拉升区域的大小缩小。因为拉升区域的大小无论你设置多大对于开发来说都是没有影响的。一般我们会用正方形的形式，不过你觉得麻烦不想调整你的资源大小都是没关系的，直接用你原有大小都是可以的，只要开发小哥哥能用你的.9图就行。

以我项目中的栗子，我是在sketch里做的设计稿，卡片大小为345＊80px，圆角大小为8px，投影为0（x），2（y），4（模糊参数）。为了精简切图资源，我在做.9图时设置了一个40*40大小的正方形（尺寸设置多大都没关系，只要保证与原图圆角、投影效果一致就行），圆角参与与投影参数保持与原卡片大小一致（圆角8px，投影Y2,模糊4)，然后导出png到ps里，这里导几倍图可以具体的问问你的开发小哥哥，他需要几倍就行，按理导出几倍都无所谓的。

△ 精简切图资源

2.将画布大小上下左右各扩大1像素

上下左右多出1px是为了后面画黑线准备的。上下左右各扩充1px也就是在导出来的图片大小上，长宽各加2即可。

这里一定要注意是否有投影，比如我40*40大小的正方形，圆角8px，投影X0,Y2,模糊4，导出来的图片实际大小是48*48px，那么我在ps里调整画布大小应该为50*50px。

△ 上下左右各加1px

3.用一像素的铅笔工具（颜色选择纯黑色），画出黑线段

需画的黑线段有：纵向内容显示区域、横行内容显示区域、纵向拉升区域、横向拉升区域

根据你想显示的内容区域来确定纵向内容显示区域与横行内容显示区域，拉升区域也就是你排除圆角后剩下的区域，拉升区域至少为1px。所以拉升区域的黑线段你画1px与10px都是一样的。另外需要注意的是如果带有阴影的话，内容显示区域的黑线段注意不要包括阴影区域哦。

比如我想要的内容显示区域是包含圆角在内的，于是.9切图就为下面这样啦。

△ 因为我的卡片有阴影所有黑线段距离图形是有空白像素的

△这两种.9切图方式达到的效果是一样的

需注意的是：

（1）必须绘有拉伸区域的黑线

（2）必须使用1px大小的笔进行绘制。也就是要确保纵向拉升区域黑线与纵向内容显示区域的黑线宽度必须为1px，横向拉升区域与内容显示区域的黑线高度必须为1px

（3）黑线必须是#000000，透明度100%

4.将图命名为xxx.9导出png格式即可

上面一步我们已经绘制好我们的.9图了，现在只需要将图导出来就行。因为是导出.9图，我们的图后缀必须是.9，这样导出来的图才是真正的.9图格式。

比如我命名为bg.9，那么导出png格式，我的切图就是bg.9.png。这样就OK啦～

二、神器在线生成

对于不想导进ps里自己手动切图的伙伴们，也不用担心，我们可以利用这个神器在线生成.9切图。对于常规简单的按钮、加了投影的按钮、卡片等都是可以进行处理的，很方便。

我们只需要将我们的切片资源导出png格式，再导入这个网站，标注出我们想要的内容显示区域，然后下载，下载出来的图会自动给我们画好黑线以及不同的分辨率尺寸。很贴心～

网址链接：

http://romannurik.github.io/AndroidAssetStudio/nine-patches.html#source.type=image&sourceDensity=480&name=

界面设计规范