android nine-patch

NinePatch

NinePatch的关键在于理解什么是stretchable area，什么是drawable area。

关于 Nine-patch，文档中是这么讲的：

NinePatchDrawable是一个可拉伸的位图，将它作为View的背景时Android会自动调整其大小以适应View的内容。例如，Android标准Button的背景就是NinePatch–button必须被拉伸以适应不同长度的字符串。NinePatch是标准的PNG图片，特别之处在于它包含一个1像素宽的边框。必须以 .9.png 命名 NinePatch图片，跟其他图片资源一样，NinePatch图片也保存在项目的 res/drawable/ 目录下。

NinePatch的边框用于定义图片的可位伸区域和静态区域。通过在上边框和左边框上绘制一个或多个1像素宽的线条来表示可拉伸区域(边框上其他的像素点应当是白色或完全透明的)。可以有多个拉伸区域：它们的相对大小是一样的，所以最大的区域仍然保持最大。

通过在右边框和下边框绘制类似的线条，还可以定义在NinePatch上定义一个可选的绘制区域(drawable section)。实际上这两条线可认为是 padding lines。如果View将NinePatch作为它的背景并在View中指定文字，则NinePatch会拉伸保证文字正好在这两条线指定的区域。如果没有这两条线，Android会使用左边和上面的的线来定义drawable section。

以下例子很好地说明了stretchable area和drawable area

NinePatch通过左边和上面的线定义stretchable area，通过右边和下面的线定义drawable area。上图中，灰色的虚线表示会重复的部分以拉伸图片。下图中，粉红色的矩形表示View的Content区域。如果实际内容超出Content区域范围，NinePatch会继续拉伸直到合适为止。

NinePatch绘制工具

作为开发，一般用Android SDK里面提供的Draw 9-patch 工具就足够了。这里讲了[如何使用该工具](android 制作.9.png图片。

示例

Layout布局代码：

    <TextView
        android:id="@+id/status"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world"
        android:background="@drawable/cab_bottom_solid_light_holo" />

    <TextView
        android:layout_below="@id/status"
        android:id="@+id/status2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world"
        android:background="@drawable/ab_bottom_solid_light_holo" />

Layout布局截图：

cab_bottom_solid_light_holo.9.png 和 ab_bottom_solid_light_holo.9.png 在 Draw 9-patch 工具中观察，分别如下图所示：

可见， drawable area 对 padding 的影响还是很明显的。

参考资料

1. android 设计中的.9.png
2. 关于点九
3. 9.png图片的处理
4. android 制作.9.png图片
5. Android Nine-patch（.9.png）小结

第1份参考资料中讲到了一个图片中某些区域本身不能被拉伸的情形，解决方法如下：

关于右边和下边的两条线，第3份参考资料总结得很简要：

我们使用right和bottom边的线来定义内容区域，来达到增大内边距的目的

第5份参考资料对NinePatch的常见问题做了总结。