第一章 工欲善其事 必先利其器—Android SDK工具（7）

標籤：android   android開發   android平台   經驗分享   sdk   

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像素。所以我們在製作的時候要注意掌握尺寸。

第一章 工欲善其事 必先利其器—Android SDK工具（7）