Android學習第四天之表格佈局TableLayout

佈局篇之TableLayout：

一 功能：

        （1.1）TableLayout表格佈局模型以列的形式管理子控件，每一行爲一個TableRow的對象，當然也可以是一個View對象 。

        （1.2）想象一下整個佈局是一個大的表格，有很多行和列，很多的單元格，子元素都被放在一個一個的單元格中，單元格不能跨列，但可以空，列可以設置爲可伸展的，從而適應整個屏幕，但在實際中並不會顯示出這些“行“和”列"的線。一個TableLayout會擁有很多的TableRow（行）， 每一行又會有Column來定義列。

二 屬性：

（2.1）TableLayout表格佈局的屬性：

     android:collapseColumns="1,2"  隱藏從0開始的索引列，列直接必須用逗號隔開:1,2,5

     android:shrinkColumns="1,2"       收縮從0開始的索引列，當可收縮的列太寬（內容過多）不會被擠出屏幕，列直接必須用逗號隔開：1,2,5，你可以通過”*“代替收縮所有列，注      意一列能同時表示收縮和拉伸。

     android:stretchColumns="1,2"  拉伸從0開始的索引列，以填滿剩下的多餘的空白控件，列直接必須用逗號隔開：1,2,5，你可以通過”*“代替收縮所有列，注意一列能同時表示收      縮和拉伸。

（2.2）TableLayout的局部屬性（內部控件所使用屬性）

      android:layout_column = "1"  該控件顯示在第1列

      android:layout_span = "2"       該控件佔據2列

三：練習

 （3.1）android:collapseColumns="1,2"  隱藏從0開始的索引列，列直接必須用逗號隔開:1,2,5

如圖所示，此TableLayout有一行，有四列，形成了四個單元格，當然了這四個單元格不會顯示出來，在這四個單元格中添加了四個Button

 

XML代碼

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

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
        
        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="one" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="two" />

        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="three" />

        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="four" />

    </TableRow>

</TableLayout>

下面，我們使用android:collapseColumns讓第0列和第2列隱藏

XML代碼：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:collapseColumns="0,2">

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
        
        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="one" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="two" />

        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="three" />

        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="four" />

    </TableRow>

</TableLayout>

（3.2）練習android:shrinkColumns  可以看到第四個按鈕（屬於第三列）的內容超出了屏幕

這裏只列出第四個按鈕的XML，其餘的和第一個XML一樣

<Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="fourfourfourfourfourfourfour" />

現在使用android:shrinkColumns後的圖片

可以看出第三列（第四個Button在第三列中）的內容是可以縱向收縮的，不會超出屏幕，下面列出XML

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:shrinkColumns="3">

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
        
        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="one" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="two" />

        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="three" />

        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="fourfourfourfourfourfourfour" />

    </TableRow>

</TableLayout>

（3.3）練習android:stretchColumns

上圖XML文件

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

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
        
        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="one" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="two" />

        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="three" />

    </TableRow>

</TableLayout>

現在，要是想讓某一列佔滿剩餘空間，比如我們讓第一列（一共有第零，第一，第二  這三列）佔滿，如下圖所示

對應的XML

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="1">

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
        
        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="one" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="two" />

        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="three" />

    </TableRow>

</TableLayout>

當然也可以讓這三列都佔滿

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="*">

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
        
        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="one" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="two" />

        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="three" />

    </TableRow>

</TableLayout>

上面的android:stretchColumns="*"也可以寫成android:stretchColumns="0,1,2"

(3.4)練習 android:layout_column = "1"  該控件顯示在第1列

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="*">

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
        
        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="one" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="two" />

        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="three" />

    </TableRow>

    <TableRow
        android:id="@+id/tableRow2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button" />

        <Button
            android:id="@+id/button5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button" />

        <Button
            android:id="@+id/button6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button" />

    </TableRow>

</TableLayout>

如果我們要讓第one那個Button顯示在第1列（原來在第零列）

如下圖所示one在第一列，第0行的其他button會自動的向後移一列，所以整體上就會多出來一列

只需要在one按鈕加一句話，其他不變

one Button的XML文件

<Button
            android:id="@+id/button1"
            android:layout_column="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="one" />

（3.5） android:layout_span = "2"       該控件佔據2列

如下圖，我們讓第一個Button佔兩列

只需改變第一個Button的屬性值

<Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_span="2"
            android:layout_height="wrap_content"
            android:text="one" />