Android Layouts: обзор RelativeLayout и LinearLayout | Prologistic.com.ua

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, belowabove. Например, мы явно указываем, что один элемент 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/уникальныйИдентификаторЭлемента«, например:

Как видим, в макете есть виджет 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.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *