在使用qq,微信等聊天工具时,从从前纯文本的显示到现在气泡显示,无疑美观了许多。而在android中,这种特殊的图片类型叫做Nine-Patch图片。你或许之前没有听说过这种类型的图片,其实它是一种被特殊处理过的png图片,它可以指定图片的哪些区域可以被拉伸,哪些区域不可以。
首先我们先创建一个LinearLayout,它的高度是wrap_content,宽度是match_parent,设置它的background为一张普通的气泡图片,结果显示的结果是
由于图片的宽度不能完全填满整个屏幕,整个图片被均匀的拉伸了,这种效果是非常差的。
如果我们想要实现类似于qq气泡的功能,我们可以使用谷歌官方推荐的Nine-Patch图片来制作。
我们可以先来看看这张图片,可以清楚的解释什么事Nine-patch图片
用两条横线,两条竖线把一张图片划分成9个部分,其中第一部分1、3、6、8区域是不会变化的,第二部分2、4、5、7是会拉伸变化的,第三部分9区域是内容显示区域,它的大小是随着第二部分的改变而改变的。
如果你使用的是eclipse,那么可以打开sdk -> tools -> draw9patch.bat,
如果你使用的是Android Studio,那么大可不必使用它。Android Studio集成了Nine-Patch制作的插件,可以直接使用,只要把你drawable目录下需要改成.9格式的图片重命名就行,形如test.9.png。
界面会改变
预览区域的三张图片分别是长度别拉伸,宽度被拉伸,长和宽都被拉伸的预览。如果我们不做任何处理的话,那么预览区域就将显示。
例如之前将宽度设为match_parent时,如果父布局的宽度大于子布局,将会显示第二幅预览图。同理如果高度设为match_parent时,高度不足就会显示第一幅预览图。
那么我们应该如何做使得图片能够变成像qq气泡那样的显示呢?这就要在编辑区域进行修改了。
Nine-patch有两个区域,分别为可拉伸区域和内容区域。
在编辑区域中,Android Studio自动在图片的四周设置了1个像素点的空白像素,这一部分区域是用来编辑的。
我们先试着在左边点一个长度为一个像素的点,预览图变化了------
可以看到图片中,在左边中间的区域点击了一个像素点,右边的预览图就改变了,第一幅和第三幅高度发生延伸。
先取消之前点击的点,然后再在上方点一个长度为一像素的点,预览图再次变化
最主要的变化是预览图二,已经和qq气泡有些相像了。
结合试验1和试验2的两个像素点,预览图再次变化:
其实这也很好理解,我们来尝试一下在右下区域划线(连续像素点),点击编辑窗口下方的Show content单选框,显示的便是区域内容。
如上图显示的,我们确定了右边内容区域和下方内容区域,预览区域会出现紫色的一个区域,这个区域就是显示内容的区域,当使用这个图片的时候,文字就会显示在紫色区域。
还有一个需要注意的地方,右下方的线的长度与位置并不是随意的,它会影响显示文本的效果,它影响的属性是padding属性
对应的分别是paddingTop,paddingBottom,paddingLeft,paddingRight属性。
最终的显示结果如下
End~