Android Layouts: обзор RelativeLayout и LinearLayout

В этой статье мы ударимся в теорию и рассмотрим основные блоки для построения пользовательского интерфейса: рассмотрим различные XML макеты (компоновки) в Android, основательно разберемся с RelativeLayout и LinearLayout.

Эта статья является хорошей шпаргалкой по работе с Android Layouts, а именно с компоновкой RelativeLayout и LinearLayout.

Обзор XML макетов (Android Layouts)

В Android основным строительным блоком пользовательского интерфейса является объект View, который по умолчанию он занимает прямоугольную область на экране. Этот объект является экземпляром одноименного класса View и базовым классом для всех компонентов пользовательского интерфейса, например: TextView, Button, EditText и другие.

Также есть класс ViewGroup, который является подклассом View. Один или несколько View могут быть сгруппированы в ViewGroup. Этот класс обеспечивает компоновку, вид и последовательность View. Примерами ViewGroup являются LinearLayout, RelativeLayout, о которых мы сегодня и поговорим.

Основные макеты в Android:

RelativeLayout — это ViewGroup, который определяет положение дочерних View относительно друг друга.
LinearLayout — это ViewGroup, который определяет расположение всех дочерних элементов: по вертикали или по горизонтали.
AbsoluteLayout позволяет указать точное положение дочерних View.
TableLayout рассматривает дочерние элементы в виде строк и столбцов.
GridView — разновидность ViewGroup, в котором элементы представлены в двумерной сетке с прокруткой. Элементы в GridView попадают из назначенного экземпляра ListAdapter.
FrameLayout заполняет собой экран для отображения единственного View.
ListView — набор View, который можно скроллить (прокручивать).
Scrollview — разновидность FrameLayout, позволяющая просматривать элементы пользовательского интерфейса даже если они не видны на первом экране. Это происходит с помощью скроллинга (пользователь прокручивает экран для полной видимости содержимого). Scrollview может содержать только один вид дочерний View и же макет ViewGroup.

Android Layouts: атрибуты XML макета/компоновки

android:id — это идентификатор, который однозначно идентифицирует элемент View
android:layout_width — ширина макета
android:layout_height — высота макета
android:layout_margin — дополнительное пространство за пределами элемента View.
android:layout_padding определяет дополнительное пространство внутри элемента View.
android:layout_gravity определяет расположение дочернего View.
android:layout_weight определяет дополнительного пространства для View.
android:layout_x определяет координаты макета по оси Ox
android:layout_y определяет координаты макета по оси Oy

Атрибут android:layout_width="wrap_content" указывает, что View должно занять ровно столько места по ширине, сколько занимает его содержимое.

Атрибут android:layout_width="match_parent" указывает, что View должно занять ровно столько места по ширине, сколько занимает его родительский элемент.

В этом уроке мы рассмотрим два наиболее популярных в разработке под Android макета:

LinearLayout
RelativeLayout

Макет LinearLayout в Android

Макет LinearLayout в Android группирует элементы в одну линию. В разметке макета указываем атрибут android:orientation, который определяет тип размещения: по вертикали или по горизонтали. По умолчанию стоит значение по горизонтали.
Значение «по вертикали» в LinearLayout означает только один дочерний элемент в строке, а «по горизонтали» означает одну сплошную строку элементов на экране.
Атрибут android:layout_weight указывает важность элемента. Элемент с большим весом занимает больше места на экране.

Макет RelativeLayout в Android

Макет RelativeLayout определяет положение дочерних View относительно друг друга. Дочерние элементы в RelativeLayout определяют свое положение с помощью специальных атрибутов: toLeftOf, toRightOf, below, above. Например, мы явно указываем, что один элемент View должен быть toLeftOf (слева от) другого элемента View.

Мы также можем позиционировать View по отношению к своему родительскому элементу RelativeLayout, например, layout_centerHorizontal — элемент должен быть выравнен по горизонтали и быть по центру. Если ни один из атрибутов для позиционирования не указан, то View будет определен по умолчанию — в левом верхнем углу родительского элемента.

Ниже перечислены основные атрибуты макета RelativeLayout по трех различных категориях позиционирования:

По отношению к родительскому элементу

android:layout_alignParentBottom — в нижней части родительского элемента (родителя/родительского контейнера)
android:layout_alignParentLeft устанавливает элемент в левой части родительского элемента
android:layout_alignParentRight устанавливает элемент в правой части родительского элемента
android:layout_alignParentTop устанавливает элемент в верхней части родителя
android:layout_centerHorizontal центрирует элемент по горизонтали внутри родительского контейнера
android:layout_centerInParent центрирует элемент по горизонтали и по вертикали внутри родительского контейнера (по центре экрана)
android:layout_centerVertical центрирует элемент по вертикали в пределах родительского контейнера

По отношению к соседним элементам

Атрибут android:layout_above устанавливает элемент выше указанного элемента
Атрибут android:layout_below устанавливает элемент ниже указанного элемента
Атрибут android:layout_toLeftOf устанавливает элемент слева от указанного элемента
Атрибут android:layout_toRightOf устанавливает элемент справа от указанного элемента

Следует отметить, что элемент устанавливается относительно другого элемента по его id. Это делается с помощью конструкции «@id/уникальныйИдентификаторЭлемента«, например:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <Button
        android:id="@+id/superButton"
        android:text="Кнопка"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/textView"
        android:text="Какой-то текст"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/superButton" />
</RelativeLayout>

<RelativeLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

xmlns:android="http://schemas.android.com/apk/res/android">

<Button

android:id="@+id/superButton"

android:text="Кнопка"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

<TextView

android:id="@+id/textView"

android:text="Какой-то текст"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below="@id/superButton" />

</RelativeLayout>

Как видим, в макете есть виджет Button с id="@+id/superButton" ниже которого располагается виджет TextView. Это делается с помощью атрибута android:layout_below="@id/superButton".

Выравнивание с другими элементами

android:layout_alignBaseline выравнивает базовую линию элемента с базовой линией указанного элемента
android:layout_alignBottom выравнивает нижнюю часть элемента с нижней части указанного элемента
android:layout_alignLeft выравнивает левый край элемента с левым краем указанного элемента
android:layout_alignRight выравнивает правый край элемента с правым краем указанного элемента
android:layout_alignTop выравнивает верхнюю часть элемента с верхней частью указанного элемента

Вот и все важные атрибуты и элементы для построения пользовательского интерфейса в Android с помощью макетов RelativeLayout и LinearLayout.