Andorid中.9.png圖片不失真的調試和製作

<<<我們這樣做的目的是爲了讓背景圖片在不同手機或者不同平板上顯示不失真，衆所周知，現在不同的手機分辨率會有所區別，爲了避免這些問題

就要使用到androidide\android_sdk\tools\draw9patch工具來實現；這裏主要教大家怎麼樣使用和製作圖片    具體如下： >>>

效果圖以QQ圖標作背景展示：

》》》》在Android TV （720p）上展示的效果即平板電腦顯示的效果：

》》》》》這是在Android  手機上現實效果圖：

大家很明顯能看出來，調整前後的區別，調整前的圖片背景失真，失去了原來的清晰度。

TextView定義如下（可以根據自己的喜好定義一些其他參數）：

最終TextView的效果如下所示： 

上圖中的虛線是TextView的外輪廓，我們把TextView的寬度和高度都定義爲wrap_content，並且將gravity設置爲center，但是還是沒有實現我們理想的狀態。TextView中的文本相對於整個圖片居中了，但是我們想要的效果是文本在綠色的矩形區域內居中。

上圖中的文本較短，展現出的問題還不是很明顯。當我們將TextView中的文本設置爲具有一定長度的時候，問題更加突出，如下所示： 

上面這張圖片暴露出兩個問題：

1. 我們原始的圖片是自上而下綠色逐漸變淡，並且右側和下側有陰影。當背景圖被拉伸爲上圖大小的時候，圖片失真嚴重：消息框的四個角模糊不清；陰影被模糊放大，比較難看；綠色不清晰，漸變效果也基本看不出來。

2. 文字已經超出了圖片的消息框範圍，雜亂無章，看起來也不美觀。

出現上述問題的原因是，整個背景圖被完全拉伸了，而且拉伸後的圖片的寬高比例與原始圖片的寬高比例不同。如果只對原始圖片矩形消息框中的區域進行拉伸，那麼就可以解決上述問題。

爲了解決上述問題，我們可以使用Android中的.9.png格式圖片，即draw9patch。

下面對.9.png格式圖片進行一下說明：

1. 首先，.9.png格式的圖片本身就是.png格式圖片，不過該圖片以.9作爲文件名的後綴,但是".9"這種後綴名字在Android 代碼內是不顯示的，當你在代碼裏選擇圖片時你會發現並沒有“.9”這個後綴的圖片。如圖效果展示：
2. 我們可以將一個.png圖片轉換成.9.png圖片，.9.png圖片比正常的.png圖片在圖片最外圍的四邊多了1px邊框，我們可以在這最外層的1px邊框上定義圖片的可拉伸區域以及圖片的內容區域。

我們對原始的背景圖進行編輯，可以得到如下的文件名爲message.9.png的圖片： 

當我們用該處理過的.9.png圖片作爲TextView的背景時，效果如下所示： 

由上圖我們可以看到，所有文本都居中放到了消息框的矩形區域中，而且圖片沒有失真，保持了原有圖片的質感。

我們可以仔細觀察一下上述的message.9.png這張圖片，可以發現該圖片的最外層的四邊有黑點、黑線，具體來說：

1. 可以將圖片最上側1px邊框中的一個或多個點設置爲黑色，本例中我們用了一條黑色的線段，這些黑色的點定義了圖片中可以被橫向拉伸的區域。 同樣也可以將圖片最左側1px邊框中的一個或多個點設置爲黑色，本例中我們只用了一個黑色的像素點，這些黑色的點定義了圖片中可以被縱向拉伸的區域。橫向拉伸像素點與縱向拉伸像素點相交定義了圖片中可拉伸的矩形區域，這樣就實現了對圖片中一部分區域進行拉伸。

2. 我們可以選擇性地對圖片的底邊和右邊設置黑色線段，用這些黑色線段定義圖片的內容區域。當我們圖片裏的樣式是不規則圖形的時候，定義圖片的內容區域很重要，TextView中的文本都會放到內容區域中。將圖片最下側1px邊框設置一條黑色線段，該橫向線段定義了圖片的橫向內容區域。將圖片最右側1px邊框 設置一條黑色線段，該縱向線段定義了圖片的縱向內容區域。橫向線段與縱向線段的組成的矩形區域就組成了內容區域。如果不定義圖片的內容區域，那麼圖片的內容區域就是整個圖片區域。

3. .9.png最外側四邊中的像素要麼是純透明、純白色，要麼是純黑色，不要設置其他顏色和透明度。

使用步驟如下：

1. 可以通過命令行，也可以通過直接雙擊啓動draw9patch，顯示出GUI界面。

2. 打開“Draw 9-patch”之後，可以直接將一個.png圖片拖拽到GUI界面上，也可以通過File菜單中的“Open 9-patch”菜單項打開.png圖片。左側是圖片編輯區，右側是預覽區。可以在編輯區對圖片的最外層的四邊框設置黑色點，如下圖所示： 
   

3. 通過鼠標單擊可以將最外層中的像素設置爲黑色，通過這種方法可以設置圖片的拉伸區域和圖片的內容區域。按住Shift鍵再單擊黑色像素可以將黑色像素重置爲透明。左側的編輯會實時在右側區域顯示出來。右側預覽區中有三個圖片，第一個圖片表示的是垂直方向進行拉伸的預覽效果圖，第二個圖片表示的是水平方向進行拉伸的預覽效果圖，第三個圖片表示的是同時在水平和垂直方向上進行拉伸的預覽效果圖。

4. 在界面下側是控制參數的面板。 
   

   • Zoom 
     通過調節Zoom可以調節左側編輯區域的縮放比例。

   • Patch scale 
     通過調節Patch scale可以調節右側預覽區域的縮放比例。

   • Show lock 
     我們之前提到了，我們只能編輯圖片最外層1px的邊框，如果勾選了Show lock，那麼當我們將鼠標放到左側編輯區域時，那麼不可編輯區域會以紅色條紋遮蓋，效果如下所示： 
     

   • Show content 
     當我們勾選了Show content後，右側預覽區中的圖片會把內容區域以藍色表示。

   • Show patches 
     當勾選了Show patches後，左側編輯區域中的可拉伸區域會粉紅色高亮顯示出來。

   • Show bad patches 
     當我們在top或left邊上設置可拉伸區域設置了連續多個像素時，有可能會造成圖片在拉伸時多個像素顏色進行插值導致失真，如果出現了這種情況會以紅色顯示。