Урок 4. Элементы экрана и их свойства

Давайте посмотрим, как в Андроид приложениях формируется то, что мы видим на экране.

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

Содержимое Activity формируется из различных компонентов, называемых View. Самые распространенные View - это кнопка, поле ввода, чекбокс и т.д.

Примерно это можно изобразить так:

Необходимо заметить, что View обычно размещаются в ViewGroup. Самый распространенный пример ViewGroup – это Layout. Layout бывает различных типов и отвечает за то, как будут расположены его дочерние View на экране (таблицей, строкой, столбцом …)

Подробней об этом можно почитать в хелпе: User Interface и Common Layout Objects.

Наверно уже запутал новыми словами и терминами, давайте посмотрим это все на практике. Создадим проект со следующими свойствами:

Project name: P0041_BasicViews
Build Target: Android 2.3.3
Application name: BasicViews
Package name: ru.startandroid.develop.BasicViews
Create Activity: MainActivity

Если у вас свежая версия визарда создания проекта, то Build Target - это то же самое, что и Build SDK. А в экране создания Activity не забывайте указывать main в поле Layout Name.  

В нашем проекте нам интересен файл: res > layout > main.xml

Это layout-файл, в нем мы определяем набор и расположение элементов View, которые хотим видеть на экране. При запуске приложения, Activity читает этот файл и отображает нам то, что мы настроили. Давайте откроем его и посмотрим, какой набор View он содержит по умолчанию.

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

Возможно, у вас он будет немного другого вида. Это регулируется в меню Palette, чуть выше.

Обратим внимание на белый экран. Мы видим, что на экране сейчас присутствует элемент с текстом Hello world! Чтобы узнать, что это за View нажмите на этот текст. Справа во вкладке Outline вы видите все элементы, которые описаны в main.xml.

Видим, что выделенный нами элемент – это TextView. Обратите внимание, что он вложен в элемент RelativeLayout – это ViewGroup, про которые я писал выше.

Добавим еще элементов на экран, пусть это будут Button и CheckBox. Для этого просто перетащите их из списка слева на белый экран вашего будущего приложения. Также можно перетащить их на RelativeLayout во вкладке Outline, результат будет почти тот же. Кроме Button и CheckBox, добавим еще на экран Plain Text из группы Text Fields.

В Outline они появятся под названиями button1, checkBox1 и editText1. Это ID, которые им были присвоены автоматически. Пока оставим их такими, позднее научимся их менять и будем делать более осмысленными.

Теперь на нашем экране несколько элементов. Давайте изменим надписи на них. Во вкладке Outline жмем на TextView. Теперь нам нужна вкладка Properties. Она отображает свойства выделенного в Outline или на экране View-элемента. Располагается она обычно сразу под Outline.

Найдем в Properties свойство Text. Сейчас там стоит ссылка на текстовую константу. Где создаются эти константы мы рассмотрим в следующих уроках, а пока просто давайте напишем сюда свой текст: «Какой-то текст»

Аналогично изменим свойство Text для элементов button1, checkBox1 и editText1 на произвольные тексты. Все эти изменения пишутся в main.xml. Сохраним все CTRL+SHIFT+S и запустим CTRL+F11.

Приложение отображает нам MainActivity, а оно в свою очередь читает файл main.xml и отображает все View, которые мы создавали и настраивали.

На этом уроке мы:

узнали, что выводится на экран в Android-приложении
научились формировать layout-файл – добавлять View и настраивать их свойства

На следующем уроке мы:

рассмотрим layout-файл с другого ракурса - XML
разберем, откуда Activity знает, какой layout-файл надо читать и попробуем настроить на чтение другого файла
узнаем, какой layout-файл используется при смене ориентации экрана (горизонтальная/вертикальная)