android:製作 Nine-Patch 圖片

yufan發表於2016-01-08

它是一種被特殊處理過的 png 圖片,能夠指定哪些區域可以被拉伸而 哪些區域不可以。

那麼 Nine-Patch 圖片到底有什麼實際作用呢?我們還是通過一個例子來看一下吧。比如 說專案中有一張氣泡樣式的圖片 message_left.png,如圖 3.38 所示。

圖   3.38

 

我們將這張圖片設定為一個 LinearLayout 的背景圖片,修改 activity_main.xml 中的程式碼, 如下所示:

 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" >

 

<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/message_left" >

</LinearLayout>

 

 

</RelativeLayout>

將 LinearLayout 的寬度指定為 match_parent,然後將它的背景圖設定為 message_left,現 在執行程式,效果如圖 3.39 所示。

 可以看到,由於 message_left 的寬度不足以填滿整個螢幕的寬度,整張圖片被均勻地拉伸了!這種效果非常差,使用者肯定是不能容忍的,這時我們就可以使用 Nine-Patch 圖片來進 行改善。在 Android sdk 目錄下有一個 tools 資料夾,在這個資料夾中找到 draw9patch.bat 檔案, 我們就是使用它來製作 Nine-Patch 圖片的。雙擊開啟之後,在導航欄點選 File→Open 9-patch 將 message_left.png 載入進來,如圖 3.40 所示。

 

圖   3.40

 

我們可以在圖片的四個邊框繪製一個個的小黑點,在上邊框和左邊框繪製的部分就表示 當圖片需要拉伸時就拉伸黑點標記的區域,在下邊框和右邊框繪製的部分則表示內容會被放 置的區域。繪製完成後效果如圖 3.41 所示。

 

圖   3.41

 

最後點選導航欄 File →Save 9-patch 把繪製好的圖片進行儲存,此時的檔名就是message_left.9.png。使用這張圖片替換掉之前的 message_left.png 圖片,重新執行程式,效果如圖 3.42 所示。

 

 

這樣當圖片需要拉伸的時候,就可以只拉伸指定的區域,程式在外觀上也是有了很大的改進。

相關文章