Компоненты экрана Android
Если проводить аналогию с Windows, то приложение состоит из окон, называемых Activity. В конкретный момент времени обычно отображается одно Activity и занимает весь экран, а приложение переключается между ними. В качестве примера можно рассмотреть почтовое приложение. В нем одно Activity – список писем, другое – просмотр письма, третье – настройки ящика. При работе вы перемещаетесь по ним.
Содержимое Activity формируется из различных компонентов, называемых View. Самые распространенные View - это кнопка, поле ввода, чекбокс и т.д.
Если рассматривать приложение, как набор Activity, то это будет выглядеть примерно так:
Необходимо заметить, что View обычно размещаются в ViewGroup. Самый распространенный пример ViewGroup – это Layout. Layout бывает различных типов и отвечает за то, как будут расположены его дочерние View на экране (таблицей, строкой, столбцом).
Откроем наш созданный в предыдущем уроке проект, либо создаем новый.
Раскрываем папку res, далее layout, и видим файл разметки xml - activity_main.xml
Это layout-файл. В нем мы определяем набор и расположение View компонентов, которые хотим видеть на экране. При запуске приложения, Activity читает этот файл и отображает нам то, что мы настроили. Скорее всего, он у вас уже открыт на редактирование, но на всякий случай давайте еще раз откроем его двойным кликом и посмотрим, как он выглядит.
1) Design и Text
Desing - это графическое представление экрана. Оно сейчас открыто. А Text - это текстовое представление. Оно выглядит так:
Очень много непонятных букв и слов =) Поэтому, для начала мы будем использовать графическое представление (design).
2) Режимы отображения экрана
На скриншоте в области 3 вы видите два экрана. Обычный белый и рядом с ним какой-то синий. Это один и тот же экран, но он отображен в двух разных режимах:
Design - в нем мы видим View компоненты так, как они обычно выглядят на экране.
Blueprint - отображаются только контуры View компонентов
Кнопки в области 2 позволяют вам переключать режимы:
- Design
- Blueprint
- Design + Blueprint
Я обычно использую Design режим. Вы можете использовать тот, какой вам удобнее.
3) Экран
Здесь вы можете видеть, как выглядит экран вашего приложения. Сюда мы будем добавлять различные компоненты из области 4.
4) Палитра
Это список всех View компонентов, которые вы можете добавлять на ваш экран: кнопки, поля ввода, чекбоксы, прогрессбары и прочее.
5) Дерево компонентов
Здесь представлена иерархия View компонентов вашего экрана. Сейчас, например, корневой элемент - это ConstraintLayout. А в него вложен TextView.
6) Свойства
Эта область пока пуста. При работе с каким либо View компонентом здесь будут отображаться свойства этого компонента. С помощью свойств вы сможете настраивать внешний вид, расположение и содержимое View компонента.
В следующем уроке я расскажу подробнее о ConstraintLayout, чтобы вам было понятнее, о чем пойдет речь далее.
Сейчас у нас на экране только TextView. Давайте добавим еще несколько компонентов. Например, Button и CheckBox.
Для этого нужно перейти во вкладку Design, если вы еще не в ней, и из списка элементов слева-сверху от экрана виртуального мобильного устройства выбрать нужный элемент и перенести его мышкой на экран нашего девайса.
Обратите внимание, что компоненты появились в Component Tree.
Значения button и checkBox - это ID, которые были присвоены компонентам автоматически. Пока оставим их такими, позднее научимся их менять и будем делать более осмысленными.
Теперь давайте изменим надписи на этих компонентах. Во вкладке Component Tree (слева-снизу) жмем на TextView, чтобы выделить этот компонент.
Найдем во вкладке Properties свойство text. Сейчас там прописан текст Hello World!, который и отображается на экране. Давайте поменяем его на свой текст. Поставьте курсор в это поле и напишите там, например, “Google Android”.
Жать в этом поле Enter я не советую, т.к. студия иногда предлагает автозаполнение, которое вам может не подойти. Поэтому, после того, как вы написали там свой текст, просто нажмите мышкой в любом месте экрана с компонентами.
Текст на экране изменился. Был Hello World! Стал Google Android.
Аналогично вы можете изменить тексты на кнопке и чекбоксе. Просто выделяйте эти компоненты на экране или в Component Tree, в Properties ищите свойство text и пишите там свой текст. Можно даже на русском языке.
Все, что вы настроили в этом экране, сохранится в файле res > layout > activity_main.xml.
Запускаем наш проект, выбираем эмулятор, либо ваше мобильное устройство.
Ждем пока запускается эмулятор и, затем, любуемся результатом:
Все ваши новые тексты должны отобразится на экране.
Приложение отображает нам MainActivity, а оно в свою очередь читает файл activity_main.xml и отображает все View, которые мы в нем создавали и настраивали.
На сегодня всё! Всем удачи в разработке, друзья 😉
Enjoy Android Development