Android : Table Layout

Conteneur dont les éléments enfants sont disposés sous forme de tableau. Les vues enfants sont des objets TableRow définissant chacun une ligne du tableau. Les éléments enfants des objets TableRow sont les cellules du tableau. 

À noter : 

• ces tableaux ne disposent pas, à proprement parler, de colonnes, comme il en existe en HTML.
• TableLayout n'affiche pas de lignes de bordure pour leurs lignes, colonnes ou cellules.

Attributes Table Layout:

Vous utiliserez l'élément <tablerow> pour créer une ligne dans le tableau. Chaque ligne à zéro ou plusieurs cellules; chaque cellule peut contenir un objet. 

• id : l'ID qui identifie de manière unique la mise en page.
• layout_column : L'index de la colonne dans laquelle cet vue enfant doit être.
• stretchColumns : Index de base zéro des colonnes à étirer. Les indices des colonnes doivent être séparés par une virgule: 2,3, 6.
• shrinkColumns : Index de base zéro des colonnes à rétrécir. Les indices des colonnes doivent être séparés par une virgule: 2, 3, 6.
• collapseColumns : l’index basé sur zéro des colonnes à réduire. Les indices des colonnes doivent être séparés par une virgule: 2, 3, 6.

Exemple Table Layout :

Les exemples suivants vous guidera à travers des étapes simples pour montrer comment créer votre propre application Android à l'aide de la disposition (Table Layout). Suivez les étapes suivantes pour créer votre application Android. 

Exemple 1 : Dans le fichier : res/layout/activity_main.xml

Table Layout

<?xml version="1.0" encoding="utf-8"?>
<TableLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin">

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="7"
            android:id="@+id/button7"
            android:layout_column="0" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="8"
            android:id="@+id/button8"
            android:layout_column="1" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="9"
            android:id="@+id/button9"
            android:layout_column="2"
            android:layout_weight="1" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="4"
            android:id="@+id/button4"
            android:layout_column="0"
            android:layout_weight="0" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="5"
            android:id="@+id/button5"
            android:layout_column="1"
            android:layout_weight="1" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="6"
            android:id="@+id/button6"
            android:layout_column="2"
            android:layout_weight="0" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1"
            android:id="@+id/button1"
            android:layout_column="0"
            android:layout_weight="1" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2"
            android:id="@+id/button2"
            android:layout_column="1"
            android:layout_weight="0" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="3"
            android:id="@+id/button3"
            android:layout_column="2"
            android:layout_weight="1" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="0"
            android:id="@+id/button0"
            android:layout_column="0"
            android:layout_span="3"
            android:layout_weight="1"
            android:paddingTop="100dp"
            android:textSize="50sp" />
    </TableRow>
</TableLayout>

Vidéo d'Exemple Table Layout :