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>