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部分表示內容顯示部分

畫圖的時候根據本身須要畫出四個黑邊（一會教你們用工具），一、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圖的一些心得：

一、做爲開發人員，瞭解一下點9圖的實現原理，對UI開發有着很大的幫助，會讓開發更加順利。

好比：用點9圖限制顯示內容的區域，這樣開發中咱們就沒必要寫更多的代碼來使內容居中。

二、其實點9圖並不僅是這種切法，還有其餘更復雜的切法，固然這是由圖片的複雜度、實現的效果而定，

好比，一張圖，咱們要把顯示的內容分紅兩半時，咱們能夠把一張圖片分紅兩半（以下圖），而後在代碼中拼接起來，即可實現不錯的效果，這種方法兩張圖的內容區域要同樣大，拉伸區域範圍也要同樣，否則可能會形成兩邊不對稱的效果

三、有了點9圖，咱們就能夠儘量地減少資源的大小，合理的切圖方法能夠減少圖片資源，還有，有些純色背景，咱們不用作得那麼大，用點9圖拉伸便可，這樣可爲咱們的安裝包「瘦身」。

最後，我以爲點9圖並不僅是開發人員應該學的，美工更應該學，由於界面設計主要仍是靠美工，不過設計時要與開發人員討論討論，看看各類切圖效果及顯示效果在android可否實現，是否複雜等，這樣才能提升開發的效率。

 

以上是我開發中的一點經驗，有不對的地方但願你們指正^_^。