Урок 4. RelativeLayout

Урок 4. RelativeLayout

В этом уроке мы продолжим изучать различные виды лэйаутов и поговорим о, пожалуй, самом интересном и универсальном из них — RelativeLayout.

Что такое RelativeLayout?

RelativeLayout — прямой наследник ViewGroup, в котором дочерние элементы располагаются относительно друг друга или же самого RelativeLayout.

Доступны следующие варианты расположения дочерних элементов:

  1. Относительно самого RelativeLayout. За это отвечают атрибуты layout_alignParentStartlayout_alignParentEnd, layout_alignParentTop, layout_alignParentBottomlayout_centerVertical, layout_centerHorizontal, layout_centerInParent.
  2. Относительно других элементов внутри RelativeLayout. Для этого используются атрибуты layout_toStartOf, layout_toEndOf, layout_above, layout_below, layout_alignStart, layout_alignEnd, layout_alignTop, layout_alignBottom.

Прежде чем попробовать это на практике, давайте поговорим об еще одной вещи в XML-разметке интерфейсов.

Что такое id у View в Android?

При создании интерфейса для Android-приложений мало просто создать интерфейс, нам нужно еще и как-то взаимодействовать с его элементами. А чтобы взаимодействовать с элементами интерфейса, нам надо как-то отличать их друг от друга. Для этого существует механизм присваивания id. Для каждого View может быть присвоен атрибут android:id, в котором мы задаем уникальный в пределах Activity идентификатор. Id начинается с «@+id/» и может состоять из латинских символов, цифр и знака подчеркивания. Начинаться ID должен с буквы. Может быть использован любой регистр, но принято писать в нижнем регистре.

Пример:

Пока что это все, что вам нужно знать об id. А теперь давайте вернемся к RelativeLayout.

Расположение относительно RelativeLayout

Создайте новый проект так же, как мы делали это раньше. Откройте activity_main.xml, и замените код на этот:

В результате вы увидите следующее:

RelativeLayout в Android

Как и в других ViewGroup, в RelativeLayout дочерние элементы по умолчанию выравниваются по левому верхнему краю.

Выравнивание по центру

Чтобы выровнять элемент по центру относительно самого RelativeLayout, добавьте атрибут layout_centerInParent со значением true:

В результате квадрат будет находиться в центре лэйаута:

RelativeLayout layout_centerInParent

Для центрирования по вертикали нужно использовать атрибут layout_centerVertical:

RelativeLayout layout_centerVertical

 

Для центрирования по вертикали, соответственно, layout_centerHorizontal:

RelativeLayout layout_centerHorizontal

Выравнивание по краям

Остались атрибуты layout_alignParentStart, layout_alignParentEnd, layout_alignParentTop, layout_alignParentBottom. Их можно комбинировать между собой (если они не противоречат друг другу).

Не будем подробно разбирать каждый из атрибутов, давайте рассмотрим следующий пример: нужно поместить квадрат в правый нижний угол экрана. За правую сторону отвечает атрибут layout_alignParentEnd, за нижнюю — layout_alignParentBottom. Соответственно, получится следующая разметка:

В результате получится следующее:

RelativeLayout layout_alignParentEnd layout_alignParentBottom

Обратите внимание, что если минимальная версия SDK в проекте меньше, чем 17, то помимо layout_alignParentEnd нужно использовать атрибут layout_alignParentRight, а помимо layout_alignParentStartlayout_alignParentLeft.

Расположение относительно других элементов

Как я уже говорил, RelativeLayout — самый гибкий лэйаут из имеющихся в Android SDK. В нем мы можем выравнивать дочерние элементы не только относительно самого RelativeLayout, но и относительно других дочерних элементов. Существует два способа расположения одного дочернего элемента относительно другого:

  1. После/до/под/над элементом
  2. По краю элемента — левому, правому, верхнему или нижнему.

В первом случае нам потребуются атрибуты layout_toStartOf, layout_toEndOf, layout_above, layout_below, во втором — layout_alignStart, layout_alignEnd, layout_alignTop, layout_alignBottom.

Давайте рассмотрим оба случая на практике.

Измените код на следующий:

Как видите, у первого View мы добавили атрибут id, чтобы можно было ссылаться на этот View. Далее, второй View располагается справа от первого. Третий View располагается слева от первого. Посмотрим, что получилось:

RelativeLayout выравнивание

Да, они располагаются, в принципе, верно, но не так, как нам хотелось бы. Как вы помните, по умолчанию элементы любого лэйаута выравниваются по верхнему левому краю. Горизонтальное расположение мы задали, а вертикальное — нет, и поэтому элементы «прижались» к верхней границе экрана. Давайте же выстроим их в один ряд, а заодно и рассмотрим второй вариант расположения, когда элементы выравниваются по краю другого элемента:

Мы просто добавили атрибут layout_alignTop ко второму и третьему View, и они автоматически выровнялись по верхнему краю первого View. Точно так же можно поступить и с остальными атрибутами, но это мы рассматривать не будем — пусть это будет вашим домашним заданием. А задание такое: выстройте 4 квадрата разных цветов лесенкой из левого верхнего угла в направлении правого нижнего.


 

Спасибо за внимание, и не забывайте про две вещи:

  • Не стесняйтесь задавать вопросы. Можете сделать это в комментариях внизу, в сообщениях в нашей группе, или отправить вопрос на почту admin@android-school.ru
  • Обязательно делитесь этой статьей с друзьями — им тоже может быть интересно :)

До встречи на следующем уроке!

 


Новые уроки добавляются каждый день! Чтобы ничего не пропустить, подпишитесь на нашу группу ВКонтакте, или на рассылку по e-mail (обещаем, спама не будет. честно.)

GET YOUR EMAIL UPDATES

We send out our lovely email newsletter with useful tips and techniques, recent articles and upcoming events. Thousands of readers have signed up already. Get a free WordPress eBook now.
E-Mail