Android中中.9.png图片的使用及制作图片的使用及制作
主要介绍了Android中.9.png图片的使用及制作的相关资料,感兴趣的小伙伴们可以参考一下
我们有一个TextView,其里面的内容是可以通过代码动态改变的,我们想用一张图片作为TextView的背景,实现类似于手机QQ对话中的气泡文
本效果。
TextView定义如下:
<TextView android:text="@string/hello_world"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:background="@drawable/original" />
背景图片如下所示:
最终TextView的效果如下所示:
上图中的虚线是TextView的外轮廓,我们把TextView的宽度和高度都定义为wrap_content,并且将gravity设置为center,但是还是没有实现我们
理想的状态。TextView中的文本相对于整个图片居中了,但是我们想要的效果是文本在绿色的矩形区域内居中。
上图中的文本较短,展现出的问题还不是很明显。当我们将TextView中的文本设置为具有一定长度的时候,问题更加突出,如下所示:
上面这张图片暴露出两个问题:
我们原始的图片是自上而下绿色逐渐变淡,并且右侧和下侧有阴影。当背景图被拉伸为上图大小的时候,图片失真严重:消息框的四个角模糊不
清;阴影被模糊放大,比较难看;绿色不清晰,渐变效果也基本看不出来。
文字已经超出了图片的消息框范围,杂乱无章。
出现上述问题的原因是,整个背景图被完全拉伸了,而且拉伸后的图片的宽高比例与原始图片的宽高比例不同。如果只对原始图片矩形消息框中
的区域进行拉伸,那么就可以解决上述问题。
为了解决上述问题,我们可以使用Android中的.9.png格式图片,即Nine-patch。
下面对.9.png格式图片进行一下说明:
首先,.9.png格式的图片本身就是.png格式图片,不过该图片以.9作为文件名的后缀。我们可以将一个.png图片转换成.9.png图片,.9.png图片比
正常的.png图片在图片最外围的四边多了1px边框,我们可以在这最外层的1px边框上定义图片的可拉伸区域以及图片的内容区域。
我们对原始的背景图进行编辑,可以得到如下的文件名为message.9.png的图片:
当我们用该处理过的.9.png图片作为TextView的背景时,效果如下所示: