Android中Nine-Patch(.9)图片介绍与制作

为什么要使用Nine-patch图片

在使用qq,微信等聊天工具时,从从前纯文本的显示到现在气泡显示,无疑美观了许多。而在android中,这种特殊的图片类型叫做Nine-Patch图片。你或许之前没有听说过这种类型的图片,其实它是一种被特殊处理过的png图片,它可以指定图片的哪些区域可以被拉伸,哪些区域不可以。

首先我们先创建一个LinearLayout,它的高度是wrap_content,宽度是match_parent,设置它的background为一张普通的气泡图片,结果显示的结果是

Android中Nine-Patch(.9)图片介绍与制作_第1张图片

 

由于图片的宽度不能完全填满整个屏幕,整个图片被均匀的拉伸了,这种效果是非常差的。

如果我们想要实现类似于qq气泡的功能,我们可以使用谷歌官方推荐的Nine-Patch图片来制作。

什么是Nine-patch图片

我们可以先来看看这张图片,可以清楚的解释什么事Nine-patch图片

 


  Android中Nine-Patch(.9)图片介绍与制作_第2张图片

用两条横线,两条竖线把一张图片划分成9个部分,其中第一部分1368区域是不会变化的,第二部分2457是会拉伸变化的,第三部分9区域是内容显示区域,它的大小是随着第二部分的改变而改变的。

制作Nine-patch图片工具

如果你使用的是eclipse,那么可以打开sdk -> tools -> draw9patch.bat



Android中Nine-Patch(.9)图片介绍与制作_第3张图片

如果你使用的是Android Studio,那么大可不必使用它。Android Studio集成了Nine-Patch制作的插件,可以直接使用,只要把你drawable目录下需要改成.9格式的图片重命名就行,形如test.9.png

界面会改变

 

Android中Nine-Patch(.9)图片介绍与制作_第4张图片

预览区域的三张图片分别是长度别拉伸,宽度被拉伸,长和宽都被拉伸的预览。如果我们不做任何处理的话,那么预览区域就将显示。

例如之前将宽度设为match_parent时,如果父布局的宽度大于子布局,将会显示第二幅预览图。同理如果高度设为match_parent时,高度不足就会显示第一幅预览图。

那么我们应该如何做使得图片能够变成像qq气泡那样的显示呢?这就要在编辑区域进行修改了。

使用工具修改Nine-patch图片

  Android中Nine-Patch(.9)图片介绍与制作_第5张图片

Nine-patch有两个区域,分别为可拉伸区域和内容区域。

左上边拉伸区域(变化区域)

在编辑区域中,Android Studio自动在图片的四周设置了1个像素点的空白像素,这一部分区域是用来编辑的。

试验1

我们先试着在左边点一个长度为一个像素的点,预览图变化了------

  

 

可以看到图片中,在左边中间的区域点击了一个像素点,右边的预览图就改变了,第一幅和第三幅高度发生延伸。

试验2

先取消之前点击的点,然后再在上方点一个长度为一像素的点,预览图再次变化

Android中Nine-Patch(.9)图片介绍与制作_第6张图片

     最主要的变化是预览图二,已经和qq气泡有些相像了。

 

 

试验3

结合试验1和试验2的两个像素点,预览图再次变化:

 

 

右下间隔区域(内容区域)

其实这也很好理解,我们来尝试一下在右下区域划线(连续像素点),点击编辑窗口下方的Show content单选框,显示的便是区域内容。

Android中Nine-Patch(.9)图片介绍与制作_第7张图片

 

如上图显示的,我们确定了右边内容区域和下方内容区域,预览区域会出现紫色的一个区域,这个区域就是显示内容的区域,当使用这个图片的时候,文字就会显示在紫色区域。

还有一个需要注意的地方,右下方的线的长度与位置并不是随意的,它会影响显示文本的效果,它影响的属性是padding属性

 

对应的分别是paddingToppaddingBottompaddingLeftpaddingRight属性。

 

最终的显示结果如下

Android中Nine-Patch(.9)图片介绍与制作_第8张图片

 

End~

你可能感兴趣的:(android,android,屏幕适配,Studio,.9图片,Nine-Patch)