Android Dersleri 3 - TableLayout

3 - Table Layout

https://developer.android.com/guide/topics/ui/layout/grid.html

TableLayout is a ViewGroup that displays child View elements in rows and columns.( TableLayout, bir çeşit ViewGroup'dur. TableLayout'da child view element'ler satır ve sütunlarda gösterilirler. Örneğin aşağıdaki gibi bir layout oluşturabiliriz, geniş olan hücreler span edilmiş sütunlardır, yani birleştirilmiş sütunlardır.)

TableLayout positions its children into rows and columns. TableLayout containers do not display border lines for their rows, columns, or cells. The table will have as many columns as the row with the most cells. A table can leave cells empty. Cells can span multiple columns, as they can in HTML. You can span columns by using the span field in the TableRow.LayoutParams class.

Note: Cells cannot span multiple rows.

 ( TableLayout'da, Children'lar row'lara ve column'lara koyulurlar, örneğin 1.satır 1.sütuna bir textview koyarız, 1.satır 2.sütuna buton koyarız,2.satır 1.sütuna horizontal linear layout koyarız,2.satır 2.sütuna edittext koyarız. TableLayout'daki hücrelere View veya ViewGroup koyabiliriz. TableLayout'ın satır, sütun ve hücrelerinin sınır çizgileri ekranda gösterilmez, gözükmez.

         Bir TableLayout'da 5 tane satır var diyelim.

1.satır için, 3 tane sütuna view element koyalım.

2.satır için, 6 tane sütuna view element koyalım.

3.satır için, 2 tane sütuna view element koyalım.

4.satır için, 1 tane sütuna view element koyalım.

5.satır için, 2 tane sütuna view element koyalım.

Sonuç olarak, bu TableLayout 5 satır X 6 sütundan oluşur, yani toplamda 30 tane hücre vardır. Hangi satırda en fazla sütun varsa, tüm satırlarda aynı sayıda sütun vardır.

         Span etmediğimiz tüm hücrelerin genişliği ve uzunluğu eşittir. 2 veya daha fazla sütunu span edebiliriz yani birleştirebiliriz, böylece daha geniş bir hücre elde edebiliriz. Sütunları span edebilmemize karşın, satırları span edemeyiz yani birleştiremeyiz.

         Table'daki bazı hücreler boş olabilir. Yukarıdaki örnekte, 1. satırda 3 boş sütun, 3.satırda 4 boş sütun, 4.satırda 5 boş sütun, 6.satırda 4 boş sütun vardır. )

       TableRow objects are the child views of a TableLayout (each TableRow defines a single row in the table). Each row has zero or more cells, each of which is defined by any kind of other View. So, the cells of a row may be composed of a variety of View objects, like ImageView or TextView objects. A cell may also be a ViewGroup object (for example, you can nest another TableLayout as a cell).( TableLayout'un çocukları kimdir? TableRow'dur. Table'daki herbir single satır'ı temsil eder TableRow element. Herbir satırda(TableRow'da) 0 veya daha fazla hücre vardır, bu hücrelerde herhangi bir çeşit View/ViewGroup olabilir. Bir hücreye bir TableLayout bile koyabiliriz. )

         The following sample layout has two rows and two cells in each. The accompanying screenshot shows the result, with cell borders displayed as dotted lines (added for visual effect).

<?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:stretchColumns="1">     <TableRow>         <TextView             android:text="@string/table_layout_4_open"             android:padding="3dip" />         <TextView             android:text="@string/table_layout_4_open_shortcut"             android:gravity="right"             android:padding="3dip" />     </TableRow>     <TableRow>         <TextView             android:text="@string/table_layout_4_save"             android:padding="3dip" />         <TextView             android:text="@string/table_layout_4_save_shortcut"             android:gravity="right"             android:padding="3dip" />     </TableRow> </TableLayout>

Columns can be hidden, marked to stretch and fill the available screen space, or can be marked as shrinkable to force the column to shrink until the table fits the screen. See the TableLayout reference documentation for more details.

Example

---

1.    Start a new project named HelloTableLayout.

2.    Open the res/layout/main.xml file and insert the following:

<?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:stretchColumns="1">



    <TableRow>

        <TextView

            android:layout_column="1"

            android:text="Open..."

            android:padding="3dip" />

        <TextView

            android:text="Ctrl-O"

            android:gravity="right"

            android:padding="3dip" />

    </TableRow>



    <TableRow>

        <TextView

            android:layout_column="1"

            android:text="Save..."

            android:padding="3dip" />

        <TextView

            android:text="Ctrl-S"

            android:gravity="right"

            android:padding="3dip" />

    </TableRow>



    <TableRow>

        <TextView

            android:layout_column="1"

            android:text="Save As..."

            android:padding="3dip" />

        <TextView

            android:text="Ctrl-Shift-S"

            android:gravity="right"

            android:padding="3dip" />

    </TableRow>



    <View

        android:layout_height="2dip"

        android:background="#FF909090" />



    <TableRow>

        <TextView

            android:text="X"

            android:padding="3dip" />

        <TextView

            android:text="Import..."

            android:padding="3dip" />

    </TableRow>



    <TableRow>

        <TextView

            android:text="X"

            android:padding="3dip" />

        <TextView

            android:text="Export..."

            android:padding="3dip" />

        <TextView

            android:text="Ctrl-E"

            android:gravity="right"

            android:padding="3dip" />

    </TableRow>



    <View

        android:layout_height="2dip"

        android:background="#FF909090" />



    <TableRow>

        <TextView

            android:layout_column="1"

            android:text="Quit"

            android:padding="3dip" />

    </TableRow>

</TableLayout>

Notice how this resembles the structure of an HTML table. The TableLayout element is like the HTML <table> element; TableRow is like a ><tr>>element; but for the cells, you can use any kind of View element. In this example, a TextView is used for each cell. In between some of the rows, there is also a basic View, which is used to draw a horizontal line.

3.    Make sure your HelloTableLayout Activity loads this layout in the onCreate() method:

public void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    setContentView(R.layout.main);

}

The setContentView(int) method loads the layout file for the Activity, specified by the resource ID — R.layout.main refers to theres/layout/main.xml layout file.

4.    Run the application.

You should see the following:

https://www.mkyong.com/android/android-tablelayout-example/

http://androidexample.com/Table_Layout_-_Android_Example/index.php?view=article_discription&aid=74