Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android編程入門 >> .Net程序猿玩轉Android開發---(8)表格布局TableLayout

.Net程序猿玩轉Android開發---(8)表格布局TableLayout

編輯:Android編程入門

               表格布局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. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved