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

2022-05-01 20:05:49

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

码农公寓

1.属性介绍

2.商品列表演示样例

相关文章