Построение простого пользовательского интерфейса

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

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

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

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

[wpanchor id=”1″]

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

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

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

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

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

<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) , который раскладывает дочерние представления в вертикальном или горизонтальном положении, как указано в android:orientation атрибуте. Каждый дочерний элемент LinearLayout появляется на экране в том порядке, в котором он появляется в XML.

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

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

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

[wpanchor id=”2″]

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

Чтобы создать текстовое поле, редактируемое пользователем, добавьте <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 используют этот имя идентификатора ресурса для создания нового идентификатора ресурса в вашем проекте вgen/R.java файле, который относится к EditTextэлементу. После того, как идентификатор ресурса объявляется один раз таким образом, другие ссылки на него не требуют знака плюс. Использовать знак плюс необходимо только при указании нового идентификатора ресурса, но не требуется для конкретных ресурсов, таких как строки или макеты. См. сноску для получения дополнительной информации об объектах ресурсов.

android:layout_width и android:layout_height

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

android:hint

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

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

[wpanchor id=”3″]

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

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

По умолчанию, ваш Android проект включает в себя файл строковых ресурсовres/values/strings.xml. Добавьте новую строку с именем "edit_message" и задайте ей значение “Enter a message”. (Вы можете удалить строку “hello_world”.)

Пока вы находитесь в этом файле, также добавьте строку “Send” для кнопки, которую вы скоро добавите, называемую "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="action_settings">Settings</string>
        <string name="title_activity_main">MainActivity</string>
</resources>

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

[wpanchor id=”4″]

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

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

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

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

[wpanchor id=”5″]

Сделать поле ввода по ширине экрана

Макет в настоящее время разработан, так что оба EditText и Button виджета размера, необходимого для размещения их содержимого, как показано на рисунке 2.

Рисунок 2. EditText и Button виджеты с шириной установленной в "wrap_content".

Это прекрасно работает для кнопки, но не так хорошо для текстового поля, потому что пользователь может ввести что-то больше. Так что было бы неплохо заполнить неиспользованную ширину экрана текстовым полем. Вы можете сделать это внутри LinearLayout с помощью weight свойства, которое можно указать с помощью android:layout_weight атрибута.

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

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

    <EditText
            android:layout_weight="1"
            ... />

В целях повышения эффективности макета при указании веса, вы должны изменить ширинуEditText до нуля (0dp). Установка ширины в нуль повышает производительность макета, потому что использование "wrap_content" в качестве ширины требует от системы вычисления ширины, которая в конечном счете не имеет значения, так как значение веса требует другого расчета ширины для заполнения оставшееся пространства.

    <EditText
            android:layout_weight="1"
            android:layout_width="0dp"
            ... />

На рисунке 3 показан результат, когда вы назначаете вес для EditText элемент.

Рисунок 3. EditText виджету отдали весь вес макета, поэтому он заполняет оставшееся пространство вLinearLayout.

Вот как ваш файл макета должен выглядеть:

<?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">
        <EditText android:id="@+id/edit_message"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:hint="@string/edit_message" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/button_send" />
    </LinearLayout>

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

• В Eclipse, выберите пункт Run на панели инструментов.
• Или из командной строки, перейдите в корневой каталог вашего Android проекта, и выполните:

  ant debug
      adb install bin/MyFirstApp-debug.apk

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