Разметка Android-приложения

TableLayout

Разметка TableLayout размещает виджеты в строки и столбцы — в виде таблицы. Границы таблицы не отображаются, таблица используется не для представления данных, а сугубо для размещения виджетов.

Таблица может иметь строки с разным количеством ячеек. Для формирования строк таблицы разметки используются объекты TableRow. Каждый такой объект — это одна строка таблицы. В строке может не быть вообще ячеек, может быть одна или несколько ячеек. В свою очередь ячейка может быть объектом класса ViewGroup, другими словами, ячейка допускает разметку. Другими словами, в ячейку таблицы вы можете поместить объект LinearLayout и с его помощью разместить элементы внутри ячейки. Также можно использовать другой TableLayout как элемент ячейки: получится вложенная таблица.

Сейчас мы продемонстрируем использование табличной разметки на примере создания клавиатуры для простейшего калькулятора. Создайте новый проект или откройте наш простой проект, разработанный в главе 2. Перейдите к редактору разметки (для этого откройте в структуре проекта файл /res/layout/activity_main.xml и дважды щелкните на нем). Далее перейдите на вкладку activity_main.xml и удалите из XML-файла все, кроме элемента <?xml>.

Затем создайте разметку — для этого в группе Layouts выберите TableLayout. В эту разметку нужно добавить четыре элемента TableRow. Для каждого элемента TableRow нужно установить следующие атрибуты:

Gravity = center;
Layout width = fill_parent;
Layout height = wrap_content.

Для этого щелкните на элементе правой кнопкой и из меню выберите нужный атрибут и установите нужное значение, как показано на рис. 1. Свойство (атрибут) Gravity, установка которого показана на рис. 1, устанавливает выравнивание элемента в контейнере, мы устанавливаем выравнивание по центру.

www.dkws.org.ua

Рис. 1. Установка значения атрибута

Далее в каждую строку (в каждый контейнер TableRow) нужно добавить по четыре кнопки (кнопки находятся в группе Form Widgets). Ширину каждой кнопки нужно установить в 20pt, но это значение зависит от типа платформы Android и от размера экрана. На рис. 2 представлена наша клавиатура. Обратите внимание на иерархию графического интерфейса (вкладка Outline). Для большего удобства я сделал отдельный снимок экрана (рис. 3)

www.dkws.org.ua

Рис. 2. Созданная клавиатура калькулятора

www.dkws.org.ua

Рис. 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-страницу. Я предпочитаю создавать разметку вручную, а устанавливать некоторые свойства — с помощью редактора разметки — не всегда удается запомнить все необходимые свойства и их значения.

GridLayout

Этот тип разметки впервые появился в 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" >

Результат разметки изображен на рис. 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:layout_rowSpan="3"

android:text="+" />

<Button

android:layout_columnSpan="2"

android:text="0" />

<Button

android:layout_columnSpan="3"

android:text="=" />

</GridLayout>

Результат изображен на рис. 6. С помощью TableLayout организовать что-либо подобное тоже можно, но код будет более громоздким.

Рис. 6. Сложная клавиатура калькулятора