现在的位置: 首页 > 综合 > 正文

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

2017年11月08日 ⁄ 综合 ⁄ 共 6733字 ⁄ 字号 评论关闭

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



抱歉!评论已关闭.