Компоновка TableLayout

Компоновка TableLayout позиционирует свои дочерние элементы в строки и столбцы. TableLayout не отображает линии обрамления для их строк, столбцов или ячеек. Кроме того, TableLayout может иметь строки с разным количеством ячеек. При формировании компоновки таблицы некоторые ячейки при необходимости можно оставлять пустыми.
При создании компоновки для строк используются объекты TableRow, которые являются дочерними классами TableLayout (каждый TableRow определяет единственную строку
в таблице). Строка может совсем не иметь ячеек или иметь одну и более ячеек, которые
являются контейнерами для других объектов View или ViewGroup. Ячейка может также быть объектом ViewGroup (например, допускается вложить другой TableLayout или LinearLayout как ячейку).
Для примера с использованием компоновки TableLayout можно создать окно, похожее на наборную панель телефона с 12 кнопками. В окне Layout Editor создайте TableLayout c четырьмя дочерними TableRow и двенадцатью кнопками, по три кнопки в каждой строке.
Для каждого элемента TableRow на вкладке Properties задайте свойства:

• Layout height — wrap_content;
• Layout width — wrap_content;
• Gravity — center.

Свойство gravity задает выравнивание дочерних элементов в контейнере, в данном случае — по центру.
Для каждой кнопки на вкладке Properties задайте свойства:

• Layout height — wrap_content;
• Layout width — 70dp. Это фиксированная ширина элемента в dp (density-independent pixels) — независимые от плотности экрана пиксели. Подробнее о них поговорим в следующих уроках.

Надписи на кнопках сделайте так, как на телефонной клавиатуре (1, 2, 3, 4, 5, 6, 7, 8, 9, *, 0, #).
Файл компоновки должен получиться таким:

activity_main.xml

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/TableLayout01" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:gravity="center"> 
    <TableRow 
        android:id="@+id/TableRow01" 
        android:layout_height="wrap_content" 
        android:layout_width="wrap_content" 
        android:gravity="center"> 
        <Button 
            android:id="@+id/Button01" 
            android:layout_height="wrap_content" 
            android:text="1" 
            android:layout_width="70dp"/> 
        <Button 
            android:id="@+id/Button02" 
            android:layout_height="wrap_content" 
            android:text="2" 
            android:layout_width="70dp"/> 
        <Button 
            android:id="@+id/Button03" 
            android:layout_height="wrap_content" 
            android:text="3" 
            android:layout_width="70dp"/> 
    </TableRow> 
    <TableRow 
        android:id="@+id/TableRow02" 
        android:layout_height="wrap_content" 
        android:layout_width="wrap_content" 
        android:gravity="center"> 
        <Button 
            android:id="@+id/Button04" 
            android:layout_height="wrap_content" 
            android:layout_width="70dp" 
            android:text="4"/> 
        <Button 
            android:id="@+id/Button05" 
            android:layout_height="wrap_content" 
            android:layout_width="70dp" 
            android:text="5"/> 
        <Button 
            android:id="@+id/Button06" 
            android:layout_height="wrap_content" 
            android:layout_width="70dp" 
            android:text="6"/> 
    </TableRow> 
    <TableRow 
        android:id="@+id/TableRow03" 
        android:layout_height="wrap_content" 
        android:layout_width="wrap_content" 
        android:gravity="center"> 
        <Button 
            android:id="@+id/Button07" 
            android:layout_height="wrap_content" 
            android:layout_width="70dp" 
            android:text="7"/> 
        <Button 
            android:id="@+id/Button08" 
            android:layout_height="wrap_content" 
            android:layout_width="70dp" 
            android:text="8"/> 
        <Button 
            android:id="@+id/Button09" 
            android:layout_height="wrap_content" 
            android:layout_width="70dp" 
            android:text="9"/> 
    </TableRow> 
    <TableRow 
        android:id="@+id/TableRow04" 
        android:layout_height="wrap_content" 
        android:layout_width="wrap_content" 
        android:gravity="center"> 
        <Button 
            android:id="@+id/Button10" 
            android:layout_height="wrap_content" 
            android:layout_width="70dp" 
            android:text="*"/> 
        <Button 
            android:id="@+id/Button11" 
            android:layout_height="wrap_content" 
            android:layout_width="70dp" 
            android:text="0"/> 
        <Button 
            android:id="@+id/Button12" 
            android:layout_height="wrap_content" 
            android:layout_width="70dp" 
            android:text="#"/> 
    </TableRow> 
</TableLayout>

В результате внешний вид экрана должен получиться в виде телефонной клавиатуры:

Компоновка TableLayout на практике применяется довольно редко, обычно вместо нее используют сочетание компоновок LinearLayout или GridLayout, которая будет рассмотрена далее. Компоновку TableLayout удобно использовать, если расположение элементов представлено в виде "таблицы", как в нашем примере. Кроме того, существует компоновка GridLayout, которая внешне аналогична TableLayout, но имеет дополнительные возможности. Ее мы рассмотрим в следующем уроке.