快捷導(dǎo)航

Android中.9.png圖片的使用及制作

更新時間：2016年01月05日 09:57:00 投稿：lijiao

這篇文章主要介紹了Android中.9.png圖片的使用及制作的相關(guān)資料,感興趣的小伙伴們可以參考一下

我們有一個TextView，其里面的內(nèi)容是可以通過代碼動態(tài)改變的，我們想用一張圖片作為TextView的背景，實現(xiàn)類似于手機QQ對話中的氣泡文本效果。

TextView定義如下：

<TextView android:text="@string/hello_world"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:background="@drawable/original" />

背景圖片如下所示：

這里寫圖片描述

最終TextView的效果如下所示：

這里寫圖片描述

上圖中的虛線是TextView的外輪廓，我們把TextView的寬度和高度都定義為wrap_content，并且將gravity設(shè)置為center，但是還是沒有實現(xiàn)我們理想的狀態(tài)。TextView中的文本相對于整個圖片居中了，但是我們想要的效果是文本在綠色的矩形區(qū)域內(nèi)居中。

上圖中的文本較短，展現(xiàn)出的問題還不是很明顯。當(dāng)我們將TextView中的文本設(shè)置為具有一定長度的時候，問題更加突出，如下所示：

這里寫圖片描述

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

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

文字已經(jīng)超出了圖片的消息框范圍，雜亂無章。

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

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

下面對.9.png格式圖片進(jìn)行一下說明：

首先，.9.png格式的圖片本身就是.png格式圖片，不過該圖片以.9作為文件名的后綴。我們可以將一個.png圖片轉(zhuǎn)換成.9.png圖片，.9.png圖片比正常的.png圖片在圖片最外圍的四邊多了1px邊框，我們可以在這最外層的1px邊框上定義圖片的可拉伸區(qū)域以及圖片的內(nèi)容區(qū)域。

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

這里寫圖片描述

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

這里寫圖片描述

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

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

這里寫圖片描述

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

我們可以選擇性地對圖片的底邊和右邊設(shè)置黑色線段，用這些黑色線段定義圖片的內(nèi)容區(qū)域。當(dāng)我們圖片里的樣式是不規(guī)則圖形的時候，定義圖片的內(nèi)容區(qū)域很重要，TextView中的文本都會放到內(nèi)容區(qū)域中。將圖片最下側(cè)1px邊框設(shè)置一條黑色線段，該橫向線段定義了圖片的橫向內(nèi)容區(qū)域。將圖片最右側(cè)1px邊框設(shè)置一條黑色線段，該縱向線段定義了圖片的縱向內(nèi)容區(qū)域。橫向線段與縱向線段的組成的矩形區(qū)域就組成了內(nèi)容區(qū)域。如果不定義圖片的內(nèi)容區(qū)域，那么圖片的內(nèi)容區(qū)域就是整個圖片區(qū)域。

.9.png最外側(cè)四邊中的像素要么是純透明、純白色，要么是純黑色，不要設(shè)置其他顏色和透明度。

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

使用步驟如下：

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

打開“Draw 9-patch”之后，可以直接將一個.png圖片拖拽到GUI界面上，也可以通過File菜單中的“Open 9-patch”菜單項打開.png圖片。左側(cè)是圖片編輯區(qū)，右側(cè)是預(yù)覽區(qū)?？梢栽诰庉媴^(qū)對圖片的最外層的四邊框設(shè)置黑色點，如下圖所示：

這里寫圖片描述

通過鼠標(biāo)單擊可以將最外層中的像素設(shè)置為黑色，通過這種方法可以設(shè)置圖片的拉伸區(qū)域和圖片的內(nèi)容區(qū)域。按住Shift鍵再單擊黑色像素可以將黑色像素重置為透明。左側(cè)的編輯會實時在右側(cè)區(qū)域顯示出來。右側(cè)預(yù)覽區(qū)中有三個圖片，第一個圖片表示的是垂直方向進(jìn)行拉伸的預(yù)覽效果圖，第二個圖片表示的是水平方向進(jìn)行拉伸的預(yù)覽效果圖，第三個圖片表示的是同時在水平和垂直方向上進(jìn)行拉伸的預(yù)覽效果圖。

在界面下側(cè)是控制參數(shù)的面板。

這里寫圖片描述