27 February 2021
Разметка TableLayout размещает виджеты в строки и столбцы — в виде таблицы. Границы таблицы не отображаются, таблица используется не для представления данных, а сугубо для размещения виджетов.
Таблица может иметь строки с разным количеством ячеек. Для формирования строк таблицы разметки используются объекты TableRow. Каждый такой объект — это одна строка таблицы. В строке может не быть вообще ячеек, может быть одна или несколько ячеек. В свою очередь ячейка может быть объектом класса ViewGroup, другими словами, ячейка допускает разметку. Другими словами, в ячейку таблицы вы можете поместить объект LinearLayout и с его помощью разместить элементы внутри ячейки. Также можно использовать другой TableLayout как элемент ячейки: получится вложенная таблица.
Сейчас мы продемонстрируем использование табличной разметки на примере создания клавиатуры для простейшего калькулятора. Создайте новый проект или откройте наш простой проект, разработанный в главе 2. Перейдите к редактору разметки (для этого откройте в структуре проекта файл /res/layout/activity_main.xml и дважды щелкните на нем). Далее перейдите на вкладку activity_main.xml и удалите из XML-файла все, кроме элемента <?xml>.
Затем создайте разметку — для этого в группе Layouts выберите TableLayout. В эту разметку нужно добавить четыре элемента TableRow. Для каждого элемента TableRow нужно установить следующие атрибуты:
Для этого щелкните на элементе правой кнопкой и из меню выберите нужный атрибут и установите нужное значение, как показано на рис. 1. Свойство (атрибут) Gravity, установка которого показана на рис. 1, устанавливает выравнивание элемента в контейнере, мы устанавливаем выравнивание по центру.
Рис. 1. Установка значения атрибута
Далее в каждую строку (в каждый контейнер TableRow) нужно добавить по четыре кнопки (кнопки находятся в группе Form Widgets). Ширину каждой кнопки нужно установить в 20pt, но это значение зависит от типа платформы Android и от размера экрана. На рис. 2 представлена наша клавиатура. Обратите внимание на иерархию графического интерфейса (вкладка Outline). Для большего удобства я сделал отдельный снимок экрана (рис. 3)
Рис. 2. Созданная клавиатура калькулятора
Рис. 3. Вкладка Outline
В XML-файле разметка TableLayout будет объявлена так:
<TableLayout xmlns:android="https://schemas.android.com/apk/res/android"
android:id="@+id/TableLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
Наша клавиатура смотрится некрасиво только потому, что она расположена не по центру экрана. Чтобы она была размещена по центру экрана (по горизонтали и по вертикали), установите атрибут Gravity для TableLayout (для dkws.org.ua). В итоге в файле разметки TableLayout будет объявлена так:
<TableLayout xmlns:android="https://schemas.android.com/apk/res/android"
android:id="@+id/TableLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center">
На экране это будет выглядеть так, как показано на рис. 4.
Рис. 4. Клавиатура размещена по центру экрана мобильного устройства
Полный код XML-файла разметки клавиатуры калькулятора представлен в листинге 1.
Листинг 1. Полный код XML-файла разметки клавиатуры калькулятора
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="https://schemas.android.com/apk/res/android"
android:id="@+id/TableLayout01"
android:layout_width="fill_parent"
android:gravity="center"
android:layout_height="fill_parent">
<TableRow
android:id="@+id/TableRow01"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:gravity="center">
<Button
android:id="@+id/Button01"
android:layout_height="wrap_content"
android:text="1"
android:layout_width="20pt"/>
<Button
android:id="@+id/Button02"
android:layout_height="wrap_content"
android:text="2"
android:layout_width="20pt"/>
<Button
android:id="@+id/Button03"
android:layout_height="wrap_content"
android:text="3"
android:layout_width="20pt"/>
<Button
android:id="@+id/ButtonPlus"
android:layout_height="wrap_content"
android:text="+"
android:layout_width="20pt"/>
</TableRow>
<TableRow
android:id="@+id/TableRow02"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:gravity="center">
<Button
android:id="@+id/Button04"
android:layout_height="wrap_content"
android:layout_width="20pt"
android:text="4"/>
<Button
android:id="@+id/Button05"
android:layout_height="wrap_content"
android:layout_width="20pt"
android:text="5"/>
<Button
android:id="@+id/Button06"
android:layout_height="wrap_content"
android:layout_width="20pt"
android:text="6"/>
<Button
android:id="@+id/ButtonMinus"
android:layout_height="wrap_content"
android:text="-"
android:layout_width="20pt"/>
</TableRow>
<TableRow
android:id="@+id/TableRow03"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:gravity="center">
<Button
android:id="@+id/Button07"
android:layout_height="wrap_content"
android:layout_width="20pt"
android:text="7"/>
<Button
android:id="@+id/Button08"
android:layout_height="wrap_content"
android:layout_width="20pt"
android:text="8"/>
<Button
android:id="@+id/Button09"
android:layout_height="wrap_content"
android:layout_width="20pt"
android:text="9"/>
<Button
android:id="@+id/ButtonDivide"
android:layout_height="wrap_content"
android:text="/"
android:layout_width="20pt"/>
</TableRow>
<TableRow
android:id="@+id/TableRow04"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:gravity="center">
<Button
android:id="@+id/Button10"
android:layout_height="wrap_content"
android:layout_width="20pt"
android:text="."/>
<Button
android:id="@+id/Button11"
android:layout_height="wrap_content"
android:layout_width="20pt"
android:text="0"/>
<Button
android:id="@+id/Button12"
android:layout_height="wrap_content"
android:layout_width="20pt"
android:text="="/>
<Button
android:id="@+id/ButtonMul"
android:layout_height="wrap_content"
android:text="*"
android:layout_width="20pt"/>
</TableRow>
</TableLayout>
Когда вы вникните в структуру XML-файла, вы обнаружите, что редактировать разметку интерфейса вручную даже проще, чем использовать интерфейс Eclipse. Во всяком случае, создать разметку для Android-приложения вручную не сложнее, чем создать HTML-страницу. Я предпочитаю создавать разметку вручную, а устанавливать некоторые свойства — с помощью редактора разметки — не всегда удается запомнить все необходимые свойства и их значения.
Этот тип разметки впервые появился в Android 4 и очень похож на TableLayout. В новых проектах, адаптируемых под новые платформы (4.х) рекомендуется использовать именно этот тип разметки. Разметка относится к классу android.widget.GridLayout и имеет колонки, ряды, клетки как в TableLayout, но при этом элементы могут гибко настраиваться. Получается, что новый тип разметки гораздо удобнее TableLayout.
Чтобы попробовать GridLayout на практике, давайте воссоздадим с его помощью клавиатуру нашего калькулятора. Посмотрите, насколько элегантнее стал код (листинг 2). Сравните его с кодом из листинга 4.3.
Листинг 2. Клавиатура калькулятора с использованием GridLayout
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="https://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:columnCount="4"
android:orientation="horizontal" >
<Button android:text="1" />
<Button android:text="2" />
<Button android:text="3" />
<Button android:text="+" />
<Button android:text="4" />
<Button android:text="5" />
<Button android:text="6" />
<Button android:text="-" />
<Button android:text="7" />
<Button android:text="8" />
<Button android:text="9" />
<Button android:text="/" />
<Button android:text="." />
<Button android:text="0" />
<Button android:text="=" />
<Button android:text="*" />
Результат разметки изображен на рис. 5.
Рис. 5. Клавиатура калькулятора с использованием GridLayout
Обратите внимание: мы просто указали, сколько у нас будет столбцов (android:columnCount="4"), а потом просто перечислили элементы, которые нужно поместить в столбцы.
Но это слишком тривиальный пример. С помощью GridLayout можно создавать и более сложные варианты разметки. Посмотрите на листинге 3.
Листинг 3. Более сложная клавиатура калькулятора
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="https://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:columnCount="4"
android:orientation="horizontal" >
<Button
android:layout_column="3"
android:text="*" />
<Button android:text="1" />
<Button android:text="2" />
<Button android:text="3" />
<Button android:text="/" />
<Button android:text="4" />
<Button android:text="5" />
<Button android:text="6" />
<Button android:text="-" />
<Button android:text="7" />
<Button android:text="8" />
<Button android:text="9" />
<Button
android:layout_rowSpan="3"
android:text="+" />
<Button
android:layout_columnSpan="2"
android:text="0" />
<Button android:text="^2" />
<Button
android:layout_columnSpan="3"
android:text="=" />
</GridLayout>
Результат изображен на рис. 6. С помощью TableLayout организовать что-либо подобное тоже можно, но код будет более громоздким.
Рис. 6. Сложная клавиатура калькулятора