9.png圖片制作詳細教程


1.背景自適應且不失真問題的存在
      制作自適應背景圖片是UI開發的一個廣泛問題,也是界面設計師渴望解決的問題,我相信我們彼此都深有體會。
      比如,列表的背景圖一定,但是列表的高度隨着列表數據項會發生變化;標題欄的背景,無論橫屏還是豎屏,高分辨率還是低分辨率,都能自動填充滿,而且不失真等等背景問題。
      根據以往的經驗,我們一般采用先切圖后拼湊的做法,這種做法本來我想在這里和大家介紹一下,其實有的時候還是很有用的,但是說起來會比較麻煩,就不說這個非重點了,略去,如果大家真的要介紹,在回復中說明,我再考慮一下。
     Android針對這種情況,專門制作了一種.9.PNG格式來解決這個問題。

2.9.PNG格式。
      我不想在這里過多的討論PNG格式的定義問題。但是.9.PNG確實是標准的PNG格式,只是在最外面一圈額外增加1px的邊框,這個1px的邊框就是用來定義圖片中可擴展的和靜態不變的區域。特別說明,lefttop邊框中交叉部分是可拉伸部分,未選中部分是靜態區域部分。rightbottom邊框中交叉部分則是內容部分(變相的相當於定義看一個內邊距,神似padding功能,后面我會單獨介紹一下),這個參數是可選的如下圖。


     Android中以9.PNG格式的圖片未背景,則能夠自定義拉伸而不失真,比如系統的Button就是一個典型的例子。 
     其實呢,無論是lefttop,還是rightbottom都是把圖片分成9塊 (邊角四塊是不能縮放的,其他的四塊則是允許縮放的),所以叫做9.PNG

3. 使用Draw9Patch.jar制作9.PNG圖片之定義拉伸區域。
      前面已經了解到9.PNG格式的工作方式,下面我們使用谷歌提供的Draw9Patch(運行android-sdk-windows\tools目錄下的Draw9Patch.bat)來制作.9.PNG圖片。
      第一步:准備要拉伸的圖片。
                                                           
      非常小的一張圖片,我希望以此為背景,中間部分填充文章內容。
      第二步:制作.9.PNG圖片
      打開Draw9Patch,把圖片拖進去,如下:



      默認的拉伸是整體拉伸,其實邊框部分我們並不想拉伸,好,我們自己來定義拉伸區域,如下圖:

 

       然后點擊File,導出為content.9.png

 

4.使用Draw9Patch.jar制作9.PNG圖片之定義內容區域。
      是不是覺得文字和邊距挨的太近,好,我們使用rightbottom邊的線來定義內容區域,來達到增大內邊距的目的。



      我們定義了一個很小的內容區域,其他的地方則自動充當邊框,從而使內邊距顯的很大

      在這里,我要特別說明,一開始為了增大內邊距,很容易慣性思維,在<TextView>中申明android:padding="10dip" 之類的,我在這里勸告朋友們不要這么做,一是你將無法預知你的顯示,二是這比較混淆,因為設置內容區域就是確定padding,所以我在前面部分說他們是神似。我個人認為通過內容區域設定padding比在布局xml中定義padding更優雅,更簡潔!
      關於Draw9Patch工具的其他使用說明,我在次不再累述,因為要說的話太多,為了節省篇幅,請參考官方文檔。

內容來源於網絡,非本人原創。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM