android平臺有多種不一樣的分辨率,不少控件的切圖文件在被放大拉伸後,邊角會模糊失真,在android平臺下使用點九PNG技術,能夠將圖片橫向和縱向同時進行拉伸,以實如今多分辨率下的完美顯示效果。
java
普通拉伸和點九拉伸效果對比:android
對比很明顯,使用點九後,仍能保留圖像的漸變質感,和圓角的精細度。web
.9.png是一種非失真性壓縮位圖圖形文件格式。這種格式的圖片和普通圖片的區別就是其四周多了一個黑色邊框。編輯器
左邊那條黑色線表明圖片縱向拉伸的區域,上邊的那條黑色線表明橫向拉伸區域,右邊的黑色線表明縱向內容繪製的區域,下邊的黑色線表明橫向內容繪製的區域,右邊和下邊的線是可選的,左邊和上邊的線不能省略。ide
其實就是利用黑線把圖片分紅九宮格格式,被黑線劃分出來的中間塊狀區域(⑨)是可拉伸的,其餘地方是保持不變的。工具
1.使用Andorid SDK\tools目錄下的Draw9Patch.jar製做9.PNG圖片 佈局
(1)定義拉伸區域:測試
默認的拉伸是總體拉伸,其實邊框部分咱們並不想拉伸,好,咱們本身來定義拉伸區域,以下圖:spa
而後點擊File,導出爲content.9.png。code
在Eclipse新建Android工程,將圖片做爲背景顯示出來:
<TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="正文:A NinePatchDrawable graphic is a stretchable bitmap image, which Android will automatically resize to accommodate the contents of the View in which you have placed it as the background. A NinePatch drawable is a standard PNG image that includes an extra 1-pixel-wide bor der." android:background="@drawable/content" android:textColor="#000"/>
能夠看出,邊框很是的清晰。下圖是未使用.9.png的對比圖,並且也不是咱們要的效果:
到這裏爲止,咱們已經基本會製做.9.PNG圖片了。爲了知識體系的全面性和深刻性,咱們繼續。
(2)定義內容區域:
是否是以爲文字和邊距挨的太近,好,咱們使用right和bottom邊的線來定義內容區域,來達到增大內邊距的目的。
咱們定義了一個很小的內容區域,其餘的地方則自動充當邊框,從而使內邊距顯的很大,以下圖:
在這裏,我要特別說明,一開始爲了增大內邊距,很容易慣性思惟,在<TextView>中申明android:padding="10dip" 之類的,我在這裏勸告朋友們不要這麼作,一是你將沒法預知你的顯示,二是這比較混淆,由於設置內容區域就是肯定padding,因此我在前面部分說他們是神似。我我的認爲經過內容區域設定padding比在佈局xml中定義padding更優雅,更簡潔!
關於Draw9Patch工具的其餘使用說明,我在次再也不累述,由於要說的話太多,爲了節省篇幅,請參考官方文檔。
(3)製做.9.PNG的高級技巧
對於初學Draw9Patch的人來講,這能夠算是高級技巧,那就是:拉伸區域,能夠不是連續的,能夠不止一塊,並且是和自定義的邊框線的長度成正比。
直接上圖說明:
(4)draw9patch.bat其餘功能說明
①Zoom: 用來縮放左邊編輯區域的大小
②Patch scale: 用來縮放右邊預覽區域的大小
③Show lock: 當鼠標在圖片區域的時候顯示不可編輯區域
④Show patches: 在編輯區域顯示圖片拉伸的區域 (使用粉紅色來標示)
⑤Show content: 在預覽區域顯示圖片的內容區域(使用淺紫色來標示)
⑥Show bad patches: 在拉伸區域周圍用紅色邊框顯示可能會對拉伸後的圖片產生變形的區域,若是徹底消除該內容則圖片拉伸後是沒有變形的,也就是說,無論如何縮放圖片顯示都是良 好的。(實際試發現NinePatch編輯器是根據圖片的顏色值來區分是否爲bad patch的,一邊來講只要色差不是太大不用考慮這個設置。)
2.使用Photoshop製做9.PNG圖片
如流程圖所示,相對與方法1,只需2個步驟就可獲得.9.png圖片,具體步驟爲:
1. 肯定切圖後直接改變圖片的畫布大小,
2. 手動將上下左右各增長1px
3. 使用鉛筆工具,手動繪製拉伸區域,色值必須爲黑色(#000000)。
4. 存儲爲web所用格式,選擇png-24,儲存時手動將後綴名改成.9.png
不過這種方法的缺點是不能實時預覽,判斷並測試拉伸區域的準確性。
使用此方法須要注意如下2點:
1. 手繪的黑線拉伸區必須是#000000,透明度100%,而且圖像四邊不能出現半透明像素;
2. 你的.9.png必須繪有拉伸區域的黑線;
不然,圖片不會經過android系統編譯,致使程序報錯。還有,有同窗疑惑解壓縮apk文件後,.9.png圖片裏的黑線怎麼沒了?
那是由於andriod程序在把文件打包成apk的時候,程序會自動把*.9.png圖片邊緣的黑線去掉,因此解壓縮apk後看到的.9.png文件是沒有黑線的。