Android中Nine-Patch（.9）图片介绍与制作

为什么要使用Nine-patch图片

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

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

 

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

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

什么是Nine-patch图片

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

 

  

用两条横线，两条竖线把一张图片划分成9个部分，其中第一部分1、3、6、8区域是不会变化的，第二部分2、4、5、7是会拉伸变化的，第三部分9区域是内容显示区域，它的大小是随着第二部分的改变而改变的。

制作Nine-patch图片工具

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

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

界面会改变

 

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

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

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

使用工具修改Nine-patch图片

 

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

左上边拉伸区域（变化区域）

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

试验1：

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

  

 

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

试验2：

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

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

 

 

试验3：

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

 

 

右下间隔区域（内容区域）

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

 

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

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

 

对应的分别是paddingTop，paddingBottom，paddingLeft，paddingRight属性。

 

最终的显示结果如下

 

End~