android系统GUI设计师必会资源图制作工具
android系统GUI设计师必会资源图制作工具draw9pacth完全教程，仅供初学者参考。
2011-11-26 23:15:20.0 发表 / 您是第 2214 位浏览者 / 有 29 条回复
近期一些刚做android的朋友问我，.9.png到底是什么格式？到底是干什么用的？到底是怎么做出来的。现在用白话做个简单的小教程，分享给初学的朋友，不见得很全，希望能给初学的朋友做个借鉴......
首先，解释一下上面提到的几个问题。
1、制作能够自适应背景的图片是手机和pad的UI开发的一个广泛问题。比如,列表的宽度一定，但是列表的高度随着列表数据项的增加会发生变化；再比如标题栏的背景，无论横屏还是竖屏，高分辨率还是低分辨率，都能自动填充满，而且不失真，等等类似的背景问题。
Android针对这种情况，专门制作了一种.9.PNG格式来解决这个问题。
实际上.9.png就是在原png图片（包含alpha通道的透明区域）外侧做过1px黑点（线）标记的png，但是在做过标记后适合android系统使用。
2、.9.png在android系统中可进行水平或者垂直方向的无损准确拉伸，并可在代码中设定拉伸的高度或宽度。比如android手机顶部的状态栏（放置很多小icon的地方），在系统里面叫statusbar,这个栏就是典型的.9.png水平满屏拉伸。
3、.9.png可在GUI制图阶段就设定出padding的宽度或高度，方便软件开发工程师进行自适应布局。
4、制作.9.png要用到draw9patch.bat这个工具，这个工具在各版本的android SDK开发包中都有，具体怎么安装上网找找，不在这说了。如果熟练后，可以直接用PS制作.9.png，只需要重命名就可以了。初学者尽量不要这么做，把握不好标记的尺度。
下面讲一下draw9patch.bat的操作界面。请看draw9patch操作界面图，整体窗口分为左右2部分。左边是资源图预览窗口，右边是拉伸效果预览窗口。请看下面.9.png资源图的效果图。
左边窗口中的资源图就android系统常用的.9.png图，上下左右都有1px的黑色标记线。
1、左边的黑线代表对黑线以内的图片范围进行垂直拉伸。（如果是渐变色要注意拉伸范围）
2、顶部的黑线代表对黑线以内的图片范围进行水平拉伸。（如果是渐变色要注意拉伸范围）
注：拉伸标记黑点（线）可以设置多个，拉伸原理相同。
3、底部的黑色标记线代表资源图上显示内容（文字或者图片）的水平范围。
4、右边的黑色标记线代表资源图上显示内容（文字或者图片）的垂直范围。
注：这两条黑线相交的区域就是内容的显示区域。
下面和初学的朋友们讲下在编辑过程中，各种颜色和选项代表什么意思。请看第三张图。
1、Show lock
勾选后在点击左边资源图进行标记时，只要鼠标在图的上方，图片上回自动出现“不可进行编辑”
的区域，说白了就是一个编辑禁区（黑红相间），在禁区外的1px的地方才可进行标记。
2、Show Content
勾选后在右边的预览区域中，以紫色表示当前的图片的内容显示区域。也就是说，当把这张图片作为背景的时候，背景上所有的文字或图片会被放置在这个紫色的区域内。
3、Show Patches
勾选后在左边资源图上会出现浅绿色：表示 x方向拉伸，或者y方向拉伸的区域
紫色：表示 xy 方向同时拉伸的区域。
draw9patch是官方提供的.9.png制作工具，操作起来不难。对于初学的朋友来说，真正难的是黑色标记线的设定，用点还是用线需要丰富的经验。在很多情况下可能需要很多标记点，这个更需要有一定的经验再能保证资源图的准确。
如果你提供的资源图能够很好的设定各种范围和属性，那么对工程师来说是一种福音。
如果你设定的不好，那么对工程师来说将是痛苦的工作，他会不停刷新模拟器来观察应用的显示效果是否符合spec中描述的样子，并且会频繁的设定DP值，导致工作效率降低。
小经验：
1、在制作.9.png图片时，内容显示区域之外到图片边缘的距离最好是3的倍数，比如6px、9px、12px等等，这样才能够换算成整数DIP值，才方便工程师使用。
2、两个控件之间的距离（像素值）尽量是3的倍数。
3、某个控件到屏幕显示边界的距离（像素值）尽量是3的倍数。
4、一般情况下，控件的高度不管有没有透明区，尽量做成偶数（像素值）且可以整除3，例如24px,48px，54px,60px.........
这个就是.9.png的预览图（真图不含绿色背景），用在widget searchbox中。
android SDK自带.9.png制作工具draw9patch.bat操作界面，系统需安装JAVA。
编辑.9.png图片时各区域颜色的作用
