天天看點

android 編輯9圖檔,Android .9.png圖檔的處理

android平台有多種不同的分辨率,很多控件的切圖檔案在被放大拉伸後,邊角會模糊失真,在android平台下使用點九PNG技術,可以将圖檔橫向和縱向同時進行拉伸,以實作在多分辨率下的完美顯示效果。

android 編輯9圖檔,Android .9.png圖檔的處理

普通拉伸和點九拉伸效果對比:

android 編輯9圖檔,Android .9.png圖檔的處理

對比很明顯,使用點九後,仍能保留圖像的漸變質感,和圓角的精細度。

.9.png是一種非失真性壓縮位圖圖形檔案格式。這種格式的圖檔和普通圖檔的差別就是其四周多了一個黑色邊框。

android 編輯9圖檔,Android .9.png圖檔的處理

左邊那條黑色線代表圖檔縱向拉伸的區域,上邊的那條黑色線代表橫向拉伸區域,右邊的黑色線代表縱向内容繪制的區域,下邊的黑色線代表橫向内容繪制的區域,右邊和下邊的線是可選的,左邊和上邊的線不能省略。

其實就是利用黑線把圖檔分成九宮格格式,被黑線劃分出來的中間塊狀區域(⑨)是可拉伸的,其他地方是保持不變的。

android 編輯9圖檔,Android .9.png圖檔的處理

1.使用Andorid SDK\tools目錄下的Draw9Patch.jar制作9.PNG圖檔

(1)定義拉伸區域:

android 編輯9圖檔,Android .9.png圖檔的處理

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

android 編輯9圖檔,Android .9.png圖檔的處理
android 編輯9圖檔,Android .9.png圖檔的處理

然後點選File,導出為content.9.png。

在Eclipse建立Android工程,将圖檔作為背景顯示出來:

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"/>

android 編輯9圖檔,Android .9.png圖檔的處理

可以看出,邊框非常的清晰。下圖是未使用.9.png的對比圖,而且也不是我們要的效果:

android 編輯9圖檔,Android .9.png圖檔的處理

到這裡為止,我們已經基本會制作.9.PNG圖檔了。為了知識體系的全面性和深入性,我們繼續。

(2)定義内容區域:

是不是覺得文字和邊距挨的太近,好,我們使用right和bottom邊的線來定義内容區域,來達到增大内邊距的目的。

android 編輯9圖檔,Android .9.png圖檔的處理

我們定義了一個很小的内容區域,其他的地方則自動充當邊框,進而使内邊距顯的很大,如下圖:

android 編輯9圖檔,Android .9.png圖檔的處理

在這裡,我要特别說明,一開始為了增大内邊距,很容易慣性思維,在中申明android:padding="10dip" 之類的,我在這裡勸告朋友們不要這麼做,一是你将無法預知你的顯示,二是這比較混淆,因為設定内容區域就是确定padding,是以我在前面部分說他們是神似。我個人認為通過内容區域設定padding比在布局xml中定義padding更優雅,更簡潔!

關于Draw9Patch工具的其他使用說明,我在次不再累述,因為要說的話太多,為了節省篇幅,請參考官方文檔。

(3)制作.9.PNG的進階技巧

對于初學Draw9Patch的人來說,這可以算是進階技巧,那就是:拉伸區域,可以不是連續的,可以不止一塊,而且是和自定義的邊框線的長度成正比。

直接上圖說明:

android 編輯9圖檔,Android .9.png圖檔的處理

(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檔案是沒有黑線的。