Создание пользовательского интерфейса приложений в Android SDK

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

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

Рисунок 1. Иллюстрация того, как ViewGroup объекты образуют филиалы в макете и содержат другие View объекты.

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

Создание линейного макета

Откройте файл activity_main.xml из каталога res/layout/.

Примечание: Когда вы открываете файл макета в Eclipse, вы видите графический редактор макета. Этот редактор поможет вам построить макеты использованием WYSIWYG инструментов. В этом уроке, вы будете работать напрямую с XML, поэтому зайдите во вкладку activity_main.xml в нижней части экрана, чтобы открыть XML-редактор.

Шаблон BlankActivity, который используется для запуска этого проектаа, создает файл activity_main.xml с RelativeLayout корневым видом и TextView child-видом.

Во-первых, удалите <TextView> элемент и измените <RelativeLayout> элемент на <LinearLayout>. Затем добавьте атрибут android:orientation и установите его значение как "horizontal". Результат выглядит так:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >
</LinearLayout>

LinearLayout - группа представления (подкласс ViewGroup), которая излагает child-виды просмотров в любой вертикальной или горизонтальной ориентации, как указано в атрибуте android:orientation. Каждый ребенок LinearLayout появляется на экране в том порядке, в котором он появляется в XML.

Два других атрибута, android:layout_width и android: layout_height требуются для всех представлений для того, чтобы указать их размер.

Поскольку LinearLayout является корнем в макете, он должна заполнить всю область экрана, которая доступна в приложении, установив ширину и высоту "match_parent". Это значение указывает, что вид должен расширить свою ширину или высоту, чтобы соответствовать ширине или высоте родительского вида.

Для получения дополнительной информации о расположении свойств см. руководство Макет.

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

Для создания пользовательского редактируемого текстового поля, добавьте элемент <EditText> внутри <LinearLayout>.

Как и любом объекте View, необходимо определить некоторые атрибуты XML, чтобы указать свойства EditText объекта. Вот как вы должны объявить его в элементе <LinearLayout>:

    <EditText android:id="@+id/edit_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="@string/edit_message" />

Об этих атрибутах:

android:id

Обеспечивает уникальный идентификатор для вида, который можно использовать для ссылки на объект из кода вашего приложения, чтобы счтиывать и управлять объектом (мы рассмотрим это в следующем уроке).

Знак (@) требуется в том случае, если вы имеете в виду любой ресурс объекта из XML. За ним следуют тип ресурса (в данном случае ID), косая черта и имя ресурса (edit_message).

Знак плюс (+) перед типом ресурсов необходим только тогда, когда вы определяете идентификатор ресурса впервые. При компиляции приложений SDK инструменты используют ID имя для создания нового идентификатора ресурса в файле проекта gen/R.java, который ссылается на элементов EditText. Как только идентификатор ресурса объявлен, другие ссылки на ID не требуют указания знака плюс. Использование знака плюс необходимо только при указании нового идентификатора ресурса и не требуется для конкретных ресурсов, таких как строки или макеты. См. в боковой колонке более подробную информацию о ресурсах объектов.

Android: layout_width и Android: layout_height

Вместо конкретных размеров по ширине и высоте, значение "wrap_content" указывает, что представление должно быть только большим по необходимости, чтобы соответствовать содержанию представления. Если бы вы вместо этого использовали "match_parent", элемент EditText заполнил бы экран,поскольку это соответствует размеру родительского LinearLayout. Для получения дополнительной информации см. руководство Макеты.

android:hint

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

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

Добавление строковых ресурсов

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

По умолчанию, ваш проект Android включает в себя файл строкового ресурса на res/values/strings.xml. Откройте этот файл и удалите элемент <string> с именем "hello_world". Затем добавьте новый, названный "edit_message", и установите значение "Enter a message" ("Введите сообщение").

В то время, как вы находитесь в данном файле, также добавьте строку "Отправить" для кнопки, которую вы скоро добавите (она называется "button_send").

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

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">My First App</string>
    <string name="edit_message">Enter a message</string>
    <string name="button_send">Send</string>
    <string name="menu_settings">Settings</string>
    <string name="title_activity_main">MainActivity</string>
</resources>

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

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

Теперь добавьте <Button> в макет, сразу же после элемента <EditText>:

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_send" />

Высота и ширина установлены ??во "wrap_content", так что кнопка расширяется в соответствии с текстом кнопки. Этой кнопке не нужен атрибут android:id, потому что он не будет ссылаться из активного кода.

Следующий урок