Often, while developing an application we face situations where we have a design that needs to implement different layouts that are not the ones we normally use (For example: StackLayout, GridLayo
Some mockups have a more complex design in which we need to organize some graphic controls overlapping others. That’s why, now Im going to explain you an easy way to learn how use AbsoluteLayout.
Learning the structure
To start creating an AbsoluteLayout, we only need to define the AbsoluteLayout tags, declare all the graphic elements that we need, and then, set the properties that allow us to position this elements on the screen: LayoutBounds and Layou
Step 1⃣: Add the following tags:
Step 2⃣: Add as much graphic element as you need and add to each one of the AbsoluteLayout.Bounds and AbsoluteLayout.LayoutFlags pro
This property, it’s only used to set the X,Y positions and the width and height sizes. These values can be Proportional or Absolute, let’s learn one by one:
Defines a relationship between a layout and a view. This proportion is defined based on a child view’s position in proportion to the layout parent. To use it, we have to make sure of the following things:
You have to set the AbsoluteLayout.LayoutFlags
X and Y values must be set to any value between 0 and 1.
To get a right proportional values, you have to apply the following calculation: If you have a view with a width of 600, you should divide the desired proportional value with the proportional width base (In this case 600), for example if we want to get the third part of 600 we just have to do this: 200 / 600 = 0.33. And the 0.33 is the value that will be set in the width position. Here an example of the proportional type:
Defines the values with fixed position, unlike to the proportional, this type just get the position no matter if fits on the screen or not, for example we can add a Button in the middle of the screen of a determinate device, but if we run the applicacion in a device with a diferente size, the button position will be different.
To use it, you don’t have to set the LayoutFlags.
This property is responsible to specify how values will be interpreted on the screen. We have some options to set this property, such as:
PositionProportional: Gets X and Y as proportional layout, the remaining elements are absolutes.
SizeProportional: Gets the Width and the Height as proportional layout, the remaining elements are absolutes.
XProportional – YProportional: Gets X or Y respectively as proportional layout, the remaining elements are absolutes.
WidthProportional – HeightProportional: Gets the Width or the Height respectively as proportional layout, the remaining elements are absolutes.
All: Gets all values as proportional.
If you want to have all the value as absolute, just don’t set this property.
You must set this property as the following line:
But you may ask, what happens if I want to mixed both property types? 🤔
The answer is Yes! You can do it! 🎉 You just make sure of the following:
If you want to mix the LayoutBound with proportional and absolute values you must set the values that you want (X, Y, Width and height), and then, you set the LayoutFlags property with the corresponding value. (XProportional, YProportional among others that I explain previously).
Let’s see an example:
In the example, I used the X and the Width as proportional values (0.8 and 0.3 respectively) that’s the reason why in this case are setting the LayoutFlags with XProportional,
And now, let’s practice 😎
And done!! The absoluteLayout is ready! 😎
Thanks for reading!!! 💚❣