چیدن عناصر گرافیکی در فایل xml ، به صورت یک جدول (Table) و بر اساس ردیف ها (Rows) و ستون های (Columns) جدول، با استفاده از TableLayout در برنامه نویسی اندروید

نمی دانم تاکنون در زبان HTML ، با جدول ها (tables) کار کرده اید یا نه، ولی همان طور که در زبان HTML ، با استفاده از تگ table ، یک جدول می سازیم و سپس با تگ های tr و td برای آن، ردیف ها و خانه های جدید ایجاد می کنیم، در برنامه نویسی اندروید نیز با استفاده از عنصر TableLayout می توانیم یک لایه (layout) به شکل جدول (table) داشته باشیم و سپس با استفاده از عنصر TableRow می توانیم برای جدول، ردیف های جدید ایجاد کنیم و همچنین با مشخصه layout_column برای هر عنصر، می توانیم شماره ستون (column) آن را مشخص کنیم.

برای درک بهتر این موضوع، مثالی را از سایتی دیگر برایتان ذکر می کنم که با خواندن کدهای آن، شیوه ساختن یک جدول با استفاده از TableLayout و همچنین چگونگی چیدن عنصرهای مختلف در خانه های جدول را متوجه بشوید. کدهای فایل xml به صورت زیر می باشند :

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tableLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
 
    
    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dip" >
 
        <TextView
            android:id="@+id/textView1"
            android:text="Column 1"
            android:textAppearance="?android:attr/textAppearanceLarge" />
 
        <Button
            android:id="@+id/button1"
            android:text="Column 2" />
    </TableRow>
 
    
    <TableRow
        android:id="@+id/tableRow2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dip" >
 
        <EditText
            android:id="@+id/editText1"
            android:layout_span="2"
            android:text="Column 1 &amp; 2" />
    </TableRow>
 
    
    <View
        android:layout_height="2dip"
        android:background="#FF0000" />
 
    
    <TableRow
        android:id="@+id/tableRow3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dip" >
 
        <TextView
            android:id="@+id/textView2"
            android:text="Column 1"
            android:textAppearance="?android:attr/textAppearanceLarge" />
 
        <Button
            android:id="@+id/button2"
            android:text="Column 2" />
 
        <Button
            android:id="@+id/button3"
            android:text="Column 3" />
    </TableRow>
 
    
    <TableRow
        android:id="@+id/tableRow4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dip" >
 
        <Button
            android:id="@+id/button4"
            android:layout_column="2"
            android:text="Column 3" />
    </TableRow>
 
    
    <TableRow
        android:id="@+id/tableRow5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dip" >
 
        <Button
            android:id="@+id/button5"
            android:layout_column="1"
            android:text="Column 2" />
    </TableRow>
 
</TableLayout>

ظاهر گرافیکی فایل xml به صورت زیر می باشد (در برنامه eclipse) :