我們有一個TextView，其里面的內(nèi)容是可以通過代碼動態(tài)改變的，我們想用一張圖片作為TextView的背景，實(shí)現(xiàn)類似于手機(jī)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，但是還是沒有實(shí)現(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)該圖片的最外層的四邊有黑點(diǎn)、黑線，具體來說：

可以將圖片最上側(cè)1px邊框中的一個或多個點(diǎn)設(shè)置為黑色，本例中我們用了一條黑色的線段，這些黑色的點(diǎn)定義了圖片中可以被橫向拉伸的區(qū)域。 同樣也可以將圖片最左側(cè)1px邊框中的一個或多個點(diǎn)設(shè)置為黑色，本例中我們只用了一個黑色的像素點(diǎn)，這些黑色的點(diǎn)定義了圖片中可以被縱向拉伸的區(qū)域。橫向拉伸像素點(diǎn)與縱向拉伸像素點(diǎn)相交定義了圖片中可拉伸的矩形區(qū)域，這樣就實(shí)現(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。其實(shí)，Android本身也提供了編輯.9.png的工具，Android/sdk/tools目錄下有很多實(shí)用的工具，我們可以使用該目錄下的draw9patch工具對.png圖片進(jìn)行編輯。

使用步驟如下：

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

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

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

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

Zoom
通過調(diào)節(jié)Zoom可以調(diào)節(jié)左側(cè)編輯區(qū)域的縮放比例。

Patch scale
通過調(diào)節(jié)Patch scale可以調(diào)節(jié)右側(cè)預(yù)覽區(qū)域的縮放比例。

Show lock
我們之前提到了，我們只能編輯圖片最外層1px的邊框，如果勾選了Show lock，那么當(dāng)我們將鼠標(biāo)放到左側(cè)編輯區(qū)域時，那么不可編輯區(qū)域會以紅色條紋遮蓋，效果如下所示：

Show content
當(dāng)我們勾選了Show content后，右側(cè)預(yù)覽區(qū)中的圖片會把內(nèi)容區(qū)域以藍(lán)色表示。

Show patches
當(dāng)勾選了Show patches后，左側(cè)編輯區(qū)域中的可拉伸區(qū)域會粉紅色高亮顯示出來。

Show bad patches
當(dāng)我們在top或left邊上設(shè)置可拉伸區(qū)域設(shè)置了連續(xù)多個像素時，有可能會造成圖片在拉伸時多個像素顏色進(jìn)行插值導(dǎo)致失真，如果出現(xiàn)了這種情況會以紅色顯示。

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

最新評論