Android UI進階之可延伸的圖像

今天來講下Android UI設計中常要用到的可延伸圖像。除了最基本的png，jpg與gif三種格式外，android還有一種叫做Nine-Patch的可延伸圖像.9.png。和png格式不同的是，他會隨著屬性物的大小變化而改變自己的大小，從而來適應屬性物的大小。這個特點，在我們平常的UI設計中是非常實用的。最常見的一個圖片做按鈕背景，來適配字體大小，這時候，你會發現，這種可延伸圖像非常的好用。

下面就來講講如何使用吧。Android SDK提供了一個工具來制造這種圖像。在android sdk的tools目錄下，有個draw9patch.bat的文件，就是他啦。運行它，將我們的圖片拖進去，就會得到如下的樣子。

左邊窗口的是原始圖形，你可以通過畫面下的Zoom來調整大小，Pathc scale調整png圖像最大可以延伸的倍率，延伸後的結果就顯示在右邊的窗口。在一個像素裡點擊，在圖形邊緣繪制線條來定義可延伸的部分。在這邊需要注意的是，你必須至少在圖形的上邊緣和左邊緣畫線，否則將圖片導入後工程會報錯。調整好以後，點擊File -save，注意需要保存為*.9.png格式。在程序中的使用和普通圖片完全一樣，這就不講了。

來看下例子

給出xml中的代碼，其中popup為9.png格式，popup1為普通png格式

[xhtml]

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:orientation="vertical"  
4.     android:layout_width="fill_parent"  
5.     android:layout_height="fill_parent"  
6.     android:background="#C5CCD4FF"  
7.     >  
8. <Button  
9.     android:id="@+id/small"  
10.     android:layout_width="wrap_content"  
11.     android:layout_height="wrap_content"  
12.     android:text="Small"  
13.     android:textSize="10sp"  
14.     android:textColor="#ffffffff"  
15.     android:background="@drawable/popup1"  
16.     />  
17. <Button  
18.     android:id="@+id/large"  
19.     android:layout_width="wrap_content"  
20.     android:layout_height="wrap_content"  
21.     android:text="LargeNotFit"  
22.     android:textSize="40sp"  
23.     android:textColor="#ffffffff"  
24.     android:background="@drawable/popup1"  
25.     />  
26. <Button  
27.     android:id="@+id/largefit"  
28.     android:layout_width="wrap_content"  
29.     android:layout_height="wrap_content"  
30.     android:text="LargeFit"  
31.     android:textSize="40sp"  
32.     android:textColor="#ffffffff"  
33.     android:background="@drawable/popup"  
34.     />  
35. </LinearLayout>  

看下運行的效果 

合理的使用Nine—Patch圖像，在UI設計中是非常重要的。相信大家都能體會到。