Android的.9.png图片分析

在Android中我们经常会看到.9.png格式的图片，感觉很奇怪，所以就在网上查了下，然后自己实现了下试了试效果，下面将自己的感受写出来，希望能帮助到大家

在开始之前，先对.9.PNG简单介绍下（摘自网络）

什么叫.9.PNG呢，这是安卓开发里面的一种特殊的图片

这种格式的图片在android 环境下具有自适应调节大小的能力。

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

（2）允许开发人员定义内容显示区，用于显示文字或其他内容

下面开始了

为了便于观察，首先我制作了一个方正的黑白格子，如图



其格式我设置了.jpg，.bmp，.png，在界面中显示效果如图



我们发现这三种图片格式显示的效果是一样的，而且都是整体拉伸

好了，下面使用draw9patch.bat制作.9.png图片

其路径为Android_SDK-->sdk-->tools

双击draw9patch.bat，出现如下界面



点击打开文件，选择刚才制作好的图片（注意：这里只能是png图片）



打开后，效果如下图



这是没有经过处理的图片，我们把鼠标放上去，发现上下左右都有一条线，拖动试试效果



将图片保存后发现名称后面自动多了一个.9.png

将这个图片放在程序中看看效果



会发现有一点效果，四边的格子不再是满格了

那么我们继续修改


 


再修改


 


我们会发现中间拉伸区域是我上边和左边选中区域，而没有选中的区域就是四周没有拉伸的地方

为什么我的是满格，而别人的有一定的间隙了

我们知道png有一个特点是背景透明

所以我将我的图片放在一个稍大的透明背景上，其处理和效果如下


 


这样我的图片就不再占用整个界面了

那么右边和底边的是为了控制什么呢

我们将图片再处理下


 


然后将其放置在一个TextView里面作为背景，然后添加文字试试效果



我们发现文字不在最左上角显示，而是在我用右边和下边控制的区域中显示

总结：

黑色条位置向下覆盖的区域表示图片横向拉伸时，只拉伸该区域 

黑色条位置向右覆盖的区域表示图片纵向拉伸时，只拉伸该区域   

黑色条位置向左覆盖的区域表示图片纵向显示内容的区域 

黑色条位置向上覆盖的区域表示图片横向显示内容的区域 

没有黑色条的位置覆盖的区域是图片拉伸时保持不变

下载源码和图片