207 阿裏雲技術社區[雲棲]

製作.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:

@Override

public


void

onCreate(Bundle savedInstanceState)

{

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

}

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

<?xmlversion="1.0"encoding="utf-8"?>

<LinearLayoutxmlns:android="https://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，

<?xmlversion="1.0"encoding="utf-8"?>

<LinearLayoutxmlns:android="https://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處理：

setNinePatchState(newNinePatchState(

new

NinePatch(bitmap, bitmap.getNinePatchChunk(),

"XML 9-patch"),

padding, dither), r);

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

nativeDraw(canvas.mNativeCanvas, location,

mBitmap.ni(), mChunk, paint !=null ? paint.mNativePaint :0,

canvas.mDensity, mBitmap.mDensity);

6.android係統中大量應用了9.PNG圖片。
通過解壓隨便一個rom，找到裏麵的framework_res.apk,裏麵有大量的9.PNG格式文件，被廣泛的應用起來，比如常見的有：
按鈕：
解鎖：
下拉框：
標題欄：
Toast：
還有搜索，鍵盤，放大縮小控件，時間加減等等，我就不一一列舉。