android NinePatch圖片製作

 NinePatch圖片以*.9.png結尾,和普通圖片的區別是四周多了一個邊框(以下圖所示):android

 

如上圖所示,左邊那條黑色線表明圖片垂直拉伸的區域,上邊的那條黑色線表明水平拉伸區域,右邊的黑色線表明內容繪製的垂直區域,下邊的黑色線表明內容繪製的水平區域,右邊和下邊的線是可選的,左邊和上邊的線不能省略。 編輯器

        採用NinePatch圖片作背景,可以使背景隨着內容的拉伸(縮小)而拉伸(縮小)。那麼如何將普通的PNG圖片編輯爲NinePatch圖片呢, Android  SDK/tools目錄下提供了編輯器draw9patch.bat,雙擊便可打開,使用起來很簡單了,主要有如下選項: ide

        採用NinePatch圖片作背景,可以使背景隨着內容的拉伸(縮小)而拉伸(縮小)。那麼如何將普通的PNG圖片編輯爲NinePatch圖片呢, Android  SDK/tools目錄下提供了編輯器draw9patch.bat,雙擊便可打開,使用起來很簡單了,主要有如下選項: 工具

 Zoom: 用來縮放左邊編輯區域的大小 spa

 Patch scale: 用來縮放右邊預覽區域的大小 orm

 Show lock: 當鼠標在圖片區域的時候顯示不可編輯區域 blog

 Show patches: 在編輯區域顯示圖片拉伸的區域 (使用粉紅色來標示) 圖片

 Show content: 在預覽區域顯示圖片的內容區域(使用淺紫色來標示) ci

 Show bad patches: 在拉伸區域周圍用紅色邊框顯示可能會對拉伸後的圖片產生變形的區域,若是徹底消除該內容則圖片拉伸後是沒有變形的,也就是說,無論如何縮放圖片顯示都是良好的。(實際試 發現NinePatch編輯器是根據圖片的顏色值來區分是否爲bad patch的,一邊來講只要色差不是太大不用考慮這個設置。) get

例子:

NinePatch 是一種頗有用的 PNG 圖片格式,它能夠在特定區域隨文字大小進行縮放。以下:

 

從上圖能夠看到,背景圖片的中間區域會隨着文字的大小進行縮放。背景圖片是一張NinePatch圖片。 NinePatch圖片能夠使用android自帶的draw9patch工具來製做,該工具在SDK安裝路徑的tools目錄下。執行該工具,而後點擊「File->open 9-path」打開一張用於製做NinePatch圖片的原來圖片。在畫布的上方和左方的邊上畫線指定縮放區域,

勾選「Show patches」可顯示畫定的區域,綠色

爲固定大小區域,紅色爲縮放區域,文字會擺放在紅色

區域。製做完後,點擊「File? save 9-path」保存

圖片,draw9patch工具會自動爲圖片加上*.9.png後綴。

把製做好的圖片拷貝進項目的res/drawable目錄,而後

編寫代碼。以下:

 

<TextView android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:text="退出" android:textColor="#330000"

    android:background="@drawable/button"/>
相關文章
相關標籤/搜索