.Net程序员玩转Android开发---(8)表格布局TableLayout

               表格布局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>