[Android開發學習24]介面布局之表格版面配置TableLayout+TableRow

一、基礎知識:

 

TableLayout置底，TableRow在TableLayout的上面,而Button、TextView等控制項就在TableRow之上，

另外，TableLayout之上也可以單獨放控制項。TableLayout是一個使用複雜的布局，最簡單的用法就僅

僅是拖拉控制項做出個介面，但實際上，會經常在代碼裡使用TableLayout，例如做出表格的效果。

 

android:collapseColumns：以第0行為序，隱藏指定的列
android:shrinkColumns：以第0行為序，自動延伸指定的列填充可用部分
android:stretchColumns：以第0行為序，盡量把指定的列填充空白部分

 

二、方案一代碼展示:

方案一採用xml布局，在代碼中除了顯示layout之外，未作任何布局相關的操作。

1."Acticity_06\src\yan\acticity_06\MainActivity.java"

[java]

package yan.activity_06; 
 
import android.os.Bundle; 
import android.app.Activity; 
 
public class MainActivity extends Activity { 
       
    @Override   
    public void onCreate(Bundle savedInstanceState) {   
        super.onCreate(savedInstanceState);   
        setContentView(R.layout.activity_main);   
    } 
} 

package yan.activity_06;

import android.os.Bundle;
import android.app.Activity;

public class MainActivity extends Activity {
     
    @Override 
    public void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.activity_main); 
    }
}
 

2."Activity_06\res\layout\activity_main.xml"

[html] 
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    tools:context=".MainActivity" 
    android:stretchColumns="0" > 
 <TableRow> 
        <TextView 
            android:text="第一行第一列" 
            android:background="#aa0000" 
            android:padding="3dip" /> 
        <TextView 
            android:text="第一行第二列" 
            android:padding="3dip" 
            android:gravity="center_horizontal" 
            android:background="#00aa00" 
            ></TextView> 
        <TextView 
            android:text="第一行第三列" 
            android:gravity="right" 
            android:background="#0000aa" 
            android:padding="3dip" /> 
    </TableRow> 
 
    <TableRow> 
        <TextView 
            android:text="第二行第一列" 
            android:padding="3dip" /> 
        <TextView 
            android:text="第二行第二列" 
            android:gravity="right" 
            android:padding="3dip" /> 
    </TableRow> 
     
    <TextView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="@string/hello_world" /> 
 
</TableLayout> 

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    tools:context=".MainActivity"
    android:stretchColumns="0" >
 <TableRow>
        <TextView
            android:text="第一行第一列"
            android:background="#aa0000"
            android:padding="3dip" />
        <TextView
         android:text="第一行第二列"
         android:padding="3dip"
         android:gravity="center_horizontal"
            android:background="#00aa00"
         ></TextView>
        <TextView
            android:text="第一行第三列"
            android:gravity="right"
            android:background="#0000aa"
            android:padding="3dip" />
    </TableRow>

    <TableRow>
        <TextView
            android:text="第二行第一列"
            android:padding="3dip" />
        <TextView
            android:text="第二行第二列"
            android:gravity="right"
            android:padding="3dip" />
    </TableRow>
   
    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/hello_world" />

</TableLayout>
 

三、方案二代碼展示:

方案二採用代碼布局，在layout檔案中除了顯示一個空的TabLayout之外，未作任何其它布局。

1."Acticity_06\src\yan\acticity_06\MainActivity.java"

[java]
package yan.activity_06; 
 
import android.os.Bundle; 
import android.view.ViewGroup; 
import android.widget.TableLayout; 
import android.widget.TableRow; 
import android.widget.TextView; 
import android.app.Activity; 
 
public class MainActivity extends Activity { 
    /** Called when the activity is first created. */   
    private final int WC = ViewGroup.LayoutParams.WRAP_CONTENT;   
    private final int FP = ViewGroup.LayoutParams.FILL_PARENT;   
       
    @Override   
    public void onCreate(Bundle savedInstanceState) {   
        super.onCreate(savedInstanceState);   
        setContentView(R.layout.activity_main);   
        //建立TableLayout01的執行個體     
        TableLayout tableLayout = (TableLayout)findViewById(R.id.TableLayout01);   
        //全部列自動填滿空白處     
        tableLayout.setStretchAllColumns(true);   
        //產生10行，8列的表格     
        for(int row=0;row<10;row++)   
        {   
            TableRow tableRow=new TableRow(this);   
            for(int col=0;col<8;col++)   
            {   
                //tv用於顯示     
                TextView tv=new TextView(this);   
                tv.setText("("+col+","+row+")");   
                tableRow.addView(tv);   
            }   
            //建立的TableRow添加到TableLayout     
            tableLayout.addView(tableRow, new TableLayout.LayoutParams(FP, WC));   
        }   
    } 
} 

package yan.activity_06;

import android.os.Bundle;
import android.view.ViewGroup;
import android.widget.TableLayout;
import android.widget.TableRow;
import android.widget.TextView;
import android.app.Activity;

public class MainActivity extends Activity {
 /** Called when the activity is first created. */ 
    private final int WC = ViewGroup.LayoutParams.WRAP_CONTENT; 
    private final int FP = ViewGroup.LayoutParams.FILL_PARENT; 
     
    @Override 
    public void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.activity_main); 
        //建立TableLayout01的執行個體  
        TableLayout tableLayout = (TableLayout)findViewById(R.id.TableLayout01); 
        //全部列自動填滿空白處  
        tableLayout.setStretchAllColumns(true); 
        //產生10行，8列的表格  
        for(int row=0;row<10;row++) 
        { 
            TableRow tableRow=new TableRow(this); 
            for(int col=0;col<8;col++) 
            { 
                //tv用於顯示  
                TextView tv=new TextView(this); 
                tv.setText("("+col+","+row+")"); 
                tableRow.addView(tv); 
            } 
            //建立的TableRow添加到TableLayout  
            tableLayout.addView(tableRow, new TableLayout.LayoutParams(FP, WC)); 
        } 
    }
}

2."Activity_06\res\layout\activity_main.xml"

[html]
<?xml version="1.0" encoding="utf-8"?>   
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"   
    android:orientation="vertical"   
    android:layout_width="fill_parent"   
    android:layout_height="fill_parent"   
    >   
     <TableLayout    
             android:id="@+id/TableLayout01"    
             android:layout_width="fill_parent"    
             android:layout_height="wrap_content">   
     </TableLayout>   
</LinearLayout>   

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    > 
     <TableLayout  
             android:id="@+id/TableLayout01"  
             android:layout_width="fill_parent"  
             android:layout_height="wrap_content"> 
     </TableLayout> 
</LinearLayout> 
 

 

 

三、效果展示:

1.方案一:

 

 

2.方案二: