android nine-patch

  • NinePatch
  • NinePatch绘制工具
  • 示例
  • 参考资料

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 areadrawable 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份参考资料中讲到了一个图片中某些区域本身不能被拉伸的情形,解决方法如下:

android nine-patch_第1张图片

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

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

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

你可能感兴趣的:(android开发)