NinePatch使用教程--创建优美的背景图片

UI设计,2009-10-16 15:38:45

标签: 背景图片
控件Button
NinePatch图片
主题风格
程云峰

在本教程中，将详细介绍OPhone中引入的NinePatch图片格式，以及如何使用NinePatch图片来创建和OPhone系统风格统一的应用程序。在下面的教程中使用OPhone系统中的控件Button来作为演示。

OPhone系统背景图片

首先来看看OPhone系统Button的背景样式。 创建一个示例项目，添加几个Button， layout代码如下：

view plaincopy to clipboardprint?

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/smallButton"
android:text="@string/smalltext"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/mediumButton"
android:text="@string/mediumtext"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/longButton"
android:text="@string/longtext"/>
</LinearLayout>

（为了节约篇幅，下面的布局代码只提供Button代码，其他代码省略。）

程序截图如下:



图一：OPhone系统默认按钮背景，第二个按钮是取得焦点时候的背景
从上图可以看到不管按钮有多长，背景都可以很好的展示。在有些情况下，可能系统提供的背景图片不适合你的应用程序主题，这个时候就要使用自定义背景来实现特殊的主题风格了。

使用颜色做背景
通过指定View中的background 值为颜色值来设置颜色背景，代码如下：

view plaincopy to clipboardprint?

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/smalltext"
android:id="@+id/smallButton"
android:background="@color/red"
android:layout_margin="4px"/>

在Button中指定了背景android:background="@color/red"，red是在colors.xml文件中定义的颜色值，定义方式查看项目代码中的res/values/colors.xml文件。现在程序截图如下：



图二：使用颜色值作为Button背景
由上图可见，使用颜色背景得到的是一个矩形填充的背景，这和系统提供的圆角背景是不一样的。因此要使应用程序和OPhone系统风格统一，不要使用颜色值来做组件的背景。当然，这不是绝对的，如果使用自定义组件可以自己来绘制组件的背景，这个时候就可以自由的来控制背景如何绘制了，关于自定义组件的内容已经超出本教程范围了，这里不做讨论。既然使用颜色值做背景看起来不统一，那么使用自定义的图片又如何呢？

自定义图片背景

使用如下的图片来做Button的背景，layout 代码如下：



图三：自定义背景图片

view plaincopy to clipboardprint?

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/smalltext"
android:id="@+id/smallButton"
android:background="@drawable/btn_bg"
android:layout_margin="4px"/>

程序截图如下：



图四：使用自定义背景图片的Button
由上图可见，在Button长度刚好和组件长度差不多的时候，看起来还不错，随着Button内容的增加，背景图片被拉伸变形。这时可能你会想到，对于不同长度的Button使用不同的背景图片，这样不就没问题咯！是的，这样的可以的，但是如果长度是动态变化的呢？

NinePatch背景图片

现在该看看OPhone是如何实现组件背景的了，在OPhone中Button的默认背景图片为 btn_default_small_normal.9.png 如下图:



图五：OPhone默认Button背景图片

Button取得焦点时候的背景图片如下：



图六：OPhone中Button取得焦点的背景图片
OPhone的系统资源图片可以到如下目录下查看：

<OPhone SDK>\tools\lib\res\default\drawable
由图片名称就可以看出有点与众不同，是以9.png结尾的，这是OPhone系统特定的图片格式，被称为NinePatch图片。NinePatch图片和普通的图片的区别只是比普通图片四周多了一个边框（注意观察上面图片周围的黑线）。
在NinePatch图片中，左边那条黑色线代表图片垂直拉伸的区域，上边的那条黑色线代表水平拉伸区域，右边的黑色线代表内容绘制的垂直区域，下边的黑色线代表内容绘制的水平区域，右边和下边的线是可选的。

NinePatch图片编辑器

