安卓 9.png 图片的制作
安卓的九宫格png图片可以自定义拉伸的区域,所以可以很方便的适应不同宽度高度的设备。
9.png格式是很纯正的png格式,与普通的png不同的是9.png格式的图片最外围有一圈1像素的透明区域,或者说有一条1像素的透明边框,这个区域中只能存在纯黑色和纯透明两种颜色。
图:外围的那圈透明的1px的区域
我们可以在这个1像素宽的外围透明区域中填充纯正的黑色(#000000),来标注该9.png图片的可拉伸区域和内容区域。
可拉伸区域是由图片左方和上方的透明区域中的黑色决定的,内容区域则由右边和下边区域中的黑色决定。
左边和上边的黑色的区域定义的交叉区域就是可拉伸区域。如图:
图中的红色区域就是左边和上边两条黑线交叉的得出来的可拉伸区域
很重要的一点是我们是可以定义多个可拉伸区域的:
四角的红色区域就是会被拉伸的区域
我们甚至可以只定义宽度为1像素的几个点,其实就是把面积为1像素的区域定义为可拉伸区域:
大家应该知道这个9.png的拉伸区域是哪几个部分了吧。
9.png图片的外围透明区域的右边和下边是用来定义内容区域的。其实我觉得把跟内容相关的东西弄到背景图片上来,有点牛头不对马嘴的意思。所谓内容区域就是像文字这些东西只能出现在这个内容区域,有点像web中padding属性的意思。这个就不去讲了,因为我们主要关心的的还是拉伸区域的定义。
有些图片是需要中间拉伸,四周不需要拉伸的,有些则是需要四周拉伸,中间不需要拉伸的,都是可以实现的,这就要看你怎么去画那些“黑线”了。
做9.png的图片我们可以直接在photoshop中来做,就是手动给已有的原始png图片加一个1像素的透明边框,然后在边框上画黑线就行了,最后保存的时候保存为 xxx.9.png的格式就行了。
当然,我们的安卓apk中直接就是包含有专门制作这种图片的工具的,就在apk文件夹中的tool文件夹里面:
我们运行这个工具后,打开一张要做成9.png的png图片:
我们可以用鼠标在透明边框上点击一下来画出一个点:
然后再用鼠标移到点上的时候会出辅助线,一拉就能拉出一条线了:
如果想去掉这条线的话只要把这条线的长度拉成0就行了。
关于9.png的图片的解析是由安卓sdk进行的,它会先判断图片是不是九宫格的,是的话就用九宫格的方式进行渲染。这个我们不用深入了解,知道就行了。要注意的一点是我们从apk文件中解压得到的9.png文件是去掉了外围透明区域的,已经没有九宫格的功能了,我们要使用的话得重新把他重新进行制作。