Как группирует relativelayout дочерние элементы

RelativeLayout

ReiativeLayout (относительная разметка) находится в разделе Layouts и позволяет дочерним компонентам определять свою позицию относительно родительского компонента или относительно соседних дочерних элементов (по идентификатору элемента). В RelativeLayout дочерние элементы расположены так, что если первый элемент расположен по центру экрана, другие элементы, выровненные относительно первого элемента, будут выровнены относительно центра экрана. При таком расположении, при объявлении разметки в XML-файле, элемент, на который будут ссылаться для позиционирования другие объекты представления, должен быть объявлен раньше, чем другие элементы, которые обращаются к нему по его идентификатору.

Важные атрибуты, которые связаны с родителем.

• android:layout_alignParentBottom — выравнивание относительно нижнего края родителя
• android:layout_alignParentLeft — выравнивание относительно левого края родителя
• android:layout_alignParentRight — выравнивание относительно правого края родителя
• android:layout_alignParentTop — выравнивание относительно верхнего края родителя
• android:layout_centerInParent — выравнивание по центру родителя по вертикали и горизонтали
• android:layout_centerHorizontal — выравнивание по центру родителя по горизонтали
• android:layout_centerVertical — выравнивание по центру родителя по вертикали

Некоторые атрибуты можно использовать вместе, чтобы добиться нужного эффекта, например, разместить компонент в верхнем правом углу.

Компонент можно размещать не только относительно родителя, но и относительно других компонентов. Для этого все компоненты должны иметь свой идентификатор, по которому их можно будет отличать друг от друга. В этом случае вы можете задействовать другие атрибуты.

• android:layout_above — размещается над указанным компонентом
• android:layout_below — размещается под указанным компонентом
• android:layout_alignLeft — выравнивается по левому краю указанного компонента
• android:layout_alignRight — выравнивается по правому краю указанного компонента
• android:layout_alignTop — выравнивается по верхнему краю указанного компонента
• android:layout_alignBottom — выравнивается по нижнему краю указанного компонента
• android:layout_toLeftOf — правый край компонента размещается слева от указанного компонента
• android:layout_toRightOf — левый край компонент размещается справа от указанного компонента

Чтобы компоненты «не прилипали» друг к другу, используются атрибуты, добавляющие пространство между ними.

• android:layout_marginTop
• android:layout_marginBottom
• android:layout_marginLeft
• android:layout_marginRight

Рассмотрим простой пример. Допустим, мы хотим поместить на экран элементы EditText и Button. Кнопка должна находиться справа от текстового поля. Текстовое поле при этом должно быть выравнено слева относительно родительского элемента (компоновки) и слева относительно кнопки. В свою очередь кнопка должна быть выравнена справа относительно шаблона компоновки.

Во многих случаях грамотная относительная компоновка хорошо смотрится в альбомной и портретной ориентации.

Программное создание относительной разметки

Если вам понадобится динамически создавать относительную разметку в коде, то делается это следующим образом:

Создавать компоновку для относительной разметки чуть сложнее, чем для линейной компоновки. Рассмотрим ещё один пример. Предположим, нам нужен такой экран

Шаг 1: В XML-файле задаем относительную компоновку.

Шаг 2: Определяем дочерние элементы. В нашем случае мы имеем семь текстовых меток разного цвета. Каждому элементу присваиваем необходимые свойства: текст, цвет, размер символов и так далее.

Шаг 3: Определяем правила относительной разметки.
Красная метка должна находиться в правом верхнем углу родительского элемента.
Оранжевая метка должна располагаться по центру по горизонтали относительно родительского элемент.
Желтая метка выравнивается по правой части родительского элемента.
Зелёная метка выравнивается по центру (по вертикали) и выводится слева от синей метки.
Синяя метка выравнивается по центру (по вертикали и горизонтали) относительно родительского элемента, т.е. точно по центру.
Метка цвета индиго выравнивается по центру (по вертикали) и выводится справа от синей метки.
Фиолетовая метка выводится в нижней части родительского элемента и занимает всю её ширину.

