Andorid中.9.png圖片的使用及製作

Andorid中.9.png圖片的使用及製作

我們有一個TextView，其裡面的內容是可以通過代碼動態改變的，我們想用一張圖片作為TextView的背景，實作類別似於手機QQ對話中的氣泡文字效果。

TextView定義如下：

背景圖片如下所示：

最終TextView的效果如下所示：

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

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

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

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

文字已經超出了圖片的訊息框範圍，雜亂無章。

出現上述問題的原因是，整個背景圖被完全展開了，而且展開後的圖片的寬高比例與原始圖片的寬高比例不同。如果只對原始圖片矩形訊息框中的地區進行展開，那麼就可以解決上述問題。<喎?http://www.bkjia.com/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwPs6qwcu94r72yc/K9s7KzOKjrM7Sw8e/ydLUyrnTw0FuZHJvaWTW0LXELjkucG5nuPHKvc28xqyjrLy0TmluZS1wYXRjaKGjPC9wPg0KPHA+z8LD5rbULjkucG5nuPHKvc28xqy9+NDQ0rvPwsu1w/ejujwvcD4NCsrXz8ijrC45LnBuZ7jxyr21xM28xqyxvsntvs3Kxy5wbme48cq9zbzGrKOssru5/bjDzbzGrNLULjnX986qzsS8/sP7tcS689e6oaMgztLDx7/J0tS9q9K7uPYucG5nzbzGrNequ7uzyS45LnBuZ828xqyjrC45LnBuZ828xqyxyNX9s6O1xC5wbmfNvMas1NrNvMas1+7N4s6ntcTLxLHftuDByzFweLHfv/KjrM7Sw8e/ydLU1NrV4tfuzeKy47XEMXB4sd+/8snPtqjS5c28xqy1xL/JwK3J7Mf40/LS1LywzbzGrLXExNrI3cf40/Khow0KPHA+ztLDx7bU1K3KvLXEsbO+sM28vfjQ0LHgvK2jrL/J0tS1w7W9yOfPwrXEzsS8/sP7zqptZXNzYWdlLjkucG5ntcTNvMaso7o8YnIgLz4NCjxpbWcgYWx0PQ=="這裡寫圖片描述" src="http://www.bkjia.com/uploads/allimg/160107/0414223048-3.png" title="\" />

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

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

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

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

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

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

我們可以用Photoshop將一個已有的.png編輯成.9.png。其實，Android本身也提供了編輯.9.png的工具，Android/sdk/tools目錄下有很多實用的工具，我們可以使用該目錄下的draw9patch工具對.png圖片進行編輯。

使用步驟如下：

可以通過命令列，也可以通過直接雙擊啟動draw9patch，顯示出GUI介面。

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

通過按一下滑鼠可以將最外層中的像素設定為黑色，通過這種方法可以設定圖片的展開地區和圖片的內容地區。按住Shift鍵再單擊黑色像素可以將黑色像素重設為透明。左側的編輯會即時在右側地區顯示出來。右側預覽區中有三個圖片，第一個圖片表示的是垂直方向進行展開的預覽，第二個圖片表示的是水平方向進行展開的預覽，第三個圖片表示的是同時在水平和垂直方向上進行展開的預覽。

在介面下側是控制參數的面板。

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

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

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

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

Show patches
當勾選了Show patches後，左側編輯地區中的可展開地區會粉紅色高亮顯示出來。

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

希望本文對大家使用.9.png有所協助！