Android-JAVA之9.png圖檔的處理

9.png圖檔的處理

 1. PNG格式。

      在這裡不過多的讨論PNG格式的定義問題。但是.9.PNG确實是标準的PNG格式，隻是在最外面一圈額外增加1px的邊框，這個1px的邊框就是用來定義圖檔中可擴充的和靜态不變的區域。特别說明，left和top邊框中交叉部分是可拉伸部分，未選中部分是靜态區域部分。right和bottom邊框中交叉部分則是内容部分（變相的相當于定義看一個内邊距，神似padding功能，後面我會單獨介紹一下），這個參數是可選的, 如下圖。

在Android中以9.PNG格式的圖檔未背景，則能夠自定義拉伸而不失真，比如系統的Button就是一個典型的例子。 

其實呢，無論是left和top，還是right和bottom都是把圖檔分成9塊 (邊角四塊是不能縮放的，其他的四塊則是允許縮放的)，是以叫做9.PNG。

2. 使用Draw9Patch.jar制作9.PNG圖檔之定義拉伸區域。

前面已經了解到9.PNG格式的工作方式，下面我們使用谷歌提供的Draw9Patch(運作android-sdk-windows\tools目錄下的Draw9Patch.bat)來制作.9.PNG圖檔。

第一步：準備要拉伸的圖檔。

非常小的一張圖檔，我希望以此為背景，中間部分填充文章内容。

第二步：制作.9.PNG圖檔。

打開Draw9Patch,把圖檔拖進去，如下：

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

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

第三步：在layout檔案中使用制作的 .9.PNG圖檔.

建立工程Draw9Patch，預設主Activity為Draw9PatchActivity.java:

?

1 2 3 4 5 6

@Override public void onCreate(Bundle savedInstanceState) { super .onCreate(savedInstanceState); setContentView(R.layout.main); }

我們把content.9.png檔案拷貝到/res/drawable檔案夾下，打開/res/layout目錄下的main.xml，申明如下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<? xml version = "1.0" encoding = "utf-8" ?> < LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android" android:orientation = "vertical" android:layout_width = "fill_parent" android:layout_height = "fill_parent" android:background = "#777" android:padding = "8dip" > < TextView android:layout_width = "fill_parent" android:layout_height = "wrap_content" android:text = "正文:A NinePatchDrawable graphic is a stretchable bitmap image." android:background = "@drawable/content" android:textColor = "#000" /> </ LinearLayout >

如圖，

我們修改text，

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<? xml version = "1.0" encoding = "utf-8" ?> < LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android" android:orientation = "vertical" android:layout_width = "fill_parent" android:layout_height = "fill_parent" android:background = "#777" android:padding = "8dip" > < 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 border." android:background = "@drawable/content" android:textColor = "#000" /> </ LinearLayout >

如圖，

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

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

3.使用Draw9Patch.jar制作9.PNG圖檔之定義内容區域。

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

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

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

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

4.制作.9.PNG的進階技巧。

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

直接上圖說明：

5.SDK中如何處理9.PNG圖檔。

SDK專門針對9.PNG做了定義和處理，這裡我們隻是做個簡單的流程分析，Bitmap在讀取圖像流資料的時候，會把判斷圖檔的NinePatchChunk(9Patch資料塊)，如果NinePatchChunk不為空，則是NinePatchDrawable，NinePatchDrawable則又會交給NinePatch處理：

?

1 2 3

setNinePatchState( new NinePatchState( new NinePatch(bitmap, bitmap.getNinePatchChunk(),  "XML 9-patch" ), padding, dither), r);

NinePatch檢驗成功則調用本地方法，繪制出最終的圖檔：

?

1 2 3

nativeDraw(canvas.mNativeCanvas, location, mBitmap.ni(), mChunk, paint !=  null ? paint.mNativePaint :  , canvas.mDensity, mBitmap.mDensity);

6.android系統中大量應用了9.PNG圖檔。

通過解壓随便一個rom，找到裡面的framework_res.apk,裡面有大量的9.PNG格式檔案，被廣泛的應用起來，比如常見的有：

按鈕：

解鎖：

下拉框：

标題欄：

Toast：

還有搜尋，鍵盤，放大縮小控件，時間加減等等，我就不一一列舉。

7.最後送上一些圖例，以飨讀者，以做後鑒：

賞圖1 本人之作

賞圖2 下拉按鈕

賞圖3 文章頭部背景 

賞圖4 系統頭部背景

轉載:http://blog.csdn.net/luckily01/article/details/7622398