А TableLayout (табличный макет) представляет собой ViewGroup, который упорядочивает свои дочерние элементы, т. е. представления и другие макеты, в форме таблицы со строками и столбцами. Чтобы определить строку, вы можете использовать <TableRow> тег внутри этого макета.
Нет необходимости указывать количество столбцов в TableLayout, потому что Android автоматически добавляет столбцы в соответствии с количеством View и других макетов, добавленных в строку таблицы.
TableLayout: важные моменты, которые следует помнить
- Нет необходимости прописывать
layout_widthиlayout_heightдля TableRow, потому что по умолчанию его ширина равнаmatch_parentи высотаwrap_content. - Строка таблицы, в которой содержится максимальное количество View элементов, создается такое количество столбцов.
- Ширина столбца автоматически регулируется в зависимости от размера столбца с максимальной шириной.
Теперь давайте посмотрим на некоторые общие атрибуты, используемые в TableLayout.
| Атрибуты | Где он используется | Почему это используется |
|---|---|---|
android:stretchColumns | Макет таблицы | Когда ширина столбца меньше и вам нужно расширить (или растянуть) его, вы используете этот атрибут. |
android:shrinkColumns | Макет таблицы | Если вам не нужно дополнительное пространство в столбце, вы можете использовать этот атрибут для уменьшения и удаления пробела. |
android:collapseColumns | Макет таблицы | Он скрывает столбец данного индекса в TableLayout. |
android:layout_span | Любой вид внутри TableRow | Если представление занимает только одну ширину столбца, но вы хотите, чтобы ваше представление занимало более одного столбца, вы можете использовать этот атрибут. |
android:layout_column | Любое представление внутри TableRow | Если вы хотите, чтобы ваше представление, присутствующее в первом TableRow, отображалось под другим представлением TableRow, вы можете использовать этот атрибут. |
Определение TableLayout в макете XML
Теперь давайте разберемся, как мы можем определить TableLayout в макете XML и его вывод.
<?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:padding="16dp"
android:background="#FFFF00"
android:stretchColumns="*"
android:shrinkColumns="*">
<!-- first row -->
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:background="@color/colorAccent">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="NAME"
android:textAppearance="?android:attr/textAppearanceMedium"/>
<EditText
android:id="@+id/edtName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Enter you name"
android:inputType="textPersonName"/>
</TableRow>
<!-- second row -->
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:background="#0091EA">
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Password"
android:textAllCaps="true"
android:textAppearance="?android:attr/textAppearanceMedium"/>
<EditText
android:id="@+id/edtPwd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Enter your Password"
android:inputType="textPassword"/>
</TableRow>
<!-- third row -->
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:padding="16dp">
<Button
android:id="@+id/btnSubmit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="SUBMIT"/>
</TableRow>
</TableLayout>
Как вы можете видеть в файле XML, корневой элемент TableLayout. Следовательно, ваш макет будет иметь таблицу элементов, представленную в виде строк и столбцов.
Строки в макете таблицы определяются с помощью тега TableRow. Вы должны указать ширину ряда, а также высоту используя атрибуты layout_width и layout_height.
Затем, если вы хотите добавить новую строку в TableLayout, вы можете добавить новый тег TableRow и внутри него вы можете определить нужные компоненты и представления. Строка таблицы работает так же, как линейная горизонтальная компоновка, где компоненты располагаются рядом друг с другом.
Мы установили три свойства для TableLayout, а именно:
collapseColumns– это свойство определяет, какой столбец свернуть, т. е. скрыть столбцы указанного индекса.shrinkColumns– это свойство используется для сжатия столбца или нескольких столбцов путем предоставления значений indes для столбцов.stretchColumns– это свойство используется для растяжения столбцов.
Значение индекса начинается с 0, т.е. первый столбец будет иметь индекс 0 потом 1 и так далее.
Для всех этих трех свойств индексы столбцов могут отображаться как одно значение или, если вы хотите применить этот атрибут для нескольких столбцов, вы можете сделать это, используя запятую между индексами (например: 1,2,5). Вы также можете растянуть все столбцы, используя значение * вместо упоминания индексов столбцов.
Вы можете видеть, что в макете мы добавили первую строку с двумя компонентами — один из них отображает имя в виде метки, а другой запрашивает ввод имени от пользователя. Мы установили gravity для этой строки как центр, чтобы элементы располагались в центре экрана дисплея.
Точно так же мы добавили вторую строку с TextView для отображения пароля в виде метки и EditText для получения пароля от пользователя.
Третья строка содержит только одну кнопку «Отправить».