在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里面作为背景,然后添加文字试试效果
我们发现文字不在最左上角显示,而是在我用右边和下边控制的区域中显示
总结:
黑色条位置向下覆盖的区域表示图片横向拉伸时,只拉伸该区域
黑色条位置向右覆盖的区域表示图片纵向拉伸时,只拉伸该区域
黑色条位置向左覆盖的区域表示图片纵向显示内容的区域
黑色条位置向上覆盖的区域表示图片横向显示内容的区域
没有黑色条的位置覆盖的区域是图片拉伸时保持不变