第一章 工欲善其事 必先利其器—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像素。所以我们在制作的时候要注意掌握尺寸。 |
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
