Xamarin Forms - AbsoluteLayout - How does works positions

Question

I'm working with Xamarin.Forms with AbsoluteLayout, however, I'm not sure to understand how to works the positionning of elements.

I'm working with Proportional Values so if I'm placing an element at AbsoluteLayout.LayoutBounds="1, 0.05, 0.15, 0.1" where each values is Proportional (so the flags are "all" AbsoluteLayout.LayoutFlags="All")

It will be placed at the top/right of the screen. It will not take a place a bit outside however. So what does it means? Each element are repositionned into the screen if they go outside?

But now, another question comes, when you place an element, on what is based the X/Y position? Does is the center or another point?

On this example, I tried with 0.15 but the rendering was a bit weird, so I put 0 and then the rendering match with what I want.

You could say "Test it and you'll see.", however, It's a waste of time for the designer and me, to position every elements, because we're not sure to understand how does it works. So we juste make try with debuging..

We are also searching to know if a software exist to generate positions about the design made by the designer. We mean the position X/Y of the element in percent.

Thank in advance !

Answer 1

With AbsoluteLayoutFlag.All, the Rectangle bounds parameters have the following meaning:

• x means the percentage of the remaining space (i.e parent width - control width) which should be on the left of the control
• y means the percentage of the remaining space (i.e parent height - control height) which should be on the top of the control
• width is the width of the control in percentage of the parent width
• height is the height of the control in percentage of the parent height

Width and height are what people usually expect. However, x and y are not as people are more used to "left" and "top". So you can write a converter to convert left percentage into x and top percentage into y:

x = left / (1 - width)
y = top / (1 - height)

Answer 2

<AbsoluteLayout BackgroundColor="Yellow">
<BoxView
    Color="Red"
    AbsoluteLayout.LayoutBounds="1.0, 1.0, 0.5, 0.5"
    AbsoluteLayout.LayoutFlags="All" />

<BoxView
    Color="Green"
    WidthRequest="50"
    HeightRequest="50"
    AbsoluteLayout.LayoutBounds="0.1, 0.1, AutoSize, AutoSize"
    AbsoluteLayout.LayoutFlags="PositionProportional" />

<BoxView
    Color="Blue"
    AbsoluteLayout.LayoutBounds="0.25, 0.25, 0.5, 0.5"
    AbsoluteLayout.LayoutFlags="All" />
</AbsoluteLayout>

When I researched AbsoluteLayout I created this sample and

Test it and you'll see

What I've decided from my investigation: X and Y are coordinates of top left corner of View. It's relative position. As you can see for red rectangle 1.0, 1.0 is center position, so, as I understand, 100% width of screen is 2.0(same for height). All views inside AbsoluteLayout positioned dependently on values of parent AbsoluteLayout.

Edited:

X and Y are center coordinate of View, not left top corner. And 100% of Width is 1.0.

Answer 3

I did some testing and found that,With AbsoluteLayoutFlag.All, essentially the X value given as a Percentage basically represents where the anchor is on a rectangle. As in if X = 10% then the anchor is 10% from the left of the Rectangle:

example

At X = 0.1 with a given width of 20%. 90% of the length will go to the right and 10% will go to the left.

At X = 0.5 with a given width of 20%. 10% will go to left and 10% to the right.

Formula for X bounds

Variables in Rectangle (Ax, Ay, Wx, Wy):

W - required width

Ax - X value. (anchor position)

X1 - X position value of top left corner relative to left side (X = 0)

X2 - x position value of top right corner relative to left side (X = 0)

The Formula has 5 possible scenarios for an Anchor value

Ax = 0:

X1 = 0 & X2 = Wx

Ax = 1:

X2 = 1 & X1 = (1 - Wx)

Ax = 0.5

X1 = Ax - (0.5)(Wx)

X2 = Ax + (0.5)(Wx)

0 < Ax < 0.5

X1 = Ax - (Ax)(Wx)

X2 = Ax + (1 - Ax)(Wx)

0.5 < Ax < 1

X1 = Ax - (Ax)(Wx)

X2 = Ax + (1-Ax)(Wx)

Answer 4

X && Y are the center of the element

Answer 5

As a late answer, I've put a nuget package with a fork of AbsoluteLayout but working as I'd expect.

Install nuget package SmartMachines.AbsoluteLayout, add namespace xmlns:sm="clr-namespace:SmartMachines;assembly=AbsoluteLayout" and you will have exactly same AbsoluteLayout as native Xamarin, but with expected Proportional alignment behavior.

Hope that will save other people several hours on googling and debugging.

Answer 6

With AbsoluteLayout.LayoutFlags="All", the LayoutBounds (x, y, width, height) should be interpreted as follows:

• width and height simply represent the respective dimensions of the child as a proportion of the AbsoluteLayout's overall size. For example, a width of 0.1 would create a child 10% of the width of the layout, 0.9 would cover 90% and 1.0 will fill the parent from left to right.
• x and y represent the position within the parent, relative to the extremes of movement possible with the child still wholly visible within the layout. So: an x value of 0.0 places the left edge of the child against the left edge of the layout container and a value of 1.0 aligns the child's right edge with the container's right edge. Values between 0 and 1 represent positions between those extremes, moving the child proportionately through the range of movement available to it when the child is kept completely within the layout.

A nice way to think about the x / y positioning is to compare it with a window scroll bar or a value slider control because the whole scroll bar is visible at all times and it can be thought of as sliding between a value of 0 (document at top) and 1 (document at bottom).

Needless to say, centring a child is done by setting x or y to 0.5, regardless of width or height values.