CODEWITHSUNDEEP
iosxamarin.iosxamarin
cotampanie
cotampanie

Reputation: 65

How to create such layout in xamarin?

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?

Upvotes: 5

Views: 2846

Answers (2)

Alex
Alex

Reputation: 461

The best would be to use an UINavigationController for the basic Form. I figured out for me that this is the best to handle the top bar and further navigation in the app. Then call the method SetToolbarHidden. Now you have the two bars. For the content area take an uiviewcontroller. Then call at the UINavigationController the method PushViewController with the uiviewcontroller as parameter. That's it. PS sorry for the bad layout of my answer I did this with my smartphone.

Upvotes: 0

Krumelur
Krumelur

Reputation: 33068

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);

}

Upvotes: 4

Related Questions