快捷導(dǎo)航

詳解Android .9.png “點(diǎn)九”圖片的使用

更新時(shí)間：2016年09月05日 10:51:43 作者：huaxun66

這篇文章主要為大家詳細(xì)介紹了Android .9.png “點(diǎn)九”圖片的使用方法，感興趣的小伙伴們可以參考一下

“點(diǎn)九”圖片概述

這里寫圖片描述

“點(diǎn)九”是andriod平臺(tái)的應(yīng)用軟件開發(fā)里的一種特殊的圖片形式，文件擴(kuò)展名為：.9.png。
我們都知道android平臺(tái)有多種不同的分辨率，很多控件的切圖文件在被放大拉伸后，邊角會(huì)模糊失真，而使用點(diǎn)九PNG技術(shù)，可以將圖片橫向和縱向同時(shí)進(jìn)行拉伸，以實(shí)現(xiàn)在多分辨率下的完美顯示效果。
而且使用*.9.png圖片技術(shù)，只需要采用一套界面切圖去適配不同的分辨率，大幅減少安裝包的大小。程序不需要專門做處理的就可以實(shí)現(xiàn)其拉伸，也減少了代碼量和開發(fā)工作量。

【普通拉伸和點(diǎn)九拉伸效果對(duì)比】

這里寫圖片描述

很明顯看出，使用點(diǎn)九后，仍能保留圖像的漸變質(zhì)感，和圓角的精細(xì)度。

從中我們也可以理解為什么叫“點(diǎn)九PNG”，其實(shí)相當(dāng)于把一張png圖分成了9個(gè)部分（九宮格），分別為4個(gè)角，4條邊，以及一個(gè)中間區(qū)域，4個(gè)角是不做拉升的，所以還能一直保持圓角的清晰狀態(tài)，而2條水平邊和垂直邊分別只做水平和垂直拉伸，所以不會(huì)出現(xiàn)邊會(huì)被拉粗的情況，只有中間用黑線指定的區(qū)域做拉伸。結(jié)果是圖片不會(huì)走樣。

制作自己的“點(diǎn)九”圖片

“點(diǎn)九”圖片制作有兩種方式：使用 “draw9patch”工具和PS技術(shù)。這里我們只講前一種，流程如下：

這里寫圖片描述

安裝工具

首先你需要給自己的電腦安裝上JDK在系統(tǒng)的默認(rèn)目錄下。
然后使用andriod模擬器—android-sdk-windows，打開SDK/tools目錄下的“draw9patch.bat”文件，出現(xiàn)載入窗口：

這里寫圖片描述

導(dǎo)入并編輯

將png圖片拖拽到該窗口中，或者File –> Open 9 patch，如下圖，自動(dòng)進(jìn)入編輯界面。圖中介紹了每個(gè)區(qū)域的內(nèi)容及功能注釋。

這里寫圖片描述

右側(cè)是視圖的預(yù)覽區(qū)域，分別對(duì)應(yīng)縱向拉伸預(yù)覽、橫向拉伸預(yù)覽和雙向拉伸預(yù)覽。
現(xiàn)在我們?cè)趫D片邊緣點(diǎn)擊左鍵，繪制出黑線，即圖片需要被拉伸的區(qū)域和內(nèi)容顯示區(qū)域。如上圖，對(duì)4條黑線做了注釋。
上邊黑線：橫向拉伸區(qū)域，必須要畫的，拉伸是橫向拉伸，如右邊的區(qū)域第二個(gè)拉伸的就是橫向拉伸的效果
左邊黑線：縱向拉伸區(qū)域，必須要畫的，拉伸是縱向拉伸，如右邊的區(qū)域第一個(gè)拉伸的就是縱向拉伸的效果
下邊黑線：可選，橫向內(nèi)容顯示區(qū)域
右邊黑線：可選，縱向內(nèi)容顯示區(qū)域
注意，1.黑線必須是連續(xù)的，如果你感覺畫的不好，按shift+鼠標(biāo)左鍵將其擦出，然后重新畫。2.如果這是有顯示文字的窗體，那么這時(shí)右邊和下邊黑線不能省略，否則文字位置會(huì)顯示在左邊和上邊黑線控制的拉伸區(qū)域，從而引起錯(cuò)亂。

【draw9patch.bat其他功能說明】
Show lock：顯示不可繪區(qū)域
Show patches：預(yù)覽這個(gè)繪圖區(qū)中的可延伸宮格
Show patches：預(yù)覽視圖中的高亮區(qū)域（紫色區(qū)域）
Show bad patches：在宮格區(qū)域四周增加一個(gè)紅色邊界，這可能會(huì)在圖像被延伸時(shí)產(chǎn)生人工痕跡。如果你消除所有的壞宮格，延伸視圖的視覺一致性將得到維護(hù)。

保存和輸出

點(diǎn)擊左上file- save，保存文件，自動(dòng)生成一張后綴名為“*.9.png”格式的圖片，圖片上下左右各增加了1px的黑線。

最后，截兩個(gè)項(xiàng)目里面的圖來看一下效果，背景在縱向拉伸后完全沒有失真：

這里寫圖片描述