Обзор контейнера TableLayout в Android и пример использования

Контейнер TableLayout в Android предназначен для организации внутренней иерархии виджетов в виде строк и столбцов. Элемент этого контейнера используется для построения строки в таблице. Каждая строка имеет 0 или больше ячеек и каждая ячейка может содержать один объект View.

Атрибуты контейнера TableLayout

android:id — уникальный идентификатор, с помощью которого можно работать с контейнером.
Атрибут android:stretchColumns. С помощью него мы можем растянуть ширину столбца. Индексы столбцов начинаются с нуля и должны быть разделены запятой, например: 1, 2, 5. Также мы можем указать звездочку '*' в качестве значения, чтобы растянуть все колонки. Пример: мы хотим вставить по одному виджету в трех строках контейнера TableLayout и сделать так, чтобы они занимали всю ширину своей строки. Для этого нам нужно всего лишь добавить атрибут android:stretchColumns со значением «*».
android:collapseColumns. С помощью него мы можем сделать столбец невидимым. Для этого нужно указать один или несколько разделенных запятыми столбцов. Индексы столбцов начинаются с нуля и должны быть разделены запятой, например: 1, 2, 5. Эти столбцы являются частью таблицы, но не видны.
Атрибут android:layout_column используется для определения столбца, в который должен быть помещен объект View. По умолчанию любой View помещается в первом неиспользованном столбце.
Атрибут android:layout_span используется если объект View должен занимать более одного столбца. Например, если у нас есть строка с тремя элементами и каждый элемент имеет android:layout_span=»2″, то вы будете иметь по крайней мере шесть столбцов в таблице.

Пример использования TableLayout в Android

Для начала создадим новый Android проект. Также Вы можете использовать свой, уже существующий проект: Вам нужно будет просто добавить в него файлы ниже:

Теперь создадим макет:

<?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="*">

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

        <EditText
            android:id="@+id/et_login"
            android:hint="Введите свой логин"
            android:inputType="text" />
    </TableRow>

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

        <EditText
            android:id="@+id/et_password"
            android:hint="Введите свой пароль"
            android:inputType="textPassword" />
    </TableRow>

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

        <Button
            android:id="@+id/btn_submit"
            android:text="Отправить" />
    </TableRow>
</TableLayout>

<?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="*">

<TableRow

android:layout_width="match_parent"

android:layout_height="match_parent">

<EditText

android:id="@+id/et_login"

android:hint="Введите свой логин"

android:inputType="text" />

</TableRow>

<TableRow

android:layout_width="match_parent"

android:layout_height="match_parent">

<EditText

android:id="@+id/et_password"

android:hint="Введите свой пароль"

android:inputType="textPassword" />

</TableRow>

<TableRow

android:layout_width="match_parent"

android:layout_height="wrap_content">

<Button

android:id="@+id/btn_submit"

android:text="Отправить" />

</TableRow>

</TableLayout>

Как видите, у нас элементарная табличка с полями для ввода логина/пароля и кнопки-подтверждения, которые имитируют простую форму ввода. Для этого нам понадобилось 3 виджета TableRow и корневой TableLayout с указанием растягивать содержимое на всю ширину строки (android:stretchColumns=»*»).

На превью это будет смотреться так:

Теперь в классе TableActivity попробуем программно создать все то, что мы сейчас описали в макете:

public class TableActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // при создании объекта View всегда передаем контекст в которм мы его создаем
        TableLayout containerTableLayout = new TableLayout(this);
        // создаем три растянутые на всю ширину строки
        TableRow tableRow1 = new TableRow(this);
        TableRow tableRow2 = new TableRow(this);
        TableRow tableRow3 = new TableRow(this);

        // TableLayout - наследник LinearLayout, поэтому используем настройку
        // родительских параметров для ширины и высоты контейнера
        containerTableLayout.setLayoutParams(new TableLayout.LayoutParams(
                LinearLayout.LayoutParams.MATCH_PARENT,
                LinearLayout.LayoutParams.WRAP_CONTENT
        ));
        // растягиваем все столбцы с помощью
        // программного аналога android:stretchColumns="*"
        containerTableLayout.setStretchAllColumns(true);

        // создаем поле для логина
        EditText editTextLogin = new EditText(this);
        editTextLogin.setHint("Введите свой логин");

        // создаем поле для пароля
        EditText editTextPassword = new EditText(this);
        editTextPassword.setHint("Введите свой пароль");

        // создаем кнопку подтверждения
        Button buttonSend = new Button(this);
        buttonSend.setText("Отправить");

        // теперь можем добавить нашпи поля и кнопку
        // на свои строки в таблице
        tableRow1.addView(editTextLogin);
        tableRow2.addView(editTextPassword);
        tableRow3.addView(buttonSend);

        // добавляем строки в таблицу
        containerTableLayout.addView(tableRow1);
        containerTableLayout.addView(tableRow2);
        containerTableLayout.addView(tableRow3);

        setContentView(containerTableLayout);
    }
}

public class TableActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

// при создании объекта View всегда передаем контекст в которм мы его создаем

TableLayout containerTableLayout = new TableLayout(this);

// создаем три растянутые на всю ширину строки

TableRow tableRow1 = new TableRow(this);

TableRow tableRow2 = new TableRow(this);

TableRow tableRow3 = new TableRow(this);

// TableLayout - наследник LinearLayout, поэтому используем настройку

// родительских параметров для ширины и высоты контейнера

containerTableLayout.setLayoutParams(new TableLayout.LayoutParams(

LinearLayout.LayoutParams.MATCH_PARENT,

LinearLayout.LayoutParams.WRAP_CONTENT

));

// растягиваем все столбцы с помощью

// программного аналога android:stretchColumns="*"

containerTableLayout.setStretchAllColumns(true);

// создаем поле для логина

EditText editTextLogin = new EditText(this);

editTextLogin.setHint("Введите свой логин");

// создаем поле для пароля

EditText editTextPassword = new EditText(this);

editTextPassword.setHint("Введите свой пароль");

// создаем кнопку подтверждения

Button buttonSend = new Button(this);

buttonSend.setText("Отправить");

// теперь можем добавить нашпи поля и кнопку

// на свои строки в таблице

tableRow1.addView(editTextLogin);

tableRow2.addView(editTextPassword);

tableRow3.addView(buttonSend);

// добавляем строки в таблицу

containerTableLayout.addView(tableRow1);

containerTableLayout.addView(tableRow2);

containerTableLayout.addView(tableRow3);

setContentView(containerTableLayout);

}

Обратите внимание, что мы могли добавить обработчики событий, идентификаторы для объектов View и многое другое, однако наша задача в этой статье — познакомиться с контейнером TableLayout. Если хотите, попрактикуйтесь сами и добавьте слушатели на Button или всплывающие сообщения Toast.

Теперь запустим наш программно генерированный контейнер TableLayout на устройстве и увидим следующее: