表格布局TableLayout是Android中比较常用的一个布局控件,既然是表格,肯定有行和列,TableLayout中的行有TableRow组成,列根据每行控件的数量来确定
假如第一行有3个控件,第2行有4个控件,那么这个表格的列数就去最大列数,即4列。
1.属性介绍
表格有以下几个重要属性
android:shrinkColumns="2" 自动收缩的列,多个列用逗号隔开,自动收缩的意思是如果该列的内容超出了表格列的宽度,自动向下显示
android:stretchColumns="1" 自动伸缩列,多个列用逗号隔开,如果表格中所有列,都没有占满表格宽度,该列自动伸缩。
android:collapseColumns 隐藏指定的列,多个列用逗号隔开
android:layout_column="1" 用来设置该表格中控件所在的列数,
android:layout_span 用来设置表格中控件所占的列数
- <?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="2"
- android:stretchColumns="1"
- >
- <TableRow
- android:id="@+id/tableRow1"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content" >
- <TextView
- android:id="@+id/textView1"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="标签1"
- android:background="#FF82AB"
- />
- <TextView
- android:id="@+id/textView2"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="标签2"
- android:background="#EE6A50"
- />
- <TextView
- android:id="@+id/textView3"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="我是自动伸缩列,内容过多,自动向下伸缩"
- android:background="#B3EE3A"
- />
- </TableRow>
- <TableRow
- android:id="@+id/tableRow1"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content" >
- <TextView
- android:id="@+id/textView4"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="标签4"
- android:background="#FF82AB"
- />
- <TextView
- android:id="@+id/textView5"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="自动伸张"
- android:background="#EE6A50"
- />
- <TextView
- android:id="@+id/textView6"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="标签6"
- android:background="#B3EE3A"
- />
- </TableRow>
- </TableLayout>
2.商品列表示例
下面我们用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" >
- <TableRow
- android:id="@+id/tableRow1"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content" >
- <TableLayout
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- >
- <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content" >
- <ImageView android:layout_width="100dp" android:layout_height="100dp" android:src="@raw/pad" />
- </TableRow>
- </TableLayout>
- <TableLayout
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- >
- <TableRow
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- >
- <TableLayout android:layout_width="match_parent" android:layout_height="fill_parent" >
- <TableRow android:layout_height="match_parent" >
- <TextView
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="商品名称:IPAD AIR"
- android:layout_margin="10dp"
- />
- </TableRow>
- <TableRow android:layout_height="match_parent" > <TextView
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="商品价格:$99"
- android:layout_margin="10dp"
- />
- </TableRow>
- <TableRow android:layout_height="match_parent" >
- <TextView
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="商品颜色:白色"
- android:layout_margin="10dp"
- />
- </TableRow>
- </TableLayout>
- </TableRow>
- </TableLayout>
- </TableRow>
- <TableRow
- android:id="@+id/tableRow2"
- android:layout_width="fill_parent"
- android:layout_height="5dp"
- android:background="#EEE8CD"
- >
- <TextView
- android:layout_width="fill_parent"
- android:layout_height="3dp"
- android:background="#EEE8CD"
- />
- </TableRow>
- <TableRow
- android:id="@+id/tableRow1"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content" >
- <TableLayout
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- >
- <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content" >
- <ImageView android:layout_width="100dp" android:layout_height="100dp" android:src="@raw/pad" />
- </TableRow>
- </TableLayout>
- <TableLayout
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- >
- <TableRow
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- >
- <TableLayout android:layout_width="match_parent" android:layout_height="fill_parent" >
- <TableRow android:layout_height="match_parent" >
- <TextView
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="商品名称:IPAD AIR"
- android:layout_margin="10dp"
- />
- </TableRow>
- <TableRow android:layout_height="match_parent" > <TextView
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="商品价格:$99"
- android:layout_margin="10dp"
- />
- </TableRow>
- <TableRow android:layout_height="match_parent" >
- <TextView
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="商品颜色:白色"
- android:layout_margin="10dp"
- />
- </TableRow>
- </TableLayout>
- </TableRow>
- </TableLayout>
- </TableRow>
- <TableRow
- android:id="@+id/tableRow2"
- android:layout_width="fill_parent"
- android:layout_height="5dp"
- android:background="#EEE8CD"
- >
- <TextView
- android:layout_width="fill_parent"
- android:layout_height="3dp"
- android:background="#EEE8CD"
- />
- </TableRow>
- <TableRow
- android:id="@+id/tableRow1"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content" >
- <TableLayout
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- >
- <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content" >
- <ImageView android:layout_width="100dp" android:layout_height="100dp" android:src="@raw/pad" />
- </TableRow>
- </TableLayout>
- <TableLayout
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- >
- <TableRow
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- >
- <TableLayout android:layout_width="match_parent" android:layout_height="fill_parent" >
- <TableRow android:layout_height="match_parent" >
- <TextView
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="商品名称:IPAD AIR"
- android:layout_margin="10dp"
- />
- </TableRow>
- <TableRow android:layout_height="match_parent" > <TextView
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="商品价格:$99"
- android:layout_margin="10dp"
- />
- </TableRow>
- <TableRow android:layout_height="match_parent" >
- <TextView
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="商品颜色:白色"
- android:layout_margin="10dp"
- />
- </TableRow>
- </TableLayout>
- </TableRow>
- </TableLayout>
- </TableRow>
- <TableRow
- android:id="@+id/tableRow2"
- android:layout_width="fill_parent"
- android:layout_height="5dp"
- android:background="#EEE8CD"
- >
- <TextView
- android:layout_width="fill_parent"
- android:layout_height="3dp"
- android:background="#EEE8CD"
- />
- </TableRow>
- </TableLayout>