在OPhone SDK中也提供了一个编辑NinePatch图片的工具， 在<OPhone SDK>\tools 目录下面执行 draw9patch.bat 就可以打开该工具，下面就使用该工具来编辑自定义的Button背景图片。
启动编辑器，把btn_bg.png图片拖到NinePatch编辑器窗口中(或则通过菜单：File > Open 9-patch...来选择图片)来编辑，在编辑器的左边是编辑区域，右边是预览区域，在预览区域中显示了水平拉伸，垂直拉伸和水平垂直都拉伸情况下的预览图形。

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

 Zoom: 用来缩放左边编辑区域的大小
 Patch scale: 用来缩放右边预览区域的大小
 Show lock: 当鼠标在图片区域的时候显示不可编辑区域
 Show patches: 在编辑区域显示图片拉伸的区域 （使用粉红色来标示）
 Show content: 在预览区域显示图片的内容区域（使用浅紫色来标示）
 Show bad patches: 在拉伸区域周围用红色边框显示可能会对拉伸后的图片产生变形的区域，如果完全消除该内容则图片拉伸后是没有变形的，也就是说，不管如何缩放图片显示都是良好的。 （实际试 发现NinePatch编辑器是根据图片的颜色值来区分是否为bad patch的，一边来说只要色差不是太大不用考虑这个设置。）



图七： NinePatch图片编辑器
然后设置水平和垂直拉伸区域，在需要拉伸的位置绘制像素，如下图（使用鼠标左键点击绘制点，右键删除绘制的点）：



图8：编辑后的自定义图片
可以在右边预览区域看到现在图片拉伸后的效果，同时还可以看到现在的内容区域在没有设置的时候是整个图片（注意：在这里显示的内容区域为整个图片，其实当不设置内容区域的时候，在OPhone中使用的内容区域就是设置的拉伸区域，也就是上图中的粉红色区域，这个在教程后面会有示例说明）。

把这个图片保存为NinePatch图片（btn_bg.9.png），替换前面使用的btn_bg.png图片后，程序截图如下：



图九：使用自定义NinePatch图片的Button
由上图可以看到NinePatch图片在背景图中应用的优势，指定颜色值变化范围比较小的区域为伸缩区域来防止图片伸缩变形。由于没有设置内容区域（NinePatch图片的右边和下边的指示线条），Button在显示的时候默认是使用拉伸区域的，所以这里看不出有什么不妥当的地方，下面来测试的右边和下边指示线的作用。
现在编辑图片如下：



图十：设置了内容区域的NinePatch图片
为了使测试明显，这里使用中间和上部区域作为内容区域，保存该图片为btn_bg.9.png，使用该图片后的程序截图如下：



图十一：使用不恰当设置的内容区域的图片
和前面程序截图对比就可以发现内容区域的作用了。所以现在再看看OPhone的默认背景图片btn_default_small_normal.9.png 就可以发现其中四周线条设置的奥妙了，同样自定义背景设置为下图所示就更为合理了：



图十二：更加合理的NinePatch设置



图十三：使用合理的NinePatch图片的截图
到此，你就应该知道NinePatch图片在OPhone系统中的奥妙了，在系统资源文件目录中(<OPhone SDK>\tools\lib\res\default\drawable)可以发现大量的NinePatch图片，现在你可以使用自定义的NinePatch图片来设置自己的应用程序了。
最后再来验证下前面提到过的OPhone系统使用不设置内容区域NinePatch图片的实际显示情况，这里使用下面的图片作为Button背景图片：



这里设置水平拉伸比较长，垂直拉伸比较靠近上部，程序截图如下：



由上图可见，当不设置内容区域的时候，NinePatch图片使用的就是拉伸区域作为内容区域，而不是NinePatch编辑器中指示的图片全部区域。
总结
要使OPhone应用程序和系统具有统一的主题风格，背景不要使用颜色值而尽量的使用NinePatch图片。
NinePatchTutorial.rar 中包含本教程使用的项目文件和其他自定义NinePatch图片资源。
注：本文中的内容完全适用于Android已经发布的各个版本。
作者简介
程云峰，网名icess，目前就职于杭州恒生电子研发中心，喜欢Java开源技术。

个人网站：http://www.chengyunfeng.com/

转载：http://write.blog.csdn.net/postedit