Android表格布局(Table Layout)

Android表格布局(Table Layout)html

 

先来看布局管理器之间继承关系图:android


图1布局

可知TableLayout继承了LinearLayout,因此表格布局本质上依然是线性管理器。spa

 

表格布局采用行、列的形式来管理组件,它并不须要明确地声明包含了多少行、多少列,而是经过添加TableRow、其余组件来控制表格的行数和列数。code

 

每向TableLayout添加一个TableRow,该TableRow就是一个表格行,TableRow也是容器,所以它也能够不断地添加组件,每添加一个子组件该表格就添加一列。xml

 

TableLayout通常如下面两种方式实现:htm

(1)  本身做为最顶层父容器blog

<!--定义一个TableLayout,有两行
   第1列全部单元格的宽度能够被收缩,以保证该表格能适应父容器的宽度
   第2列全部单元格的宽度能够拉伸,以保证能彻底填满表格空余空间-->
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/TableLayout1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:shrinkColumns="1"
    android:stretchColumns="2">
   
   <!--这是此TableLayout的第1行,没有使用TableRow,直接添加一个Button,那么次Button本身占用整行 -->
   <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="独自一行的按钮1"/>
   
   <!-- 这是第2行,先添加一个TableRow,并为TableRow添加三个Button,也就是此行包含三列 -->
   <TableRow>
        <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="普通按钮1"/>
       
        <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="被收缩的按钮1"/>
       
        <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="被拉伸的按钮1"/>
   </TableRow>
   
   <!--这是此TableLayout的第3行,没有使用TableRow,直接添加一个Button,那么次Button本身占用整行 -->
   <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="独自一行的按钮2"/>
   
   <!-- 这是第4行,先添加一个TableRow,并为TableRow添加三个Button,也就是此行包含三列 -->
   <TableRow>
        <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="普通按钮2"/>
       
        <Button
        android:id="@+id/button7"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="被收缩的按钮2"/>
       
        <Button
        android:id="@+id/button8"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="被拉伸的按钮2"/>
   </TableRow>
   
</TableLayout>


效果以下:继承


图2ip

这里只有一个TableLayout,若是咱们想单独控制地4行,好比想把“普通按钮2”隐藏,也就是增长android:collapseColumns="0",这样会把“普通按钮1”,这一列也隐藏了,以下图:


图3

但若是要实现只“普通按钮2”这列,咱们来看下面的实现

 

(2)  LinearLayout做为TableLayout的容器

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">-->
 
<!--定义第1个TableLayout,有两行
   第1列全部单元格的宽度能够被收缩,以保证该表格能适应父容器的宽度
   第2列全部单元格的宽度能够拉伸,以保证能彻底填满表格空余空间-->
<TableLayout
    android:id="@+id/TableLayout1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:shrinkColumns="1"
    android:stretchColumns="2">
   
   <!--这是此TableLayout的第1行,没有使用TableRow,直接添加一个Button,那么次Button本身占用整行 -->
   <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="独自一行的按钮1"/>
   
   <!-- 这是第2行,先添加一个TableRow,并为TableRow添加三个Button,也就是此行包含三列 -->
   <TableRow>
        <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="普通按钮1"/>
       
        <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="被收缩的按钮1"/>
       
        <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="被拉伸的按钮1"/>
   </TableRow>
   
   
   
</TableLayout>
<!--定义第2个TableLayout,有两行
   第1列全部单元格的宽度能够被收缩,以保证该表格能适应父容器的宽度
   第2列全部单元格的宽度能够拉伸,以保证能彻底填满表格空余空间-->
<TableLayout
    android:id="@+id/TableLayout2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:collapseColumns="0"
    android:shrinkColumns="1"
    android:stretchColumns="2">
   
   <!--这是此TableLayout的第3行,没有使用TableRow,直接添加一个Button,那么次Button本身占用整行 -->
   <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="独自一行的按钮2"/>
   
   <!-- 这是第4行,先添加一个TableRow,并为TableRow添加三个Button,也就是此行包含三列 -->
   <TableRow>
        <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="普通按钮2"/>
       
        <Button
        android:id="@+id/button7"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="被收缩的按钮2"/>
       
        <Button
        android:id="@+id/button8"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="被拉伸的按钮2"/>
   </TableRow>
   
   </TableLayout>
  
</LinearLayout>


效果以下:


图4

 

经过在第2个TableLayout中增长android:collapseColumns="0"实现,这里须要主要的是LinearLayout的android:orientation属性值的设置,若是没有这一项或是其值为horizontal,那么后面两行都看不到,由于是以水平方向排列的,后面两行显示在前两行的右边,看不到。

相关文章
相关标签/搜索