安卓的九宮格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文件是去掉了外圍透明區域的,已經沒有九宮格的功能了,我們要使用的話得重新把他重新進行制作。








