首页 > 代码库 > 第一章 工欲善其事 必先利其器—Android SDK工具(7)

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

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,保存图片就可以了。

 

经验分享:

点九格式的图片四周比普通的png图片相比多了一个像素位的白色区域,该区域只有在图片被还原和制造的时候才能看到,当打包后无法看见,并且图片的总像素会缩小2个像素,比如23x23像素的点九格式的图片被打包后会变成21x21像素。所以我们在制作的时候要注意掌握尺寸。

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