[Android]Android Layout元件

Android的介面中,最外部都是以Layout的元件包覆著

而Layout元件基本上分為五種:LinearLayout、AbsoluteLayout、RelativeLayout、TableLayout、FrameLayout

由於AbsoluteLayout官方已證實該類別已過時,建議改用RelativeLayout或FrameLayout,所以就不多做說明

1.LinearLayout
LinearLayout是線性排列,主要分為垂直跟水平(由上往下或由左往右),是一般最基本使用的Layout

可以透過android:orientation設定:
vertical為垂直
horizontal為水平

範例:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >
	
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello"
         />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Tom"
         />
</LinearLayout>

2.RelativeLayout
RelativeLayout可以讓底下子元件任意的定義在想要的位置(如果沒定義所有元件都會塞在一起)

以下為幾個重要屬性:

  • android:layout_above:將元件定義於指定元件(元件id)上方
  • android:layout_below:將元件定義於指定元件(元件id)下方
  • android:layout_toLeftOf:將元件定義於指定元件(元件id)左方
  • android:layout_toRightOf:將元件定義於指定元件(元件id)右方
  • android:layout_alignParentTop:將元件對齊Layout最上方(TRUE、FALSE)
  • android:layout_alignParentRight:元件對齊Layout最右方(TRUE、FALSE)
  • android:layout_alignParentLeft:元件對齊Layout最左方(TRUE、FALSE)
  • android:layout_alignParentBottom:元件對齊Layout最下方(TRUE、FALSE)

範例:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
	
    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello"
        android:layout_alignParentBottom="true"
         />
    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Tom"
        android:layout_above="@+id/text1"
         />
</RelativeLayout>

3.TableLayout
只要是介面,一定都會需要用到表格,TableLayout顧名思義就是表格的Layout,透過TableRow元件來決定列數(被TableRow所包覆的元件,在Tablelayout中會被標記成一列,而一個元件就是一欄)

表格當中,會需要做合併欄位的功能,可以從TableRow的android:layout_span屬性設定(包括本身欄位也要算進去)

範例:

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
	<TableRow>
	    <TextView
	        android:id="@+id/text1"
	        android:layout_width="wrap_content"
	        android:layout_height="wrap_content"
	        android:text="Hello"
	         />
	    <TextView
	        android:id="@+id/text2"
	        android:layout_width="wrap_content"
	        android:layout_height="wrap_content"
	        android:text="Tom"
	         />
   	</TableRow>
   	<TableRow>
	    <TextView
	        android:id="@+id/text3"
	        android:layout_width="wrap_content"
	        android:layout_height="wrap_content"
	        android:text="HaHaHa"
	        android:layout_span="2"
	         />
   	</TableRow>
</TableLayout>

4.FrameLayout
FrameLayout可以讓元件堆疊(類似圖層的功能)

範例(Button蓋在TextView上方):

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
	
    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="HAHAHAHAHAHAHA"
         />
    <Button
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Tom"
         />
</FrameLayout>

[Eclipse]Eclipse Color Themes

[jQuery]Tablesorter