Android 介面設計簡介
在上一章我們曾經談到， Android 平台的視覺化介面是使用 XML 的方式設計的，然而上一章我們只做了一個簡單的 HelloWorld 的表單，在本章、我們將介紹如何利用常用的元件設計出較實用的表單，並展示每個常用視覺元件的用途。
Android 當中的視覺化界面元件，可分為『容器』與『非容器』兩類，容器類繼承 ViewGroup 物件，非容器類則從 View 衍生出來，如下圖所示。
這些 Layout 可以套疊式的組成一棵元件樹，其中、父節點的 Layout 與子節點的 LayoutParams 之間有控制關系，舉例而言、若父節點是 RelativeLayout，則子節點的元件中可以指定 RelativeLayout.LayoutParams 中的屬性，以控制子節點在父節點中的排列狀況，如下圖所示：
各種排版元件 – Layout
容器類物件中專們用來排版者，稱為 Layout，以下是 Android 中 Layout 物件的列表：
FrameLayout
Android 中的 FrameLayout 與 Java Swing 中的 FrameLayout 完全不同，Android 中的 FrameLayout 代表只能放入單一視覺元件的容器，與 Swing 中區分『上、下、左、右、中』的 FrameLayout 完全是兩回事。
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Hello World, FrameLayoutTest"
/>
</FrameLayout>
AbsoluteLayout
<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<EditText id="@+id/title_edit"
android:layout_x = "10px"
android:layout_y = "10px"
android:layout_width="200px"
android:layout_height="wrap_content"/>
<Button id="@+id/buttton"
android:layout_x = "220px"
android:layout_y = "10px"
android:text="Send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:layout_x = "10px"
android:layout_y = "50px"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Hello World, AbsoluteLayoutTest"/>
</AbsoluteLayout>
LinearLayout
<?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"
>
<EditText id="@+id/title_edit"
android:layout_width="200px"
android:layout_height="wrap_content"/>
<Button id="@+id/buttton"
android:text="Send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Hello World, AbsoluteLayoutTest"/>
</LinearLayout>
RelativeLayout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dip">
<TextView id="@+id/label"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Hello!"/>
<EditText id="@+id/entry"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@id/label"/>
<Button id="@+id/ok"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/entry"
android:layout_alignParentRight="true"
android:layout_marginLeft="10dip"
android:text="OK" />
<Button id="@+id/entry"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeft="@id/ok"
android:layout_alignTop="@id/ok"
android:text="Cancel" />
</RelativeLayout>
TableLayout
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
id="@+id/table_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TableRow>
<Button id="@+id/button1" android:text="Button1" />
<Button id="@+id/button2" android:text="Button2" />
</TableRow>
<TableRow>
<Button id="@+id/button3" android:text="Button3"
android:layout_span="2"/>
</TableRow>
</TableLayout>
由於視覺化介面的物件屬性與 XML 標記的屬性並不是1對1對映的，因此、Android 的程式設計人原有必要學會看 Android SDK 當中的原始函式庫說明文件，文件中的説明大至按照傳統 Java 的格式，然而、其中與傳統 Java 最大的當屬 XML 屬性了，在附錄D中，我們以 TableRow 這個物件為例介紹其文件的編寫方式，以利讀者看懂這些說明文件，順利成為 Google Phone/Android 的高手。
推薦給同仁
您想要瞭解更多的免費小竅門以便提升你的網站排名嗎？
請馬上聯繫我們網站管理員:
MSN: chenlinwu@cmmail.com
Email: info@rank-ad.com
