How to create such layout in xamarin?

Question

I'm new in Xamarin and iOS development. I have problem with creating layout like on picture below.

http://cdn.vanillaforums.com/xamarin.vanillaforums.com/FileUpload/6f/7eb37b9abb0d8cdcef8d238d1a4b2f.png

I would like to have two views with fixed size on top and the bottom and one flexible in the middle. I want middle view to be flexible because I want to have same layout on 3,5 and 4 inch screens.

Can you please send me some clues how to achieve that?

Answer 1

If you do not want to support rotation, you can create a fixed layout as the screen size won't change during runtime. In this case just place your top view at the top, bottom view at View.Bounds.Height - requiredBottomViewHeight and the middle view make as high as the parent view minus sum of heights of bottom and top.

If you need rotation, either work with:

• AutoResizingMask
• Override LayoutSubviews()
• Or auto layout. To simplify auto layout, there is a great helper class made by Frank Krueger named EasyLayout. You can find examples here.

The recommended way to do it these days is to use auto layout and constraints. However in this simple case you can safely use auto resizing masks. The code below will generate the layout you want and also support rotation. You can generate the same effect in Storyboard Designer or Interface Builder by setting the auto resizing masks as shown below.

public override void ViewDidLoad ()
        {
            var topView = new UIView {
                BackgroundColor = UIColor.Red,
                Frame = new RectangleF(0, 0, this.View.Bounds.Width, 50),
                AutoresizingMask = UIViewAutoresizing.FlexibleWidth
            };
            var bottomView = new UIView {
                BackgroundColor = UIColor.Blue,
                Frame = new RectangleF(0, this.View.Bounds.Height - 50, 320, 50),
                AutoresizingMask = UIViewAutoresizing.FlexibleTopMargin | UIViewAutoresizing.FlexibleWidth
            };
            var middleView = new UIView {
                Frame = new RectangleF(0, topView.Frame.Bottom, this.View.Bounds.Width, this.View.Bounds.Height - topView.Bounds.Height - bottomView.Bounds.Height),
                BackgroundColor = UIColor.Green,
                AutoresizingMask = UIViewAutoresizing.FlexibleHeight | UIViewAutoresizing.FlexibleWidth
            };
            this.View.AddSubviews (topView, middleView, bottomView);

}