AbsoluteLayout in Xamarin Forms

AbsoluteLayout positions and sizes child elements proportional to its own size and position
 or by absolute values. Child views may be positioned and sized using proportional values or
 static values, and proportional and static values can be mixed.



A definition of an AbsoluteLayout in XAML looks like this:


<AbsoluteLayout>   
 <Label Text="I'm centered on iPhone 4 but no other device"   
    AbsoluteLayout.LayoutBounds="115,150,100,100" LineBreakMode="WordWrap"  /> 
   <Label Text="I'm bottom center on every device."     
  AbsoluteLayout.LayoutBounds=".5,1,.5,.1" AbsoluteLayout.LayoutFlags="All" 
      LineBreakMode="WordWrap"  />   
 <BoxView Color="Olive"  AbsoluteLayout.LayoutBounds="1,.5, 25, 100"  
     AbsoluteLayout.LayoutFlags="PositionProportional" />  
  <BoxView Color="Red" AbsoluteLayout.LayoutBounds="0,.5,25,100"   
    AbsoluteLayout.LayoutFlags="PositionProportional" />  
  <BoxView Color="Blue" AbsoluteLayout.LayoutBounds=".5,0,100,25"     
  AbsoluteLayout.LayoutFlags="PositionProportional" />   
 <BoxView Color="Blue" AbsoluteLayout.LayoutBounds=".5,0,1,25"   
    AbsoluteLayout.LayoutFlags="PositionProportional, WidthProportional" /> 
</AbsoluteLayout>


The same layout would look like this in code:


Title = "Absolute Layout Exploration - Code";
 var layout = new AbsoluteLayout();
var centerLabel = new Label { Text = "I'm centered on iPhone 4 but no other device.",
 LineBreakMode = LineBreakMode.WordWrap};
AbsoluteLayout.SetLayoutBounds (centerLabel, new Rectangle (115, 159, 100, 100));
// No need to set layout flags, absolute positioning is the default
var bottomLabel = new Label { Text = "I'm bottom center on every device.",
 LineBreakMode = LineBreakMode.WordWrap };
 AbsoluteLayout.SetLayoutBounds (bottomLabel, new Rectangle (.5, 1, .5, .1));
 AbsoluteLayout.SetLayoutFlags (bottomLabel, AbsoluteLayoutFlags.All);
var rightBox = new BoxView{ Color = Color.Olive };
 AbsoluteLayout.SetLayoutBounds (rightBox, new Rectangle (1, .5, 25, 100));
 AbsoluteLayout.SetLayoutFlags (rightBox, AbsoluteLayoutFlags.PositionProportional);
var leftBox = new BoxView{ Color = Color.Red };
 AbsoluteLayout.SetLayoutBounds (leftBox, new Rectangle (0, .5, 25, 100));
 AbsoluteLayout.SetLayoutFlags (leftBox, AbsoluteLayoutFlags.PositionProportional);
var topBox = new BoxView{ Color = Color.Blue };
 AbsoluteLayout.SetLayoutBounds (topBox, new Rectangle (.5, 0, 100, 25));
 AbsoluteLayout.SetLayoutFlags (topBox, AbsoluteLayoutFlags.PositionProportional);
var twoFlagsBox = new BoxView{ Color = Color.Blue };
 AbsoluteLayout.SetLayoutBounds (topBox, new Rectangle (.5, 0, 1, 25));
 AbsoluteLayout.SetLayoutFlags (topBox, AbsoluteLayoutFlags.PositionProportional | AbsoluteLayout.WidthProportional);
layout.Children.Add (bottomLabel);
layout.Children.Add (centerLabel);
layout.Children.Add (rightBox);
layout.Children.Add (leftBox);
layout.Children.Add (topBox);

The AbsoluteLayout control in Xamarin.Forms allows you to specify where exactly
on the screen you want the child elements to appear, as well as their size and shape (bounds).
There are a few different ways to set the bounds of the child elements based on the
AbsoluteLayoutFlags enumeration that are used during this process.

 The AbsoluteLayoutFlags enumeration contains the following values:


  • All: All dimensions are proportional.
  •  HeightProportional: Height is proportional to the layout.
  •  None: No interpretation is done. 
  • PositionProportional: Combines XProportional and YProportional.
  •  SizeProportional: Combines WidthProportional and HeightProportional.
  •  WidthProportional: Width is proportional to the layout.
  •  XProportional: X property is proportional to the layout.
  •  YProportional: Y property is proportional to the layout.


The process of working with the layout of the AbsoluteLayout container may seem a little
 counterintuitive at first, but with a little use it will become familiar. Once you have
created your child elements, to set them at an absolute position within the
 container you will need to follow three steps. You will want to set the flags assigned
 to the elements using the AbsoluteLayout.SetLayoutFlags() method. You will also want
to use the AbsoluteLayout.SetLayoutBounds() method to give the elements their bounds.
 Finally, you will want to add the child elements to the Children collection.
 Since Xamarin.Forms is an abstraction layer between Xamarin and the device-specific
implementations, the positional values can be independent of the device pixels.
 This is where the layout flags mentioned previously come into play.
You can choose how the layout process of the Xamarin.Forms controls should interpret
the values you define.

Comments

Popular posts from this blog

ScrollView in xamarin forms

Checkbox and RadioButon in xamarin forms

Navigation in Xamarin.Forms