Android點9圖的運用

標籤：

在Android UI設計開發中，我們經常會用到一些表徵圖、圖片來做背景等。

相信很多同學都會遇到一個問題，就是我們讓美工做好一張圖，一個表徵圖，呃，看起來挺好看的，但是放進app中，擴大或縮小、在不同解析度的手機中，顯示出來的圖片會變形、模糊。這可不是一個理想的介面。

或許，我們有一種辦法，就是做多幾張圖片。開發Android的同學一定有看到項目裡res目錄下會有drawable-ldpi、drawable-mdpi、drawable-hdpi、drawable-xhdpi、drawable-xxhdpi這幾個檔案夾，而且每個檔案夾裡有會有一個相同的Android機器人的表徵圖。那麼，這幾個檔案夾究竟是幹嘛用的呢？我們先來看一張圖

ldpi對應的是320X240解析度，

mdpi對應的是480X320解析度，

。。。

即檔案夾放的是對應解析度的圖片，手機中，android會根據當前解析度了選擇更適合的解析度的圖片，這樣，我們知道了每種解析度片的比例，就可以做多幾張不同解析度的圖片，放在對應的檔案夾下，這樣或許可以避免圖片變形。這並不是一個明智的選擇，而且，在有些情況寫這種方法也沒有用。

比如聊天氣泡等，它的大小長度是根據文字多少而定，難道你要先測試每增加一個文字長度會變多少然後做對應大小的背景圖片？這不可能！

 

那怎麼辦呢？不用急，下面我就來教大家使用點9圖解決這些問題。

 

首先，我們來瞭解一下什麼是點9圖？

點9圖就是安卓系統或ios系統內的一種可拉抻而不失真的圖，

點9圖是把圖中某些部分進行展開，而不想展開的部分，比如圓角等部分不做變化。

下面就我就以聊天氣泡為例：

首先來看看一張做好的普通的氣泡背景圖及顯示的

上面那張是我做的氣泡背景圖，而下面兩張分別是橫向展開和縱向展開的效果，可以看出來，這種效果是非常糟糕的，並不是我們想要的，背景變形了，文字也沒有在中間，雖然可以調邊距使文字置中，但接下來我會教大家更好用的方法，也是用點9圖。

現在來看看使用了點9圖的背景的效果

很明顯這樣的展開就是我們要的效果了，四個角都不會變形，而且文字顯示在中間。

下面來說說點9圖的原理：

這是一張點9圖，我分為1,2,3,4四個部分，其中1跟2部分表示展開的位置，3跟4部分表示內容顯示部分

畫圖的時候根據自己需要畫出四個黑邊（一會教大家用工具），1、2的黑邊的範圍內會被展開，即之外的四個圓角跟突出來的三角形都不會變形。這樣就能做到保持圖片不變形的展開了。

 

下面就來做一張點9圖，首先找到sdk的tools目錄下的draw9patch.bat

雙擊開啟

然後點擊左上方的File匯入最開始的那張圖片

左邊是帶做圖片，右邊是效果預覽圖

那些黑邊只需將滑鼠在圖片邊緣位置往中間移便可做出來，至於那個點，我是習慣在可展開地區用滑鼠點一下便可，當然隨你喜歡可以拉長，就像上面的一張圖一樣。

點擊這個show content複選框

便可在右邊預覽效果，灰色地區即內容顯示地區，這樣不用同過調邊距使文字置中，方便了很多。

做好了之後，再點擊左上方的File，點擊Save 9-patch，儲存為png圖片，它會自動添加.9尾碼，這個尾碼不能刪掉，刪掉它就跟普通圖片沒區別了，（不對，應該說比普通圖片多了四個黑邊。）這樣就完成了點9圖的製作。

接下來在android中使用，跟普通圖片，表徵圖使用方法一樣，雖然尾碼多了.9，但是使用是不用加上.9。

 

比如：chatbackground.9.png,

在使用時只需android:background="@drawable/chatbackground"即可

 

下面分享開發中使用點9圖的一些心得：

1、作為開發人員，瞭解一下點9圖的實現原理，對UI開發有著很大的協助，會讓開發更加順利。

比如：用點9圖限制顯示內容的地區，這樣開發中我們就不必寫更多的代碼來使內容置中。

2、其實點9圖並不只是這種切法，還有其他更複雜的切法，當然這是由圖片的複雜度、實現的效果而定，

比如，一張圖，我們要把顯示的內容分成兩半時，我們可以把一張圖片分成兩半（如），然後在代碼中拼接起來，便可實現不錯的效果，這種方法兩張圖的內容地區要一樣大，展開地區範圍也要一樣，不然可能會造成兩邊不對稱的效果

3、有了點9圖，我們就可以儘可能地減小資源的大小，合理的切圖方法可以減小圖片資源，還有，有些純色背景，我們不用做得那麼大，用點9圖展開即可，這樣可為我們的安裝包“瘦身”。

最後，我覺得點9圖並不只是開發人員應該學的，美工更應該學，因為介面設計主要還是靠美工，不過設計時要與開發人員討論討論，看看各種切圖效果及顯示效果在android能否實現，是否複雜等，這樣才能提高開發的效率。

 

以上是我開發中的一點經驗，有不對的地方希望大家指正^_^。

Android點9圖的運用