Android筆記(5)：使用者界面UI與Layout設計(下)

Photo by Daniel Romero on Unsplash

[表格佈局 TableLayout]

表格佈局 TableLayout 與常見的表格類似，以 TableRow 來隔開每一列，每個 TableRow 又可以包含好幾個元件，整個 TableLayout 會以最多元件個數，來當作最大的欄位數，讓所有列的欄位都有相同的欄數。而放進 TableRow 裡的元件大小，由 TableLayout 決定無法自行設定。也可以使用 android:layout_span 方法來讓某一元件跨越欄數。列可以被設定為隱藏，也可以被設定為伸展，或是為了充分利用螢幕空間設定為強制收縮，直到表格匹配螢幕大小。TableLayout 在 XML 檔內設定格式的語法使用<TableLayout>為起始標記，</TableLayout> 為結束標記，範例如下：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout 
  <!--第一行-->
  <TableRow>
     ...TableLayout屬性設定，或增加元件
  </TableRow>
  <!--第二行-->
  <TableRow>
     ...TableLayout屬性設定，或增加元件
  </TableRow>
</TableLayout>

常用的 TableLayout 屬性，除了上述可用於佈局的屬性以外，還有以下幾個屬性：

屬性	說明
layout_column	設定在 TableLayout 中的第幾欄開始顯示，從 0 開始。
layout_span	設定要合併的欄位數，從 0 開始。
collapseColumns	設定需要被隱藏的列的列序號，從 0 開始。
stretchColumnsy	設定允許被拉伸的列的列序號，從 0 開始。
shrinkColumns	設定允許被收縮的列的列序號，從 0 開始。

以下就用一個範例，說明 layout_column 及 layout_span 的用法。

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tableLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <!-- 用 TableRow 定義一個列 -->
    <TableRow
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5sp" >
        <TextView
            android:textSize="20sp"
            android:text="第1欄" />
        <Button
            android:textSize="20sp"
            android:text="第2欄" />
    </TableRow>

    <!-- 將按鈕延伸 2個欄位寬  -->
    <TableRow
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5sp" >
        <Button
            android:textSize="20sp"
            android:layout_span="2"
            android:text="第1,2欄" />
        <Button
            android:textSize="20sp"
            android:text="第3欄" />
    </TableRow>

    <!-- 這列有 3個欄位 -->
    <TableRow
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5sp" >
        
        <Button
            android:textSize="20sp"
            android:text="第1欄" />        
        <TextView
            android:textSize="20sp" 
            android:text="第2欄" />
        <Button
            android:textSize="20sp"
            android:text="第3欄" />
    </TableRow>

    <!-- layout_columnun=1 表示從第2欄開始 -->
    <TableRow
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5sp" >

        <Button
            android:layout_column="1"
            android:textSize="20sp"
            android:text="第2欄" />
    </TableRow>
</TableLayout>

執行的結果如下圖左，右方圖是網格佈局 GridLayout 的執行結果。

[網格佈局 GridLayout]

網格佈局 GridLayout 是在 Android 4.0 版本中提出的，在網格佈局中，螢幕被虛擬的細線劃分成行、列和儲存格，每個儲存格放置一個元件，並且這個元件也可以跨行或跨列擺放。網格佈局與表格佈局有些類似，都可以列跟欄的形式放入元件，兩者最大的不同就是網格佈局可以跨行顯示元件，而表格佈局則無法跨行顯示。

常用的 GridLayout 屬性，除了上述可用於佈局的屬性以外，還有以下幾個屬性：

XML屬性	描述
columnCount	設定網格的最大列數。
rowCount	設定網格的最大行數。
orientation	當沒有為放入其中的組件分配行和列時，指定其排列方式。其屬性值為horizontal 表示水準排列；屬性值為vertical 表示垂直排列。
useDefaultMargins	設定是否使用預設的邊距，其屬性值設置為 true 時，表示使用預設；反之為 false。
alignmentMode	設定佈局採用的對齊模式，屬性值為 alignBounds 表示對齊邊界；值為 alignMargins 表示對齊邊距，預設值為alignMargins。
rowOrderPreserved	設定行邊界顯示的順序和行索引的順序是否相同，其屬性值為 true，表示相同，反之為 false。
columnOrderPreserved	設定為 true 使列邊界顯示的順序和列索引的順序相同。預設是true。反之為 false。

XML屬性	描述
layout_column	指定元件要放在網格的第幾列。
layout_columnSpan	指定元件橫向跨幾列（從 0 開始）。
layout_columnWeight	指定該元件在水準方向的權重，即該元件分配水準剩餘空間的比例。
layout_gravity	指定元件使用何種方式在網格上顯示，請參考上述 LinearLayout 一節的描述。
layout_row	指定元件位於網格的第幾行（從 0 開始）。
layout_rowSpan	指定元件縱向跨幾行。
layout_rowWeight	指定元件在垂直方向上的權重，即該元件分配垂直剩餘空間的比例。

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:columnCount="3"
    android:orientation="horizontal" >
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="3" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="4" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="5" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="6" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="7" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="8" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="9" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="0" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="-" />
</GridLayout>

Android筆記(5)：使用者界面UI與Layout設計(下)

[表格佈局 TableLayout]

[網格佈局 GridLayout]

[參考資料]

Post a Comment

張貼留言

聯絡表單