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" />