iOS Autolayout keep distance from 2 views

Question

I'd like to have some views fixed on the top of the screen, some other on the bottom and a single fixed size view in the equal distance between the top and bottom views.

I cannot figure out how to do this with Autolayout constraints. Do I need to add some spacer views to the UI, or calculate the desired position programatically?

Answer 1

You can do this with only one additional view. It'd look like this:

stuff_on_top
middle_view (with fixed size view inside)
stuff_on_bottom

There'd be vertical spacing constraints between stuff_on_top & middle_view and between middle_view & stuff_on_bottom. fixed size view would be centered horizontally and vertically in middle_view.

The other way of doing this would be two put two spacer views: between stuff_on_top & middle_view and between middle_view & stuff_on_bottom. Then you'd add a constraint that heights of spacing views are equal.

Answer 2

Check out this category: https://github.com/jrturton/UIView-Autolayout

Then you can do something as simple as this...

#import "UIView+AutoLayout.h"

...

- (void)viewDidLoad
{
    [super viewDidLoad];

    UIView *topView = [UIView autoLayoutView];
    UIView *centralContainerView = [UIView autoLayoutView];
    UIView *centralView = [UIView autoLayoutView];
    UIView *bottomView = [UIView autoLayoutView];

    topView.backgroundColor = [UIColor redColor];
    bottomView.backgroundColor = [UIColor redColor];
    centralView.backgroundColor = [UIColor greenColor];

    [self.view addSubview:topView];
    [self.view addSubview:centralContainerView];
    [centralContainerView addSubview:centralView];
    [self.view addSubview:bottomView];


    //Pins the topView to the top, left and right edges of its superview (in iOS 7, it uses the topLayoutGuide)
    [topView pinToSuperviewEdges:JRTViewPinTopEdge|JRTViewPinLeftEdge|JRTViewPinRightEdge inset:0 usingLayoutGuidesFrom:self];
    //Constrains the height of topView to 75pts (if a value is passed as zero, no constrain is applied to that axis)
    [topView constrainToSize:CGSizeMake(0, 75)];

    //Pins the centralContainerView to the left and right edges of its superview
    [centralContainerView pinToSuperviewEdges:JRTViewPinLeftEdge|JRTViewPinRightEdge inset:0];
    //Pins the top of centralContainerView to the bottom of topView
    [centralContainerView pinEdge:NSLayoutAttributeTop toEdge:NSLayoutAttributeBottom ofItem:topView];
    //Pins the bottom of centralContainerView to the top of bottomView
    [centralContainerView pinEdge:NSLayoutAttributeBottom toEdge:NSLayoutAttributeTop ofItem:bottomView];

    //Centers centralView on the Y axis of its superview
    [centralView centerInContainerOnAxis:NSLayoutAttributeCenterY];
    //Pins the centralView to the left and right edges of its superview
    [centralView pinToSuperviewEdges:JRTViewPinLeftEdge|JRTViewPinRightEdge inset:0];
    //Constrains the height of topView to 100pts
    [centralView constrainToSize:CGSizeMake(0, 100)];

    //Pins the topView to the bottom, left and right edges of its superview (in iOS 7, it uses the bottomLayoutGuide)
    [bottomView pinToSuperviewEdges:JRTViewPinBottomEdge|JRTViewPinLeftEdge|JRTViewPinRightEdge inset:0 usingLayoutGuidesFrom:self];
    //Constrains the height of topView to 75pts
    [bottomView constrainToSize:CGSizeMake(0, 75)];

}

And you get an output like this:

Edit:

I didn't see the interface-builder tag and just jumped to conclusions... An interface builder alternative would work similar to above.. You would need to have three main views, one pinned to the top and the other pinned to the bottom.. Then one with a flexible width that is pinned to the other two views.

You can then centre a fourth view with a fixed height in your middle view. This will then give you the result you are looking for

Answer 3

I code this https://github.com/damienromito/UIView-AutoYPositioning

But I think a solution with AutoLayout exist...