开发的过程中,会遇到一些给按钮设置一个图片作为背景,因为按钮的文字是不固定的,因此需要这个时候普通的图片就不能很好支持这种场景的需求了,在比较多文字的时候,可能会存在拉伸的情况。这个时候就可以用到点九图来实现我们想要的效果,同时,如果想要做一个有阴影的背景图,使用点九图片也是一种选择方案。
一、点九图的制作
点九图的制作工具可以使用sdk自带的draw9patch.bat工具,这个工具位于sdk/tools下面,主要的操作步骤如下:
1、进入到sdk/tools目录下,执行draw9patch.bat,会出现如下对话框:
image.png
2、将你的图片拖动到该窗口执行编辑操作
image.png
1号黑色条位置向下覆盖的区域表示图片横向拉伸时,只拉伸该区域
2号黑色条位置向右覆盖的区域表示图片纵向拉伸时,只拉伸该区域
3号黑色条位置向左覆盖的区域表示图片纵向显示内容的区域
4号黑色条位置向上覆盖的区域表示图片横向显示内容的区域
没有黑色条的位置覆盖的区域是图片拉伸时保持不变(比如,如果图片的四角为弧形的时候,当图片被任意拉伸时,四角的弧形都不会发生改变)
3、编辑完成之后,点击右上角的File,执行save操作即可
4、拷贝存储的图片放在你的工程中使用即可,不需执行其他的操作。
可能遇到的坑
拉伸的高度不对
有时候设计师给你的图可能是四周留有边距的,并且上下的边距可能不一致,这个时候你就要注意2区域的拉伸情况了。虽然要拉伸的区域可以是除了圆角其他的区域,但是如果你的位置是放在了中间偏下的区域,如果图片的上下间距不一样的话,可能就会出现上面白色的区域过小,下面白色的区域过大的情况。
View自带padding?
如果给一个view设置了一张点九的图片作为背景图,并且你的实现跟view的padding有关,这个时候可能会遇到一个比较诡异的情况,明明就没有给view设置padding,为啥打印出来的padding并不是0呢?其实只要我们看一下setBackgroundDrawable的源代码,我们就知道,其实在这一步,是会去拿点九图的一些属性,给view设置padding的。并且padding的大小,跟3、4区域的黑色线的大小有关。详细的可参考官方的介绍:http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch
参考链接
1、http://blog.csdn.net/pugongying1988/article/details/6938972
2、http://su1216.iteye.com/blog/1536253
网友评论