draw9patch超詳細教程

1.背景自適應且不失真問題的存在
      製做自適應背景圖片是UI開發的一個普遍問題，也是界面設計師渴望解決的問題，我相信咱們彼此都深有體會。
      好比,列表的背景圖必定，可是列表的高度隨着列表數據項會發生變化；標題欄的背景，不管橫屏仍是豎屏，高分辨率仍是低分辨率，都能自動填充滿，並且不失真等等背景問題。
      根據以往的經驗，咱們通常採用先切圖後拼湊的作法，這種作法原本我想在這裏和你們介紹一下，其實有的時候仍是頗有用的，可是提及來會比較麻煩，就不說這個非重點了。
     Android針對這種狀況，專門製做了一種.9.PNG格式來解決這個問題。

2.9.PNG格式。
      *.9.PNG就標準的PNG格式，只是在最外面一圈額外增長1px的邊框，這個1px的邊框就是用來定義圖片中可擴展的和靜態不變的區域。特別說明，left（左）和top（上）邊框中交叉部分是可拉伸部分，未選中部分是靜態區域部分。right和bottom（下和右）邊框中交叉部分則是內容部分。
 
如上圖《也就是說，在手機裏。不管上面那張圖怎麼放大，四周的圓角都是不會被放大的！只有left（左）和top（上）邊框內纔會伸縮！



在Android中以9.PNG格式的圖片未背景，則可以自定義拉伸而不失真，好比系統的Button就是一個典型的例子。
     其實呢，不管是left和top，仍是right和bottom都是把圖片分紅9塊 (邊角四塊是不能縮放的，其餘的四塊則是容許縮放的)，因此叫作9.PNG。


3. 使用Draw9Patch.jar製做9.PNG圖片之定義拉伸區域。

      前面已經瞭解到9.PNG格式的工做方式，下面咱們使用工具Draw9Patch(ADK自帶)來製做.9.PNG圖片。
      
第一步：準備要拉伸的圖片。






默認的拉伸是總體拉伸，其實邊框部分咱們並不想拉伸，好，咱們本身來定義拉伸區域，以下圖


 





而後點擊File,導出爲content.9.png。



看看效果！能夠看出，邊框很是的清晰。下右邊是未使用.9.PNG的對比圖，並且也不是咱們要的效果：

 




到這裏爲止，咱們已經基本會製做.9.PNG圖片了。爲了知識體系的全面性和深刻性，咱們繼續。


4.使用Draw9Patch.jar製做9.PNG圖片之定義內容區域。
      是否是以爲上面那張圖文字和邊距挨的太近，好，咱們使用right和bottom邊的線來定義內容區域，來達到增大內邊距的目的。





咱們定義了一個很小的內容區域，其餘的地方則自動充當邊框，從而使內邊距顯的很大，以下圖，
 


呵呵！ok了！

5.製做.9.PNG的高級技巧。
       對於初學Draw9Patch的人來講，這能夠算是高級技巧，那就是：拉伸區域，能夠不是連續的，能夠不止一塊，並且是和自定義的邊框線的長度成正比。
       直接上圖說明：




........ 

教程就到此結束了！ 送給準備學習開發的機油！！   你們多多支持！