При разработке макета с относительной разметкой следите, чтобы элементы не налезали друг на друга (можете получить сообщение об ошибке). Старайтесь не усложнять макет и не забывайте присваивать уникальный идентификатор каждому элементу. Проверяйте макет в разных режимах ориентации.

Создаём неподвижную полоску

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

И простой код для создания прокручиваемого списка, чтобы увидеть эффект неподвижной полоски с кнопкой.

Как группирует relativelayout дочерние элементы

RelativeLayout представляет объект ViewGroup , который располагает дочерние элементы относительно позиции других дочерних элементов разметки или относительно области самой разметки RelativeLayout. Используя относительное позиционирование, мы можем установить элемент по правому краю или в центре или иным способом, который предоставляет данный контейнер. Для установки элемента в файле xml мы можем применять следующие атрибуты:

android:layout_above : располагает элемент над элементом с указанным Id

android:layout_below : располагает элемент под элементом с указанным Id

android:layout_toLeftOf : располагается слева от элемента с указанным Id

android:layout_toRightOf : располагается справа от элемента с указанным Id

android:layout_toStartOf : располагает начало текущего элемента, где начинается элемент с указанным Id

android:layout_toEndOf : располагает начало текущего элемента, где завершается элемент с указанным Id

android:layout_alignBottom : выравнивает элемент по нижней границе другого элемента с указанным Id

android:layout_alignLeft : выравнивает элемент по левой границе другого элемента с указанным Id

android:layout_alignRight : выравнивает элемент по правой границе другого элемента с указанным Id

android:layout_alignStart : выравнивает элемент по линии, у которой начинается другой элемент с указанным Id

android:layout_alignEnd : выравнивает элемент по линии, у которой завершается другой элемент с указанным Id

android:layout_alignTop : выравнивает элемент по верхней границе другого элемента с указанным Id

android:layout_alignBaseline : выравнивает базовую линию элемента по базовой линии другого элемента с указанным Id

android:layout_alignParentBottom : если атрибут имеет значение true, то элемент прижимается к нижней границе контейнера

android:layout_alignParentRight : если атрибут имеет значение true, то элемент прижимается к правому краю контейнера

android:layout_alignParentLeft : если атрибут имеет значение true, то элемент прижимается к левому краю контейнера

android:layout_alignParentStart : если атрибут имеет значение true, то элемент прижимается к начальному краю контейнера (при левосторонней ориентации текста — левый край)

android:layout_alignParentEnd : если атрибут имеет значение true, то элемент прижимается к конечному краю контейнера (при левосторонней ориентации текста — правый край)

android:layout_alignParentTop : если атрибут имеет значение true, то элемент прижимается к верхней границе контейнера

android:layout_centerInParent : если атрибут имеет значение true, то элемент располагается по центру родительского контейнера

android:layout_centerHorizontal : при значении true выравнивает элемент по центру по горизонтали

android:layout_centerVertical : при значении true выравнивает элемент по центру по вертикали

Например, позиционирование относительно контейнера RelativeLayout:

Для позиционирования относительно другого элемента, нам надо указать id этого элемента. Так, поместим на RelativeLayout текстовое поле и кнопку:

В данном случае поле EditText располагается по центру в RelativeLayout, а кнопка помещается под EditText и выравнивается по его правой границе:

Программное создание RelativeLayout

Создадим элемент RelativeLayout программно в коде Java:

Чтобы задать положение элемента в контейнере, применяется класс RelativeLayout.LayoutParams . Через конструктор устанавливаются значения для для ширины и высоты. Например, у элемента EditText для ширины устанавливается значение MATCH_PARENT , а для высоты — WRAP_CONTENT .

