TableLayout 和 GridLayout 的区别

太过爱你忘了你带给我的痛 2024-04-18 18:57 21阅读 0赞

## TableLayout 和 GridLayout 的区别 ##

*  TableLayout 和 GridLayout 的区别
    
     *  一. TableLayout
     *  二. GridLayout
        
         *  2.1 隔行/列的效果
     *  三. 总结

## 一. TableLayout ##

*  **继承LinearLayout**
 *  **不需要明确的申明包含多少行多少列**
 *  **通过添加 TableRow / 其他组件 来控制表格的行数和列数**
 *  **单元格设置格式有3种：Shrinkable（可收缩）,Stretchable（可拉伸），Collapsed（隐藏的）**

运用TableLayout只能通过添加TableRow或者组件来增加行和列。当直接添加组件的时候，组件独自占用一行。当添加TableRow时，该布局增加了一行，并且在TableRow里每添加一个组件，便增加一列。

> TableLayout无法做出跨行跨列的效果，每行每列都是挨着的，就算是单元格设置Collapsed属性，如果后面有组件，也会填充上来。

<TableLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/table01" android:shrinkColumns="1" android:collapseColumns="2" android:stretchColumns="3">
    
    
               <Button android:id="@+id/ok1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="独自一行的按钮ok1"/>
    
    
    
            <TableRow>
                <Button android:id="@+id/ok2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="普通按钮"/>
                <Button android:id="@+id/ok3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="shrink收缩按钮"/>
                <Button android:id="@+id/ok4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="collapsed隐藏按钮"/>
                <Button android:id="@+id/ok5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="stretch拉伸按钮"/>
    
            </TableRow>
        </TableLayout>

效果如下图：  
![TableRow效果图][TableRow]

> 可以看出：  
> \- **隐藏的按钮不会空着，会被后面的组件填上去**  
> \- **收缩会使该列宽度可以被收缩，以保证该table能适应父容器的宽度**  
> \- **拉伸可以使该列的所有单元格宽度可以被拉伸，以保证组件能完全填满表格空余空间**

## 二. GridLayout ##

*  **Android4.0之后新加的布局管理器**
 *  **能够把整个容器划分为rows\*columns的网格，每个网格可以放置一个组件**
 *  **可以设置一个组件横跨多少列或者纵跨多少行**
 *  **当单元格大小大于组件大小时，可以通过设置layout\_grativity属性值，设置组件在单元格里的位置**
 *  **通过设置layout\_columnWeight/layout\_rowWeight属性值，可以设置各个组件的大小比例**

### 2.1 隔行/列的效果 ###

方法1.设置margin等属性值  
方法2.让组件占两列或者两行，设置layout\_grativity为left/right  
代码如下：

<?xml version="1.0" encoding="utf-8"?>
    <GridLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:rowCount="6" android:columnCount="4" android:id="@+id/root">
    
        <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_columnSpan="4" android:textSize="50sp" android:layout_marginLeft="2pt" android:layout_marginRight="2pt" android:padding="3pt" android:gravity="right" android:layout_gravity="right" android:background="#eee" android:textColor="#000" android:text="0" />
    
        <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_columnSpan="4" android:text="Clear" android:textSize="30sp"/>
    
        <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_column="0" android:layout_row="2" android:layout_rowSpan="2" android:layout_gravity="fill" android:layout_marginRight="10pt" android:text="1" android:textSize="40dp" />
        <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_columnSpan="2" android:layout_gravity="left" android:text="2" android:textSize="40dp" />
    
        <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="3" android:textSize="40dp" />
        <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_columnSpan="2" android:layout_gravity="left" android:text="4" android:textSize="40dp" />
        <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="5" android:textSize="40dp" />
    
        <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_column="1" android:layout_row="4" android:layout_columnSpan="2" android:layout_gravity="left" android:text="6" android:textSize="40dp" />
        <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="7" android:textSize="40dp" />
    </GridLayout>

效果图：  
![GridLayout效果图][GridLayout]

## 三. 总结 ##

1.  TableLayout可以通过设置layout\_margin参数做出隔行隔列的效果，GridLayout不仅可以通过layout\_margin，还可以利用rowSpan/columnSpan合并单元格以及设置layout\_grativity来达成效果。这第二种方法的效果更好。
2.  TableLayout不能跨行跨列，不灵活，GridLayout能够更好实现隔行/隔列效果也是因为这个特点。
3.  不能同时向水平和垂直方向做控件的对齐  
    TableLayout继承了LinearLayout,因此只能向一个方向做控件的对齐。.

[TableRow]: https://img-blog.csdn.net/20180818174223135?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5MjY3Nw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[GridLayout]: https://img-blog.csdn.net/20180818232905500?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5MjY3Nw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70