Создание простого интерфейса пользователя

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

Графический интерфейс пользователя в Android строится на основе дерева объектов типа View и ViewGroup. Объекты типа View – это обычные виджеты, такие как кнопки и поля ввода. Объекты типа ViewGroup это невидимые контейнеры, которые управляют расположением вложенных элементов, например в виде таблицы или вертикального списка.

Android предоставляет набор XML элементов, соответствующих наследникам View и ViewGroup, чтобы вы могли описывать интерфейс пользователя с помощью XML.

Объекты разметки (Layouts) являются наследниками класса ViewGroup. В данном уроке мы будем работать с линейной разметкой LinearLayout.

Рисунок 1.ViewGroup позволяет строить дерево объектов разметки.

Различная разметка

Создание разметки в XML файлах предпочтительнее, чем в исходном коде по нескольким причинам, но главным образом из-за необходимости создания различных файлов разметки для устройств с различными размерами экрана. К примеру, вы можете создать две версии разметки и заставить систему отображать одну из них на маленьких экранах, а другую на больших. Подробности читайте в разделе Поддержка устройств с различными экранами.

Создание линейной разметки (Linear Layout)

  1. В Android Studio откройте файл res/layout/activity_my.xml

    Шаблон BlankActivity, который вы выбрали при создании проекта включает в себя файл activity_my.xml, который содержит корневой элемент RelativeLayout с вложенным виджетом TextView.

  2. В окне предпросмотра щелкните по иконке Hide , чтобы скрыть окно.

    В Android Studio при открытии файла разметки по умолчанию открывается окно предпросмотра, которое содержит WYSIWYG редактор для создания интерфейса пользователя. Однако в данном уроке мы будем работать напрямую с XML файлом.

  3. Удалите элемент <TextView>.
  4. Измените элемент <RelativeLayout> на <LinearLayout>.
  5. Добавьте атрибут android:orientation и установите для него значение "horizontal".
  6. Удалите атрибуты android:padding и tools:context.

В результате разметка должна выглядеть так:

res/layout/activity_my.xml

LinearLayout является наследником класса ViewGroup и размещает вложенные элементы в вертикальном или горизонтальном порядке, в зависимости от значения атрибута android:orientation. Вложенные в LinearLayout элементы отображается на экране в том порядке, в котором они описаны в XML.

Все элементы разметки должны иметь атрибуты android:layout_width и android:layout_height, которые указывают на их размер.

Поскольку LinearLayout корневой элемент разметки, он должен быть растянут на весь экран. Для этого укажем значение атрибутов android:layout_width и android:layout_height равное "match_parent". Это означает, что ширина и высота элемента должна соответствовать ширине и высоте родительского элемента.

Подробную информацию о свойствах разметки читайте в разделе Разметка.

Добавление текстового поля

Как и для каждого объекта типа View, необходимо указать некоторые XML атрибуты, характерные для элемента EditText.

  1. В файле activity_my.xml, создайте внутри <LinearLayout> элемент <EditText> и укажите для него атрибут android:id со значением @+id/edit_message.
  2. Создайте атрибуты layout_width и layout_height со значением "wrap_content".
  3. Создайте атрибут hint и укажите в качестве значения строковый объект с названием edit_message.

В результате элемент <EditText> должен выглядеть следующим образом:

res/layout/activity_my.xml

Атрибуты элемента <EditText> означают следующее:

android:id

Этот атрибут задает уникальный идентификатор элемента, по которому вы можете ссылаться на объект из программного кода и работать с ним. (Как это делается вы узнаете в следующем уроке). Значок “@” требуется указывать, если вы ссылаетесь на какой-либо объект ресурса из XML. После значка идет тип ресурса (в данном примере id), затем имя ресурса после слэша (edit_message).

Значок “+” перед типом ресурса необходим только при первоначальном указании идентификатора. При компиляции приложения, SDK использует указанный идентификатор для создания переменной в файле gen/R.java. Эта переменная будет указывать на элемент EditText. После этого в указании значка “+” нет необходимости. Другими словами, значок “+” необходимо указывать только при создании нового идентификатора. Нет необходимости добавлять “+” при работе с существующими ресурсами, такими как строки или разметка.

android:layout_width и android:layout_height
Вместо указания конкретных размеров элемента, мы указали "wrap_content", что позволяет элементу менять размер в зависимости от содержимого. Если мы зададим значение "match_parent", то элемент EditText заполнит весь экран, поскольку его ширина и высота будут равны родительскому LinearLayout.

Подробную информацию смотрите в разделе Разметка.

android:hint

Этот атрибут задает подсказку, которая отображается в текстовом поле, если оно не заполнено.

Вместо жестко заданной строки мы указали ссылку на строковый ресурс "@string/edit_message", который находится в другом файле. Поскольку это ссылка на конкретный ресурс, нет необходимости добавлять значок “+”. Однако поскольку вы еще не создали данный строковый ресурс, компилятор выдаст ошибку. Мы добавим ресурс немного позже.