С помощью метода addRule() мы можем добавлять дополнительные правила для позиционирования элемента. Этот метод в качестве параметра принимает числовую константу, которая представляет параметр позиционирования и которая аналогична атрибуту. Например, атрибуту android:layout_centerInParent будет соответствовать константа CENTER_IN_PARENT , а атрибуту android:layout_alignRight константа ALIGN_RIGHT .

Стоит отметить, что в целях упрощения кода для установки id у EditText вызывается метод generateViewId(); , который позволяет программно сгенерировать id для элемента управления.

Затем установленный id передается в качестве второго параметра в метод addRule при установке правил для кнопки:

Тем самым мы указываем относительно какого элемента надо задать расположение.

Краткий обзор Layout XML в Android. Часть 1

Пока модные и современные тестируют Jetpack Compose в новых проектах, мы с вами поговорим о старой доброй XML разметке.

Буквально по паре предложений о каждом Layout, чтобы составить общее представление об их применении. Для тех, кто хочет подробностей — прикрепил дополнительные ссылки.

Статья рассчитана на тех, кто только начинает разработку на Android, но, возможно, и более опытные разработчики почерпнут для себя полезные сведения.

1. FrameLayout

Самый простой тип разметки.

Все дочерние элементы FrameLayout прикрепляются к верхнему левому углу экрана.

В разметке FrameLayout нельзя определить различное местоположение для дочернего объекта. Последующие дочерние объекты View будут просто рисоваться поверх предыдущих компонентов, частично или полностью затеняя их, если находящийся сверху объект непрозрачен, поэтому единственный дочерний элемент для FrameLayout обычно растянут до размеров родительского контейнера и имеет атрибуты:

2. CoordinatorLayout

Является наследником стандартного FrameLayout.

Главная фишка CoordinatorLayout — свои Default behavior, с помощью Behaviors можно управлять дочерней View.

Основной привлекательностью CoordinatorLayout является его способность координировать анимацию и переходы представлений в самом файле XML.

3. LinearLayout

Представлен двумя вариантами — Horizontal и Vertical.

Выравнивает все дочерние объекты в одном направлении — вертикально или горизонтально.

Направление задается при помощи атрибута ориентации android:orientation:

4. TableLayout

Отображает элементы в виде таблицы, по строкам и столбцам.

Не отображает линии обрамления для строк, столбцов или ячеек.

Количество ячеек в разных строках может отличаться.

При формировании строки некоторые ячейки можно оставлять пустыми.

Для формирования строк интерфейса необходимо использовать объект TableRow, который должен быть дочерним элементом контейнера TableLayout. Каждый компонент TableRow определяет единственную строку в таблице. Ячейки строки являются контейнерами для других объектов. В ячейку можно вкладывать другой TableLayout или LinearLayout. Этот вид разметки удобно использовать, например, при создании логических игр типа Судоку, Крестики-Нолики и т.п.

5. GridLayout

Для любого компонента можно указать строку и колонку, и в этом месте таблицы он будет размещён.

Компоненты могут растягиваться на несколько ячеек таблицы.

В одну ячейку можно поместить несколько компонентов.

В данной разметке нельзя использовать атрибут веса, поскольку он не сработает в дочерних представлениях GridLayout. Используйте атрибут layout_gravity.

6. SwipeRefreshLayout

Работает по принципу «проведи пальцем вниз, чтобы выполнить какую-то функцию (например, обновить)».

7. RelativeLayout

Располагает дочерние элементы относительно позиции других дочерних элементов разметки или относительно области самой разметки RelativeLayout.

Бонус для тех, кто любит не только читать статьи, а еще и смотреть видео:

Хм, а где же ConstraintLayout? Ты что, забыл про самый крутой макет?

Дело в том, что у ConstraintLayout столько возможностей и «фишек», что логичнее посвятить ему отдельную статью, а не пытаться впихнуть все в первую часть.

Аналогично и с MotionLayout — про анимацию есть смысл рассказать в последующих частях обзорной статьи.

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