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"?><br /><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"<br /> android:orientation="vertical"<br /> android:layout_width="fill_parent"<br /> android:layout_height="fill_parent"<br /> android:background="#C5CCD4FF"<br /> ><br /><Button<br />android:id="@+id/small"<br />android:layout_width="wrap_content"<br />android:layout_height="wrap_content"<br />android:text="Small"<br />android:textSize="10sp"<br />android:textColor="#ffffffff"<br />android:background="@drawable/popup1"<br />/><br /><Button<br />android:id="@+id/large"<br />android:layout_width="wrap_content"<br />android:layout_height="wrap_content"<br />android:text="LargeNotFit"<br />android:textSize="40sp"<br />android:textColor="#ffffffff"<br />android:background="@drawable/popup1"<br />/><br /><Button<br />android:id="@+id/largefit"<br />android:layout_width="wrap_content"<br />android:layout_height="wrap_content"<br />android:text="LargeFit"<br />android:textSize="40sp"<br />android:textColor="#ffffffff"<br />android:background="@drawable/popup"<br />/><br /></LinearLayout><br /> 

看下啟動並執行效果

 

 

 

合理的使用Nine—Patch映像，在UI設計中是非常重要的。相信大家都能體會到。今天就到這啦，吃年夜飯去啦。