В этой статье мы ударимся в теорию и рассмотрим основные блоки для построения пользовательского интерфейса: рассмотрим различные 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
определяет координаты макета по оси Oxandroid: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/уникальныйИдентификаторЭлемента
«, например:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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
.