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 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 的影响还是很明显的。
参考资料
- android 设计中的.9.png
- 关于点九
- 9.png图片的处理
- android 制作.9.png图片
- Android Nine-patch(.9.png)小结
第1份参考资料中讲到了一个图片中某些区域本身不能被拉伸的情形,解决方法如下:
关于右边和下边的两条线,第3份参考资料总结得很简要:
我们使用right和bottom边的线来定义内容区域,来达到增大内边距的目的
第5份参考资料对NinePatch的常见问题做了总结。
更多相关文章
- Android 控件背景图片和imagebutton的使用(selector)
- Android获取图片资源的4种方式
- android:scaleType 设置图片显示
- Android 圆角外边框
- 【Android】 _UI设计_图片滑动样式
- android --启动画面制做 png图片-->initlogo.rle
- android图片格式