Android 切.9图

官方文档：http://developer.android.com/tools/help/draw9patch.html

Online的.9图制作：http://draw9patch.com/

.9图把图片分成了9个部分，分别是4个角、4个边和中间部分，在拉伸过程中，4个角是不做拉伸的，而水平边只做水平拉伸，垂直边只做垂直拉伸，中间区域做水平和垂直拉伸。



程序猿可以自己做.9的图片，打开SDK/tools目录下draw9patch.bat，出现载入窗口：



将图片拖入窗口就可以切图了



上方的黑线标明了水平可拉伸区域，左侧标明垂直可拉伸区域，右侧是垂直显示内容区域，下侧是水平显示内容区域。

如果点错了，按住shift键同时鼠标左键可以擦除。

点击file->save就可以保存.9图片了。

draw9patch.bat其他功能说明

1）Show lock：显示不可绘区域

2）Show patches：预览这个绘图区中的可延伸宫格，粉红色代表一个可延伸宫格

3）Show patches：预览视图中的高亮部分，紫色区域

4）Show bad patches：在宫格区域四周增加一个红色边界，是坏的宫格，这可能会在图像被延伸时产生人工痕迹，如果消除这些标红的宫格，延伸视图的视觉一致性得到维护。

进阶版

在使用draw9patch时，发现上面有一句话：Press Shift to erase pixels, Press Control to draw layout bounds.

前一句很好理解，后一句查了一下，找到其官方文档是：http://developer.android.com/about/versions/android-4.3.html 在Optical bounds layout中进行讲解了。

翻译较好的中文文档是：http://www.tuicool.com/articles/YRRRnq

文章摘录在下面：

Optical bounds layout(视觉/光学边界布局)是在4.3（Api level 18）中引入的一种新的布局对齐方式。之前是使用控件边界来布局的。可以在“设置” 中的 “开发者选项” 中的 “显示布局边界” 功能来查看界面的每个空间的编辑。

下面两个图是使用控件边界布局和视觉编辑布局的对比：



使用控件编辑布局（默认）



使用视觉边界布局

下面两个图是显示了每个控件边界的图（ 蓝色 为控件的边界； 粉红色 为视觉边界）：



控件的边界

注意：该图上面的粉红色外框，是由于使用了带有阴影的.9图导致的。



视觉编辑布局示意图

可以看到，对于那些有透明空白边的控件来说，使用视觉边界布局在显示效果上更加整齐。 不然的话，要保证每个控件的空白透明边都是一样的才能保证内容对齐。
由于引入了视觉边界布局，所以为了消除半透明阴影对布局的影响，特别是常用作背景图的.9图片。 下面是一个引入了视觉边界区域的.9图：



带有视觉边界标示的.9图

注意上图和普通的.9图多了 4条红线。右边上下两条；下面左右两条。
这4条红线分别用来指示透明边界区域的，也就是当使用视觉边界布局的时候，把红色线标记的区域当做透明区域对待。从非红色标记的区域当做视觉边界区域来布局控件。
这样，就能保证 上面的文本边界和下面的按钮背景边界对齐了。 如上图所示。