Контейнеры компоновки (макеты). AbsoluteLayout

Контейнер компоновки AbsoluteLayout используется в том случае, если вам необходимо указать абсолютные размеры и положение дочерних элементов в контейнере.  В большинстве случаев используются контейнеры типа FlexLayout или StackLayout, которые самостоятельно позиционируют дочерние элементы, однако, иногда и AbsoluteLayout может нам потребоваться для построения графического интерфейса приложения .NET MAUI.

Положение и размер дочерних элементов в AbsoluteLayout

Для того, чтобы задать положение и размер дочерних элементов в контейнере AbsoluteLayout, мы должны использовать его свойство AbsoluteLayout.LayoutBounds, которое представляет собой присоединенное свойство (Attached Property). Чтобы продемонстрировать, что это за присоединенные свойства и как их использовать — рассмотрим пример:

<AbsoluteLayout>
    <Button Text="Item 1" Background="Red" AbsoluteLayout.LayoutBounds="10, 10"></Button>
    <Button Text="Item 2" Background="Aqua" AbsoluteLayout.LayoutBounds="100, 100" ></Button>
    <Button Text="Item 3" Background="Green" AbsoluteLayout.LayoutBounds="200, 200"></Button>
    <Button Text="Item 4" Background="DarkOrange" AbsoluteLayout.LayoutBounds="300, 300"></Button>
</AbsoluteLayout>

Первое, на что необходимо внимание — это как мы используем свойство AbsoluteLayout.LayoutBounds. Именно так и выглядят присоединенные свойства в XAML. То есть присоединенное свойство — это такое свойство, которое объявлено в одном компоненте, но может использоваться в других (дочерних) компонентах. В нашем случае, присоединенное свойство используется в дочерних (вложенных) компонентах Button.

Что касается того, как используется свойство AbsoluteLayout.LayoutBounds, то значение этого свойства можно указывать в двух форматах:

• x, y. В этом случае x и y — это координаты левого верхнего угла дочернего элемента относительно родительского элемента (контейнера AbsoluteLayout). При этом мы можем указать размер дочернего элемента.
• x, y, width, height. В этом случае x и y также указывают позицию левого верхнего угла дочернего элемента, а width и height — указывают размер дочернего элемента.

В нашем примере мы просто указали положение дочерних элементов, используя первый вариант для определения значения свойства AbsoluteLayout.LayoutBounds. В результате мы получим вот такой внешний вид приложения:

При этом, мы можем как угодно менять размер окна приложения (и, соответственно, контейнера компоновки) — элементы так и останутся на своих местах.

Использование пропорциональных значений (AbsoluteLayout.LayoutFlags)

Ещё одно присоединенное свойство — AbsoluteLayout.LayoutFlags позволяет задавать пропорциональные значения координат и размеров дочернего элемента. Пропорциональные значения измеряются от 0 до 1, где 1 — это 100% абсолютной величины. Например, если мы укажем положение дочернего элемента, используя пропорциональные значения, как (1, 1), то это будет означать, что левый верхний угол дочернего элемента будет находиться в нижнем правом углу контейнера (дочерний элемент выйдет за пределы контейнера).

Свойство  AbsoluteLayout.LayoutFlags представляет собой перечисление AbsoluteLayoutFlags и может принимать следующие значения:

Чтобы продемонстрировать работу этого присоединенного свойства, изменим наш пример следующим образом:

<AbsoluteLayout>
    <Button Text="Item 1" Background="Red" 
            AbsoluteLayout.LayoutFlags="PositionProportional" 
            AbsoluteLayout.LayoutBounds="0.5, 0"></Button>
    <Button Text="Item 2" Background="Aqua" 
            AbsoluteLayout.LayoutFlags="PositionProportional" 
            AbsoluteLayout.LayoutBounds="0, 0.5" ></Button>
    <Button Text="Item 3" Background="Green" 
            AbsoluteLayout.LayoutFlags="PositionProportional" 
            AbsoluteLayout.LayoutBounds="1, 0.5"></Button>
    <Button Text="Item 4" Background="DarkOrange" 
            AbsoluteLayout.LayoutFlags="PositionProportional" 
            AbsoluteLayout.LayoutBounds="0.5, 1"></Button>
</AbsoluteLayout>

В этом примере мы используем пропорциональные значения для указания позиции дочернего элемента в контейнере. В запущенном приложении наши кнопки расположатся следующим образом:

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

При использовании пропорциональных значений следует обратить внимание на следующие моменты:

во-первых, при расчёте положения элемента координаты высчитываются по следующей формуле

координата_элемента = (ширина_контейнера - ширина_элемента) * пропорциональное_значение_элемента

поэтому у нас кнопки выстраиваются ровно по центрам сторон контейнера.

во-вторых, свойство AbsoluteLayout.LayoutFlags представляет собой битовые флаги. То есть мы можем объединять несколько значений перечисления. В XAML это делается следующим образом:

<Button Text="Item 1" Background="Red" 
        AbsoluteLayout.LayoutFlags="XProportional, YProportional"

то есть для того, чтобы использовать логическое сложение в XAML для флагов AbsoluteLayoutFlags мы перечисляем эти флаги через запятую в значении свойства. Таким образом, в примере выше мы сложили два флага XProportional и YProportional, получив тот же самый PositionProportional.

Итого

Контейнер компоновки AbsoluteLayout позволяет размещать дочерние компоненты, используя абсолютные или пропорциональные значения положения и размеров дочернего элемента. Абсолютные значения положения и размеров стоит использовать с осторожностью, так как различные устройства могут иметь размеры экрана сильно отличающиеся друг от друга и, поэтому, то, что будет красиво выглядеть на ашем устройстве при использовании абсолютных значений, будет совершенно иначе выглядеть у пользователей приложения.