官方文档: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条红线分别用来指示透明边界区域的,也就是当使用视觉边界布局的时候,把红色线标记的区域当做透明区域对待。从非红色标记的区域当做视觉边界区域来布局控件。
这样,就能保证 上面的文本边界和下面的按钮背景边界对齐了。 如上图所示。