1. 程式人生 > >android .9.png ”點9” 圖片製作方法,附上註釋

android .9.png ”點9” 圖片製作方法,附上註釋

轉載出自”百度MUX"。

點九”是andriod平臺的應用軟體開發裡的一種特殊的圖片形式,副檔名為:.9.png

智慧手機中有自動橫屏的功能,同一幅介面會在隨著手機(或平板電腦)中的方向感測器的引數不同而改變顯示的方向,在介面改變方向後,介面上的圖形會因為長寬的變化而產生拉伸,造成圖形的失真變形。

我們都知道Android平臺有多種不同的解析度,很多控制元件的切圖檔案在被放大拉伸後,邊角會模糊失真。

OK,在android平臺下使用點九PNG技術,可以將圖片橫向和縱向同時進行拉伸,以實現在多解析度下的完美顯示效果。

【普通拉伸和點九拉伸效果對比】



對比很明顯,使用點九後,仍能保留影象的漸變質感,和圓角的精細度。

從中我們也可以理解為什麼叫“點九PNG”,其實相當於把一張png圖分成了9個部分(九宮格),分別為4個角,4條邊,以及一箇中間區域,4個角是不做拉昇的,所以還能一直保持圓角的清晰狀態,而2條水 平邊和垂直邊分別只做水平和垂直拉伸,所以不會出現邊會被拉粗的情況,只有中間用黑線指定的區域做拉伸。結果是圖片不會走樣。

二.“點九”的製作方法

直接使用Eclipse開發工具裡面的draw9patch.bat即可,找到雙擊執行



出現如下畫面:


2.匯入並編輯

將png圖片拖拽到該視窗中

如下圖,自動進入編輯介面。圖中介紹了每個區域的內容及功能註釋。


預覽右側的檢視發現,圖片的邊緣處於普通拉伸狀態。

現在我們在圖片邊緣點選左鍵,繪製出黑線,即圖片需要被拉伸的部分。如下圖,對4條黑線做了註釋。


如果失誤多繪的部分,可按住shift鍵的同時點選滑鼠左鍵擦除)。

如圖所見,三種拉伸結果均已完美顯示,已實現我們想要的拉伸效果,假設這是一個有顯示文字的窗體,那麼文字顯示的區域,程式也會控制在黑線對應範圍。


以下這些圖片,包括異性(非規則圖形)圖片,也可以通過點九PNG實現橫縱向的自然拉伸。




【draw9patch.bat其他功能說明】

②   Show lock:顯示不可繪區域

② Show patches:預覽這個繪圖區中的可延伸宮格(粉紅色代表一個可延伸區域)

③ Show patches:預覽檢視中的高亮區域(紫色區域)

④ Show bad patches:在宮格區域四周增加一個紅色邊界,這可能會在影象被延伸時產生人工痕跡。如果你消除所有的壞宮格,延伸檢視的視覺一致性將得到維護。

3.儲存和輸出

點選左上file- save,儲存檔案,自動生成一張字尾名為“*.9.png”格式的圖片,圖片上下左右各增加了1px的黑線。

三.使用“點九”的意義

關於下圖,經過測試發現使用普通png的顯示效果出現明顯的變色橫紋。而.9.png圖片的顯示效果明顯優於普通png。


使用.9.png格式後,橫紋問題基本已解決。因為對於.9.png圖片,android系統程式有對其優化的演算法。

由於android手機螢幕的材質質量差距大。很多螢幕不支援16位以上的顏色顯示。

所以渲染後結果出現丟失顏色,故造成橫紋顯示。

經與多款android手機對比後發現,螢幕越次的手機橫紋越明顯。

而使用了*.9.png圖片技術後,只需要採用一套介面切圖去適配不同的解析度,而且大幅減少安裝包的大小。而且這樣程式不需要專門做處理的就可以實現其拉伸,也減少了程式碼量和開發工作量。

轉載請註明出自”百度MUX”