1.7 图片拉伸不失真—九宫格绘制工具（Draw 9-Patch）

1.7.1 什么是“点九”文件

有的时候，我们需要拉伸图片来满足我们的需求，但是有的图片一旦拉伸，就会产生一个很严重的问题-图片失真。那么怎么样既可以拉伸图片而又不失真呢？Android平台上的.9.png格式的图片就是为了解决这一问题而产生的。为了方便，这里我们将.9.png格式的图片称作“点九”文件。

那么，我们先来了解一下什么是点九文件。

1）点九格式的图片是Android平台上新创的一种被拉伸却不失真的东东；

2）点九格式的图片与传统的png格式的图片相比，.9格式图片在图片四周有一圈一个像素点组成的边缘，该边缘用于对图片的可扩展区和内容显示区进行定义。

点九文件有以下几个特点：

1）点九格式的图片在Android环境下具有自适应调节大小的能力；

2）点九格式的图片允许开发人员定义可扩展区域，当需要延伸图片以填充比图片本身更大区域时，可扩展区的内容被延展。

3）点九格式的图片允许开发人员定义内容显示区，用于显示文字或其他内容

4） 点九格式的图片占用资源很小，一般一个几KB或者几十KB的图片会变成几百个字节，有利于节省流量和提高加载速度。

1.7.2 点九文件的制作

点九文件的制作是一个很简单的过程。在这里，我们举一个例子来看看如何使用Draw9-Patch工具制作点九格式的图片。

首先，运行Android-sdk\tools目录下的Draw9Patch.bat来启动Draw 9-Patch。如图1-37所示。

图1-37 启动Draw9-Patch

接着，准备好我们需要制作的图片素材，如图1-38所示。

图1-38 准备素材

然后把我们需要制作的图片拖进去，效果如图1-39所示。

图1-39 导入图片

左边的是原图区域，右边的是拉伸预览区域，这个时候我们通过滑动左下角的Patchscale来拉伸一下，看看效果，如图1-40所示。

图1-40 原始拉伸

这个时候，我们可以看出三种拉伸都变形了，边框变的很粗，这是因为默认的拉伸是整体拉伸，但是很多时候我们只想拉伸图片的一部分，这样，我们自己来定义拉伸区域，我们在top边最外面点击鼠标左键添加宽度4px的黑线，效果如图1-41所示。

图1-41 top边处理

我们可以看到，水平方向上的边框没有再被拉伸了。我们可以在left边的最外面也添加上黑线，效果如图1-42所示。

图1-42 left边处理

这样，上下边的边框也不再拉伸了，只是拉伸了left边定义的2px高度的区域。

最后我们点击File，保存图片就可以了。

第一章 工欲善其事 必先利其器—Android SDK工具（7）