Любое приложение отображает пользователю графический интерфейс. На картинке ниже вы можете увидеть примеры текстовых элементов (TextView), кнопок (Button), картинок (ImageView).
Пользовательский интерфейс представлен layout файлом (рус. Макетом), который создаётся, используя язык разметки XML. Макет определяет структуру пользовательского интерфейса экрана. Все элементы макета построены с использованием иерархии объектов View и ViewGroup. View – компонент, который пользователь может видеть и взаимодействовать с ним. В то время как ViewGroup является невидимым контейнером, который определяет структуру макета, как показано на рисунке.
Объекты View обычно называют «виджетами». Они могут быть представлены одним из классов-наследников, таких как Button, TextView, ImageView. Объекты ViewGroup обычно называют «контейнерами». Они определяют, как именно будут располагаться элементы внутри экрана. Подробнее с ViewGroup мы познакомимся в следующих уроках.
Вы можете работать с макетами двумя способами:
Объявлять элементы пользовательского интерфейса в XML коде. Android предоставляет простой XML файл, в котором можно добавлять разные View и ViewGroup вручную. Вы также можете использовать редактор макетов Android Studio, чтобы создать свой XML-макет, не заглядывая в XML код.
Создавать элементы макета во время выполнения программы из Java кода. Приложение может создавать объекты View и ViewGroup (и управлять их свойствами) программно.
В этом уроке мы подробнее будем рассматривать именно первый вариант. Откройте файл activity_main.xml. Для ознакомления с синтаксисом языка XML мы будем вносить изменения в этот файл.
XML синтаксис
XML – язык разметки, определяющий теги (элементы) и их атрибуты. Язык очень похож на HTML. Давайте разберём на примере.
Тег ограничивается скобками < >. Название тега в данном случае – LinearLayout. Всё, что находится между скобками – называется атрибутами. В примере два атрибута:
android:layout_width="match_parent"
android:layout_height="match_parent"
Атрибуты состоят из названия и значения, которые разделены символом =, причём значение атрибута всегда пишется в кавычках. У атрибута android:layout_width="match_parent" название – android:layout_width, а значение – match_parent.
После открытия тега, его обязательно надо закрывать. Это можно сделать используя конструкцию </ИмяТега> (в примере – </LinearLayout>).
Если у какого-то тега нет вложенных элементов, то лучше сократить закрывающийся тег, используя конструкцию <ИмяТега />. Обратите внимание на тег TextView:
Layout должен содержать только один корневой элемент, который должен быть объектом View или ViewGroup (обычно используют ViewGroup). После того, как вы определили корневой элемент, вы можете добавить дополнительные объекты в качестве дочерних элементов, чтобы постепенно создавать пользовательский интерфейс. Давайте изменим файл activity_main.xml. Например, вот код XML-макета, который использует контейнер LinearLayout в качестве корневого элемента и два виджета внутри него: TextView и Button.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical">
<TextViewandroid:id="@+id/text"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="This is TextView"/>
<Buttonandroid:id="@+id/button"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="This is Button"/>
</LinearLayout>
При запуске приложения макет будет выглядеть так:
Связь XML и Java кода
Когда мы запускаем приложение, каждый файл макета XML компилируется в ресурс View. Связь XML файла и Activity происходит в методе onCreate класса MainActivity. Этот код также сгенерировала Android Studio при создании Activity.
Связь происходит при вызове метода setContentView(R.layout.activity_main). Обращаться к layout файлу нужно в виде R.layout.имя_файла. Это связано с внутренним хранением ресурс файлов в Android системе. В нашем случае файл по умолчанию называется activity_main.xml, поэтому указываем R.layout.activity_main (постфикс xml опускается).
Метод onCreate() вызывается Android системой во время загрузки приложения (эту тему рассмотрим подробнее в следующих уроках).
XML Атрибуты
Каждый объект View и ViewGroup поддерживает множество атрибутов XML.
<TextViewandroid:id="@+id/text"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="30sp"android:text="This is TextView" />
Вы можете заметить, что в названии атрибутов есть префикс android. Этот префикс называют пространством имён (англ. namespace). В данном случае он означает, что атрибуты объявлены в библиотеке android. Также вы могли заметить, что у корневого элемента в макете обязательно указывается атрибут xmlns:android="http://schemas.android.com/apk/res/android". Это сделано для объявления пространства имён.
Некоторые атрибуты специфичны для конкретного элемента. Например, TextView поддерживает атрибут android:textSize (русс. размер текста). Атрибуты наследуются View объектами при расширении класса другого виджета. Некоторые из атрибутов являются общими для всех виджетов, поскольку они наследуются от корневого класса View (например, текст – android:text, ширина – android:layout_width, высота – android:layout_height, идентификатор – android:id).
Атрибут android:text
Атрибут android:text отвечает за текст, который будет отображаться на экране:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" >
<TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="30sp"android:text="Android is the best" />
</LinearLayout>
У любого View компонента необходимо объявить атрибуты android:layout_width (русс. ширина макета), android:layout_height (русс. высота макета), иначе приложение не скомпилируется.
Существует три варианта указания ширины и высоты:
фиксированный размер в dp. Density-independent Pixel (сокр. dp) – это виртуальный пиксель, основанный на физической плотности экрана устройства. Android переводит это значение в соответствующее количество реальных пикселей для разных экранов.
wrap_content означает, что элемент занимает место, необходимое для отрисовки его содержимого.
match_parent означает, что элемент занимает столько же места, сколько и родительский элемент. Раньше вместо этого значения использовалось fill_parent. Но это устаревший вариант, поэтому не используйте его.
Создадим три TextView, чтобы показать эти значения:
В данном случае при размере wrap_contentTextView занимает столько же места, сколько и текст в нём. Вы можете изменить текст, чтобы убедиться, что размер текста и элемента TextView будут совпадать.
Вы могли заметить, что в примере мы использовали атрибуты android:background (русс. цвет фона), android:marginTop (русс. отступ сверху), android:textColor (русс. цвет текста), android:textSize (русс. размер текста) для наглядности. Сейчас мы рассмотрим эти атрибуты детальнее.
Атрибут android:textSize
Атрибут android:textSize отвечает за размер текста, как вы догадались. Разберём на примере:
Размер текста нужно указывать в единицах sp (Scale-independent Pixels). Отличие от dp состоит в том, что этот размер изменяется в зависимости от настроек размера шрифта в телефоне. В Android системе у пользователя есть возможность в настройках изменить шрифт в своём телефоне на крупный, средний или маленький. Чтобы текст в приложении автоматически изменился вместе с этой настройкой рекомендуется использовать единицы sp для текста.
Атрибут android:background
Атрибут android:background определяет фоновый цвет элемента. Когда вы указываете атрибут android:background, то видите точно, сколько места занимает элемент. Разберём на примере:
Давайте разберём запись android:background="#00FF00". #00FF00 – простой способ закодировать любой цвет. Вы можете генерировать нужные цвета онлайн на этом сайте. Для самых любопытных ниже объяснение, как работает задание цветов.
Цвет задаётся в формате ARGB. Это аббревиатура расшифровывается, как Alpha Red Green Blue. Дело в том, что любой цвет можно получить из сочетания в разной степени 3 цветов: красного, зелёного и синего. Также цвета могут быть прозрачными, именно это обозначает слово Alpha.
Чтобы задать цвет мы указываем символ # и 3 байта в шестнадцатеричной системе, которые отвечают за каждый цвет. Первый байт отвечает за красный цвет, второй – за зелёный, третий – за синий.
В данном примере мы указали, что красного цвета будет 00, зелёного цвета будет FF (максимальное значение), и синего будет 00. Поэтому фон стал зелёным. Также можно не писать второе число, если оно такое же, как и первое. Т.е. мы можем записать этот же цвет : android:background="#0F0". Если хотите узнать ещё больше о RGB формате, то читайте здесь.
Атрибут android:textColor
Атрибут android:textColor похож на атрибут android:background только он задаёт цвет текста:
Атрибут android:id у View позволяет работать с ней из Java кода и ссылаться на эту View внутри макета. Покажем на примере работы с View элементом из Java кода:
Символы @+id/ в начале строки указывают, что будет создан новый идентификатор. После этого следует новое имя ресурса, которое должно быть создано и добавлено к нашим ресурсам (в данном случае – text). Из java кода к этому элементу можно будет обратиться с помощью вызова R.id.text.
С помощью вызова метода findViewById(R.id.text) можно связать View из XML макета с Java объектом TextView. После этого можно вызывать любые методы, которые есть у данного объекта. Для примера мы вызвали метод setText() и указали текст Text from java code.
В результате увидим, что отобразился тот текст, который мы указали из Java кода:
Атрибуты android:padding, android:layout_margin
Рассмотрим атрибуты, которые задают отступы элементов:
android:padding (top, bottom, right | end, start | left)
android:layout_margin (top, bottom, right | end, start | left)
В xml коде они указываются так:
android:padding <!--Отступ со всех сторон-->
android:paddingTop
android:paddingBottom
android:paddingRight android:paddingEnd
android:paddingLeft android:paddingStart
android:layout_margin <!--Отступ со всех сторон-->
android:layout_marginTop
android:layout_marginBottom
android:layout_marginRight android:layout_marginEnd
android:layout_marginLeft android:layout_marginStart
Параметры (top, bottom, right | end, start | left) означают, с какой стороны вы хотите сделать отступ. Параметры right | end, start | left означают практически одно и тоже. Только start, end добавляют поддержку для стран, в которых тексты читаются справа налево. Поэтому рекомендуется использовать их вместо значений left, right. Эти атрибуты поддерживаются с 17 версии устройств, значит мы можем их использовать (помните, что при создании проекта мы указали, что поддерживаем устройства 21 версии и выше).
Если указать padding, layout_margin без всякого параметра, то отступ будет сделан со всех сторон. Основное различие двух атрибутов состоит в том, что padding делает отступ внутри элемента, а layout_margin делает отступ снаружи. Пример:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical">
<TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:background="#00F"android:padding="10dp"android:text="TextView with padding"android:textColor="#FFF"android:textSize="35sp"/>
<TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="10dp"android:background="#00F"android:text="TextView with margin"android:textColor="#FFF"android:textSize="35sp"/>
</LinearLayout>
Результат:
Можно сделать тоже самое, указывая отступы со всех сторон явно:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical">
<TextViewandroid:paddingTop="10dp"android:paddingBottom="10dp"android:paddingEnd="10dp"android:paddingStart="10dp"android:background="#00F"android:textColor="#FFF"android:textSize="35sp"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="TextView with padding"/>
<TextViewandroid:layout_marginTop="10dp"android:layout_marginBottom="10dp"android:layout_marginEnd="10dp"android:layout_marginStart="10dp"android:background="#00F"android:textColor="#FFF"android:textSize="35sp"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="TextView with margin"/>
</LinearLayout>
Атрибуты android:gravity, android:layout_gravity
Атрибуты android:gravity и android:layout_gravity отвечают за выравнивание. Ключевое отличие состоит в том, что android:gravity отвечает за выравнивание содержимого внутри элемента, а layout_gravity отвечает за выравнивание элемента относительно родительского контейнера. Разберём на примере:
В данном примере текст в первом TextView выровнен по правому краю, т.к. мы указали атрибут android:gravity="end". Второй элемент прижался к правой стороне родительского контейнера, потому что указан атрибут android:layout_gravity="end".
Также у этого атрибута могут быть другие значения, которые указывают, как именно выровнять элемент. Перечислим основные из них: top, bottom, start, end, center, center_horizontal, center_vertical
Различные значения можно комбинировать, используя символ |. Если хотим выровнять содержимое по правому нижнему углу, то можем использовать значение end|bottom.
Верите или нет, профессиональные разработчики не запоминают всё – поиск информации является ключевой частью работы. Поэтому не пытайтесь запомнить все View объекты и атрибуты сразу. Google сделал специальный словарь, в котором вы можете найти тот компонент, атрибут или класс, который вам необходим.
Заключение
Сегодня вы познакомились с пользовательским интерфейсом в Android системе. Теперь вы знаете язык XML и основные компоненты пользовательского интерфейса, а также их атрибуты. Информации было много, поэтому это нормально, если вы её не запомнили. При необходимости в следующих уроках вы сможете возвращаться к этому уроку, как к справочнику. Скорее выполняйте практические задания к этому уроку, чтобы набить руку и создать первый макет реального приложения!
Сайт использует cookie-файлы для того, чтобы вам было удобнее им пользоваться. Для
продолжения работы с сайтом, вам необходимо принять использование cookie-файлов.
Структура урока:
Пользовательский интерфейс
Любое приложение отображает пользователю графический интерфейс. На картинке ниже вы можете увидеть примеры текстовых элементов (
TextView
), кнопок (Button
), картинок (ImageView
).Пользовательский интерфейс представлен
layout
файлом (рус. Макетом), который создаётся, используя язык разметки XML. Макет определяет структуру пользовательского интерфейса экрана. Все элементы макета построены с использованием иерархии объектовView
иViewGroup
.View
– компонент, который пользователь может видеть и взаимодействовать с ним. В то время какViewGroup
является невидимым контейнером, который определяет структуру макета, как показано на рисунке.Объекты
View
обычно называют «виджетами». Они могут быть представлены одним из классов-наследников, таких какButton
,TextView
,ImageView
. ОбъектыViewGroup
обычно называют «контейнерами». Они определяют, как именно будут располагаться элементы внутри экрана. Подробнее сViewGroup
мы познакомимся в следующих уроках.Вы можете работать с макетами двумя способами:
View
иViewGroup
вручную. Вы также можете использовать редактор макетов Android Studio, чтобы создать свой XML-макет, не заглядывая в XML код.Java
кода. Приложение может создавать объектыView
иViewGroup
(и управлять их свойствами) программно.В этом уроке мы подробнее будем рассматривать именно первый вариант. Откройте файл
activity_main.xml
. Для ознакомления с синтаксисом языка XML мы будем вносить изменения в этот файл.XML синтаксис
XML – язык разметки, определяющий теги (элементы) и их атрибуты. Язык очень похож на HTML. Давайте разберём на примере.
Тег ограничивается скобками
< >
. Название тега в данном случае –LinearLayout
. Всё, что находится между скобками – называется атрибутами. В примере два атрибута:android:layout_width="match_parent"
android:layout_height="match_parent"
Атрибуты состоят из названия и значения, которые разделены символом
=
, причём значение атрибута всегда пишется в кавычках. У атрибутаandroid:layout_width="match_parent"
название –android:layout_width
, а значение –match_parent
.После открытия тега, его обязательно надо закрывать. Это можно сделать используя конструкцию
</ИмяТега>
(в примере –</LinearLayout>
).У элемента могут быть вложенные элементы:
Если у какого-то тега нет вложенных элементов, то лучше сократить закрывающийся тег, используя конструкцию
<ИмяТега />
. Обратите внимание на тегTextView
:Пример макета
Layout
должен содержать только один корневой элемент, который должен быть объектомView
илиViewGroup
(обычно используютViewGroup
). После того, как вы определили корневой элемент, вы можете добавить дополнительные объекты в качестве дочерних элементов, чтобы постепенно создавать пользовательский интерфейс. Давайте изменим файлactivity_main.xml
. Например, вот код XML-макета, который использует контейнерLinearLayout
в качестве корневого элемента и два виджета внутри него:TextView
иButton
.activity_main.xml
При запуске приложения макет будет выглядеть так:
Связь XML и Java кода
Когда мы запускаем приложение, каждый файл макета XML компилируется в ресурс
View
. Связь XML файла иActivity
происходит в методеonCreate
классаMainActivity
. Этот код также сгенерировала Android Studio при созданииActivity
.MainActivity.java
Связь происходит при вызове метода
setContentView(R.layout.activity_main)
. Обращаться кlayout
файлу нужно в видеR.layout.имя_файла
. Это связано с внутренним хранением ресурс файлов в Android системе. В нашем случае файл по умолчанию называетсяactivity_main.xml
, поэтому указываемR.layout.activity_main
(постфикс xml опускается).Метод
onCreate()
вызывается Android системой во время загрузки приложения (эту тему рассмотрим подробнее в следующих уроках).XML Атрибуты
Каждый объект
View
иViewGroup
поддерживает множество атрибутов XML.Некоторые атрибуты специфичны для конкретного элемента. Например,
TextView
поддерживает атрибутandroid:textSize
(русс. размер текста). Атрибуты наследуютсяView
объектами при расширении класса другого виджета. Некоторые из атрибутов являются общими для всех виджетов, поскольку они наследуются от корневого классаView
(например, текст –android:text
, ширина –android:layout_width
, высота –android:layout_height
, идентификатор –android:id
).Атрибут android:text
Атрибут
android:text
отвечает за текст, который будет отображаться на экране:activity_main.xml
Обязательные атрибуты android:layout_width, android:layout_height
У любого
View
компонента необходимо объявить атрибутыandroid:layout_width
(русс. ширина макета),android:layout_height
(русс. высота макета), иначе приложение не скомпилируется.Существует три варианта указания ширины и высоты:
dp
. Density-independent Pixel (сокр. dp) – это виртуальный пиксель, основанный на физической плотности экрана устройства. Android переводит это значение в соответствующее количество реальных пикселей для разных экранов.wrap_content
означает, что элемент занимает место, необходимое для отрисовки его содержимого.match_parent
означает, что элемент занимает столько же места, сколько и родительский элемент. Раньше вместо этого значения использовалосьfill_parent
. Но это устаревший вариант, поэтому не используйте его.Создадим три
TextView
, чтобы показать эти значения:activity_main.xml
Результат:
В данном случае при размере
wrap_content
TextView
занимает столько же места, сколько и текст в нём. Вы можете изменить текст, чтобы убедиться, что размер текста и элементаTextView
будут совпадать.Вы могли заметить, что в примере мы использовали атрибуты
android:background
(русс. цвет фона),android:marginTop
(русс. отступ сверху),android:textColor
(русс. цвет текста),android:textSize
(русс. размер текста) для наглядности. Сейчас мы рассмотрим эти атрибуты детальнее.Атрибут android:textSize
Атрибут
android:textSize
отвечает за размер текста, как вы догадались. Разберём на примере:activity_main.xml
Результат:
Размер текста нужно указывать в единицах
sp
(Scale-independent Pixels). Отличие отdp
состоит в том, что этот размер изменяется в зависимости от настроек размера шрифта в телефоне. В Android системе у пользователя есть возможность в настройках изменить шрифт в своём телефоне на крупный, средний или маленький. Чтобы текст в приложении автоматически изменился вместе с этой настройкой рекомендуется использовать единицыsp
для текста.Атрибут android:background
Атрибут
android:background
определяет фоновый цвет элемента. Когда вы указываете атрибутandroid:background
, то видите точно, сколько места занимает элемент. Разберём на примере:activity_main.xml
Результат:
Давайте разберём запись
android:background="#00FF00"
.#00FF00
– простой способ закодировать любой цвет. Вы можете генерировать нужные цвета онлайн на этом сайте. Для самых любопытных ниже объяснение, как работает задание цветов.Атрибут android:textColor
Атрибут
android:textColor
похож на атрибутandroid:background
только он задаёт цвет текста:activity_main.xml
Результат:
Атрибут android:textStyle
Атрибут
android:textStyle
отвечает за стиль текста. Его возможные значения:normal
– обычный текст (применяется по умолчанию, если вы не указали атрибутandroid:textStyle
).bold
– толстый.italic
– курсив.activity_main.xml
Результат:
Атрибут android:id
Атрибут
android:id
уView
позволяет работать с ней изJava
кода и ссылаться на этуView
внутри макета. Покажем на примере работы сView
элементом изJava
кода:activity_main.xml
Символы
@+id/
в начале строки указывают, что будет создан новый идентификатор. После этого следует новое имя ресурса, которое должно быть создано и добавлено к нашим ресурсам (в данном случае –text
). Из java кода к этому элементу можно будет обратиться с помощью вызоваR.id.text
.MainActivity.java
С помощью вызова метода
findViewById(R.id.text)
можно связатьView
из XML макета сJava
объектомTextView
. После этого можно вызывать любые методы, которые есть у данного объекта. Для примера мы вызвали методsetText()
и указали текстText from java code
.В результате увидим, что отобразился тот текст, который мы указали из Java кода:
Атрибуты android:padding, android:layout_margin
Рассмотрим атрибуты, которые задают отступы элементов:
android:padding (top, bottom, right | end, start | left)
android:layout_margin (top, bottom, right | end, start | left)
В xml коде они указываются так:
Параметры
(top, bottom, right | end, start | left)
означают, с какой стороны вы хотите сделать отступ. Параметрыright | end
,start | left
означают практически одно и тоже. Толькоstart, end
добавляют поддержку для стран, в которых тексты читаются справа налево. Поэтому рекомендуется использовать их вместо значенийleft
,right
. Эти атрибуты поддерживаются с 17 версии устройств, значит мы можем их использовать (помните, что при создании проекта мы указали, что поддерживаем устройства 21 версии и выше).Если указать
padding
,layout_margin
без всякого параметра, то отступ будет сделан со всех сторон. Основное различие двух атрибутов состоит в том, чтоpadding
делает отступ внутри элемента, аlayout_margin
делает отступ снаружи. Пример:activity_main.xml
Результат:
Можно сделать тоже самое, указывая отступы со всех сторон явно:
activity_main.xml
Атрибуты android:gravity, android:layout_gravity
Атрибуты
android:gravity
иandroid:layout_gravity
отвечают за выравнивание. Ключевое отличие состоит в том, чтоandroid:gravity
отвечает за выравнивание содержимого внутри элемента, аlayout_gravity
отвечает за выравнивание элемента относительно родительского контейнера. Разберём на примере:activity_main.xml
Результат:
В данном примере текст в первом
TextView
выровнен по правому краю, т.к. мы указали атрибутandroid:gravity="end"
. Второй элемент прижался к правой стороне родительского контейнера, потому что указан атрибутandroid:layout_gravity="end"
.Также у этого атрибута могут быть другие значения, которые указывают, как именно выровнять элемент. Перечислим основные из них:
top, bottom, start, end, center, center_horizontal, center_vertical
Различные значения можно комбинировать, используя символ
|
. Если хотим выровнять содержимое по правому нижнему углу, то можем использовать значениеend|bottom
.activity_main.xml
Результат:
Заключение
Сегодня вы познакомились с пользовательским интерфейсом в Android системе. Теперь вы знаете язык XML и основные компоненты пользовательского интерфейса, а также их атрибуты. Информации было много, поэтому это нормально, если вы её не запомнили. При необходимости в следующих уроках вы сможете возвращаться к этому уроку, как к справочнику. Скорее выполняйте практические задания к этому уроку, чтобы набить руку и создать первый макет реального приложения!
Полезные ссылки: