android控件背景揭密--NinePatch

android中控件都有着漂亮的背景,边缘渐变非常平滑,并且在任何大小情况下表现都很好。
那么android是怎么实现的呢?
其实android使用了一种特殊的png图片,在资源文件中以.9.png结尾的便是这种图片了,大家可以在android-sdk-windows-1.5_r1/platforms/android-1.5/data/res/drawable这个目录下找到很多这种图片,那么它与普通的png图片有什么区别呢?其实很简单,它只是在普通的png图片的外围增加一个像素宽的矩形外框,使用描边的方法画上一些长度不等的黑线。
要注意的是不能使用photoshop来画这个框和黑线,一定要使用android提供的工具draw9patch,运行放在C:/android-sdk-windows-1.5_r1/tools目录下的draw9patch.bat就可以调用起draw9patch。大家在制作.9.png图片时,先使用ps做好普通png图片,然后使用draw9patch打开编辑,然后保存,图片会被自动保存为.9.png后缀的图片。

现在我们来看几个示例。
我们打开android-sdk-windows-1.5_r1/platforms/android-1.5/data/res/drawable目录下,找到btn_default_pressed.9.png这张图,这张图是按钮被按下时候显示的图片--亮黄色图,如下所示:
 
我们使用draw9patch打开这张图,如下所示:
 
在编辑器的左边是编辑区域,右边是预览区域,在预览区域中显示了水平拉伸,垂直拉伸和水平垂直都拉伸情况下的预览图形。

NinePatch编辑器还提供了一些操作选项:

Zoom: 用来缩放左边编辑区域的大小
Patch scale: 用来缩放右边预览区域的大小
Show lock: 当鼠标在图片区域的时候显示不可编辑区域
Show patches: 在编辑区域显示图片拉伸的区域 
Show content: 在预览区域显示图片的内容区域
Show bad patches: 在拉伸区域周围用红色边框显示可能会对拉伸后的图片产生变形的区域,如果完全消除该内容则图片拉伸后是没有变形的,也就是说,不管如何缩放图片显示都是良好的。 

我们可以随意调整黑线的长度与位置,仔细查看预览图的变化。

现在我来解释一下android是如何定义ninePatch图片的。
    首先我们看到图片中间有一个圆角矩形,这个圆角矩形有个黑色的描边,然后黑色描边外围就是透明区域了,在图片最边缘,我们看到了四条边上面都有一根黑线,也有可能是黑点,关键的玄机就在这四条边的黑线上了。
    
    左边和上边的黑线代表着这个图片在大小改变时如何被拉伸。左边的代表横向拉伸,上边的代表纵向拉伸。长度代表着可拉伸的区域,并且可以定义多根黑线,这样就可以定义一个图片不同部位拉伸,这个设计真是非常巧妙。
    右边和下边的黑线代表着这个图片背景包含其他控件时,内部控件能占用的位置,黑线在横向和总线的投影交集便是内部控件可使用的区域,黑线之外是父控件与内部控件的间距,其实相当于定义控件padding的取值。这两条边不定义多根黑线。
    
    以btn_default_pressed.9.png为例,左边和上边都有一个黑点,那么预示着图片在拉伸时只会拉伸黑点在横向和纵向投影的像素,其余的像素不拉伸,所以在按钮无限放大时,边缘依旧很平滑,因为边缘不会被拉伸,拉伸只是横向和纵向中间那个像素。
    button都是要包含文字或者图片的,那么文字和图片的位置就是由右下这两条黑线决定了,可以看到右边是一条较长黑线,并且是上下居中的,那么文字也会上下居中的显示在控件中,下边是一个黑点,那么文字如何放得下呢,不用着急,不要忘了,这个黑点是拉伸的区域,一般说,使用wrap_coutent定义你的控件宽度是,你的文字有多长,这个黑点就会被拉多长,所以也会被恰好的左右居中显示在控件中。
    
    那么边缘的那一片透明区域有什么用,其实还是有用的,它的作用可以当作控件的margin来使用了。
    
可能很多朋友会问,那黑线会不会显示出来呢,这个是不会的,到底android是如何实现ninepatch的,这个我们暂时不需要关心的。

 

 

你可能感兴趣的:(c,android,工具,button,图形,patch)