Примечание: Указанный строковый ресурс имеет такое же имя, как и идентификатор элемента. Однако при ссылке на ресурс всегда учитывается его тип (например id или string), поэтому использование одинаковых имен не вызывает проблем.

Объекты ресурсов

Объект ресурса имеет уникальное целочисленное значение, связанное с ресурсами приложения, такими как растровые изображения, файлы разметки или строки. Каждый ресурс соответствует объекту ресурса, объявленному в файле gen/R.java. Вы можете использовать имя объекта из класса R для ссылки на ресурсы из кода, например если вам нужно программно изменить атрибут android:hint. В качестве атрибута android:id вы можете использовать произвольные наименования.

SDK автоматически генерирует файл R.java при каждой компиляции приложения, поэтому вы не должны вручную изменять этот файл.

Подробную информацию смотрите в разделе Использование ресурсов.

Создание строкового ресурса

По умолчанию строковые ресурсы хранятся в файле res/values/strings.xml. Добавим новый ресурс "edit_message" и укажем для него значение “Введите сообщение”.

  1. В Android Studio откройте файл res/values/strings.xml
  2. Добавьте строку с названием "edit_message" и значением “Введите сообщение”.
  3. Добавьте строку с названием "button_send" и значением “Отправить”. Позже мы создадим кнопку, которая будет использовать данный ресурс.
  4. Удалите строку, содержащую надпись "hello world".

Теперь файл strings.xml должен выглядеть следующим образом:

res/values/strings.xml

Для надписей пользовательского интерфейса всегда используйте строковые ресурсы. Строковые ресурсы позволяют управлять надписями в одном месте, делают их проще для поиска и редактирования. Более того, строковые ресурсы позволяют вам с легкостью перевести приложение на разные языки.

Подробную информацию об использовании строковых ресурсов для локализации приложений смотрите в разделе Поддержка различных устройств.

Добавление кнопки

  1. В Android Studio откройте файл res/layout/activity_my.xml.
  2. Создайте внутри <LinearLayout> элемент <Button> сразу после элемента <EditText>.
  3. Задайте ширину как "wrap_content", чтобы она зависела от надписи внутри кнопки.
  4. Добавьте атрибут android:text и укажите в качестве значения строковый ресурс "button_send", который мы создали в предыдущем параграфе.

Теперь <LinearLayout> должен выглядеть так:

res/layout/activity_my.xml

Примечание: Мы не указываем для кнопки атрибут android:id, поскольку не собираемся обращаться к ней из кода.

Мы создали разметку, в которой оба виджета EditText и Button имеют размеры, соответсвующие их содержимому. Смотрите рисунок 2.

Рисунок 2.Кнопка и поле вводе с шириной равной "wrap_content".

Это удобно для кнопки, но плохо для текстового поля, потому что пользователь может вводить довольно длинную строку. Было бы неплохо растянуть текстовое поле на все неиспользуемое пространство экрана. При использовании LinearLayout это можно сделать, добавив атрибут веса android:layout_weight.

Вес – это число, показывающее количество пространства, которое может использовать каждый из элементов относительно друг друга. Это как в рецепте коктейля: “2 части водки, 1 часть сока” – это означает, что две трети коктейля состоит из водки. Рассмотрим пример. Если вы указываете для одного элемента значение 2, а для другого 1, сумма будет равна трем и первый элемент займет 2/3 свободного пространства, а второй заполнит остаток. Если вы добавите третий элемент и укажете для него вес, равный 1, то первый элемент (с весом 2) займет 1/2 пространства, а оставшиеся два элемента займут по 1/4.

Стандартный вес для всех элементов равен 0. Если вы укажете значение больше нуля только для одного элемента, то данный элемент заполнит все пространство, оставшееся после прорисовки других элементов.

Растягиваем поле ввода

Для того, чтобы растянуть элемент EditText на все свободное пространство проделаем следующее:

  1. В файле activity_my.xml добавим элементу <EditText> атрибут layout_weight со значением 1, а атрибуту layout_width установим значение 0dp.

    res/layout/activity_my.xml

    Мы указали ширину EditText равную 0dp. Установка нулевой ширины улучшает производительность разметки. Использование "wrap_content" требует от системы лишнего вычисления ширины, результат которого в конечном счете не имеет смысла, поскольку указание веса все равно запустит операцию рассчета свободного пространства.

    На рисунке 3 показан результат применения весового коэффициента к элементу EditText.

    Рисунок 3.Вид поля ввода при установленом параметре weight.

Законченный вариант файла activity_my.xml выглядит таким образом:

res/layout/activity_my.xml

Запуск приложения

Созданная разметка используется классом Activity, который был сгенерирован SDK при создании проекта. Запустите приложение, чтобы посмотреть результат:

  1. В Android Studio щелкните по кнопке Run на панели инструментов.
  2. Если вы пользуетесь командной строкой, перейдите в корневую директорию вашего проекта и выполните команды:

В следующем уроке мы рассмотрим как создать реакцию на нажатие кнопки, прочитать текст из поля ввода, запустить другое activity и многое другое.

Добавить комментарий