Главная » Файлы » Java для Android » Проект: Адаптация курсов от Google

Создание простого пользовательского интерфейса. Часть 1
04.01.2015, 17:33

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

Графический интерфейс пользователя для Android приложений строится по иерархии из View и ViewGroup объектов. View объекты - это обычные UI компоненты, например buttons или text fieldsViewGroup невидимые объекты содержащие дочерние объекты типа View, например grid или vertical list.

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

Слои подклассов ViewGroup. В этом уроке вы будете работать с LinearLayout.


Рисунок 1. Иерархия объектов ViewGroup и содержащихся в них объектов View.

Создание Linear Layout


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

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

  2. Панель Preview, нажмите на иконку скрытия панели, чтобы закрыть панель предпросмотра.

    В Android Studio, когда вы открываете файл слоя, вы видите панель предварительного просмотра.

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

res/layout/activity_my.xml

<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, указывают на размер слоя.

Значение "match_parent" указывает на то, что слой займет все доступное ему пространство.

Подробнее см. Layout.

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


Как и для View объектов, вы должны описать атрибуты компонента EditText в XML файле.

  1. В файле activity_my.xml, на слое <LinearLayout>, определите компонент <EditText> и  присвойте атрибуту idattribute значение @+id/edit_message.
  2. Атрибутам layout_width и layout_height присвойте значение wrap_content.
  3. Добавьте атрибут hint и определите его как строковый элемент edit_message.

Компонент <EditText> будет описан в XML так:

res/layout/activity_my.xml

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

Описание добавленных атрибутов <EditText>:

android:id
Уникальный идентификатор, подробнее в следующих уроках.

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

Знак плюс (+) определяется перед типом ресурса, необходимо при первом определении. При компиляции, SDK Tools используют идентификатор имени для создания нового ресурса в вашем проекте в файле gen/R.java ссылающемся на компонент EditText.

android:layout_width and android:layout_height
Чтобы не использовать конкретные значения высоты и ширины, используется значение "wrap_content", с этим значением компонент займет столько места сколько ему нужно. Если использовать "match_parent", то компонент EditText займет весь слой. Подробнее см. Layouts.
android:hint
Это стандартная строка, отображаемая тогда, когда текстовое поле пустое. Чтобы не использовать постоянные строковые выражения, можно сослаться на значение "@string/edit_message" в строковом ресурсе. Тем не менее при компиляции произойдет ошибка из-за того, что вы ссылаетесь на несуществующий объект.

Заметка: Этот строковый ресурс имеет имя: edit_message. Это имя используется и при определении идентификатора текстового поля, однако это не приведет к ошибке, т.к. используются разные типы ресурсов.

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


По-умолчанию в вашем Android проекте включен файл res/values/strings.xml. В него нужно добавить новую строку для "edit_message" и установить ему значение "Enter a message."

  1. В Android Studio, в каталоге res/values, откройте файл strings.xml.
  2. Добавьте новую запись "edit_message" и присвойте ему значение "Enter a message".
  3. Добавьте новую запись "button_send" и присвойте ему значение "Send".

    Будет использована далее.

  4. Удалите строку, описывающую "hello world".

В результате файл strings.xml будет таким:

res/values/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>

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

Подробнее см. Supporting Different Devices.

Продолжение в части 2.

Категория: Проект: Адаптация курсов от Google | Добавил: TAdm | Теги: create, Studio, Project, проекта, Guide, Android, курсы, UI, agc
Просмотров: 1045 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
ComForm">
avatar