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格式

<?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="#C5CCD4FF"
    >
<Button
    android:id="@+id/small"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Small"
    android:textSize="10sp"
    android:textColor="#ffffffff"
    android:background="@drawable/popup1"
    />
<Button
    android:id="@+id/large"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="LargeNotFit"
    android:textSize="40sp"
    android:textColor="#ffffffff"
    android:background="@drawable/popup1"
    />
<Button
    android:id="@+id/largefit"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="LargeFit"
    android:textSize="40sp"
    android:textColor="#ffffffff"
    android:background="@drawable/popup"
    />

</LinearLayout>

看下運行的效果

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