2.1. Позиционирование¶
Разметка визуального представления имеет иерархическую структуру. Это значит, что внутри одного родительского контейнера может находиться несколько других дочерних визуальных элементов, которые, в свою очередь, тоже могут быть родительскими для других.
Примечание
Важно помнить, что корневой элемент должен быть только один.
Иерархия¶
Для создания сценариев достаточно использовать следующие типы вёрстки:
"LinearLayout""RelativeLayout"
«LinearLayout» - тип верстки, при котором элементы позиционируются строго друг за другом в том же порядке, в котором они были добавлены в разметку.
По умолчанию ориентация позиционирования элементов вертикальная, но лучше всего всегда указывать её явно, прописывая атрибуты orientation: "horizontal" или orientation: "vertical".
Если бы было необходимо создать такую же разметку, как и на картинке выше, то пришлось бы создать четыре LinearLayout блока.
Блок 0 должен был быть с вертикальной ориентацией, а Блок 1, Блок 2 и Блок 3 с горизонтальной.
При этом для внутренних элементов каждого из блоков не нужно явно указывать их позиционирование.
Достаточно расположить их в нужном порядке в разметке.
«RelativeLayout» — тип верстки, при котором позиционирование элементов происходит относительно друг друга и относительно главного контейнера.
Это значит, что каждому элементу разметки можно указать, где он должен позиционироваться относительно родительского элемента и относительно других, находящихся на его «уровне» элементов.
В "RelativeLayout" дочерние элементы расположены так, что если первый элемент расположен по центру экрана, другие элементы, выровненные относительно первого элемента, будут тоже выровнены относительно центра экрана.
При таком расположении, при объявлении разметки, элемент, на который будут ссылаться для позиционирования другие объекты представления, должен быть объявлен раньше, чем другие элементы, которые обращаются к нему по его идентификатору.
Это позволяет более гибко настроить дизайн окна, хотя и требуется приложить дополнительные усилия на добавление атрибутов позиционирования.
Настраивать позиционирование дочерних элементов внутри "RelativeLayout" можно с помощью специальных атрибутов.
Возможные значения атрибутов для дочерних элементов
Расположение относительно родительского элемента:
"layout_alignParentTop"— верхняя граница элемента располагается на верхней границе RelativeLayout."layout_alignParentLeft"— левая граница элемента располагается на левой границе RelativeLayout."layout_alignParentBottom"— нижняя граница элемента располагается на нижней границе RelativeLayout."layout_centerInParent"— элемент располагается в центре родительского по горизонтали и вертикали."layout_centerHorizontal"— элемент располагается в центре родительского по горизонтали."layout_centerVertical"— элемент располагается в центре родительского по вертикали.
Подсказка
Значением атрибута является "true".
Расположение относительно других элементов:
"layout_above"— элемент располагается сверху от другого элемента."layout_toLeftOf"— элемент располагается слева от другого элемента."layout_toRightOf"— элемент располагается справа от другого элемента."layout_below"— элемент располагается снизу от другого элемента."layout_alignBaseline"— базовая линия элемента выравнивается по базовой линии другого элемента."layout_alignTop"— верхняя граница элемента выравнивается по верхней границе другого элемента."layout_alignLeft"— левая граница элемента выравнивается по левой границе другого элемента."layout_alignRight"— правая граница элемента выравнивается по правой границе другого элемента."layout_alignBottom"— нижняя граница элемента выравнивается по нижней границе другого элемента.
Подсказка
Значением атрибута является «id» другого элемента.
Рассмотрим два примера, как можно было бы сконструировать макет, похожий на макет с картинки выше. Для упрощения «Блок 3» описываться не будет, а «Блок 1» правильнее пропустить, так как в нашем случае он содержит только один дочерний элемент.
Пример макета страницы с использованием только "LinearLayout":
{
"type": "LinearLayout",
"id": "block0",
"layout_width": "match_parent",
"layout_height": "match_parent",
"orientation": "vertical",
"children": [
{
"type": "Component",
"layout": "position1",
"layout_width": "match_parent",
"layout_height": "wrap_content"
},
{
"type": "LinearLayout",
"id": "block2",
"layout_width": "match_parent",
"layout_height": "wrap_content",
"orientation": "horizontal",
"children": [
{
"type": "Component",
"layout": "position2",
"layout_width": "wrap_content",
"layout_height": "wrap_content"
},
{
"type": "Component",
"layout": "content",
"layout_width": "wrap_content",
"layout_height": "wrap_content"
},
{
"type": "Component",
"layout": "position4",
"layout_width": "wrap_content",
"layout_height": "wrap_content"
}
]
}
]
}
Идентификаторы для этого примера можно было не указывать, так как они не играют никакой роли ни в позиционировании, ни в логике.
Примечание
Работа с размерами и с элементами типа "Component" рассмотрена в других разделах.
Пример макета с использованием "RelativeLayout":
{
"type": "RelativeLayout",
"id": "block0",
"layout_width": "match_parent",
"layout_height": "match_parent",
"children": [
{
"type": "Component",
"layout": "position1",
"layout_width": "match_parent",
"layout_height": "wrap_content",
"layout_alignParentLeft": "true",
"layout_alignParentTop": "true"
},
{
"type": "RelativeLayout",
"id": "block2",
"layout_width": "match_parent",
"layout_height": "wrap_content",
"layout_below": "position1",
"children": [
{
"type": "Component",
"id": "component1",
"layout": "position2",
"layout_width": "wrap_content",
"layout_height": "wrap_content",
"layout_alignParentTop": "true",
"layout_alignParentRight": "true"
},
{
"type": "Component",
"id": "component3",
"layout": "position4",
"layout_width": "wrap_content",
"layout_height": "wrap_content",
"layout_alignParentRight": "true"
},
{
"type": "Component",
"id": "component2",
"layout": "content",
"layout_width": "wrap_content",
"layout_height": "wrap_content",
"layout_toRightOf": "component1",
"layout_toLeftOf": "component3"
}
]
}
]
}