Two views, one below the other in portrait and side by side in the landscape using layout constraints

Question

Suppose I have two kinds of text. In portrait mode, I want them to be below the other & In landscape mode, I want them to be side by side

Is it possible to do this using layout constraints in the storyboard using autorun? If so, how? If not, what would be the best solution for this.

ios6 is my target version

Answer 1

Here's how you can do it in code.

Basically you need to:

a) configure the appropriate NSLayoutConstraint for this orientation in updateViewConstraints in the UIViewController .

b) call [self.view setNeedsUpdateConstraints] when the interface rotates.

The following is a ViewController implementation and category in a UIView with helper methods.

 @interface ConstraintsViewController () @property (nonatomic, weak) IBOutlet UIView *upperOrLeftView, *lowerOrRightView; @end @implementation ConstraintsViewController -(void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration { [super willAnimateRotationToInterfaceOrientation:toInterfaceOrientation duration:duration]; [self.view setNeedsUpdateConstraints]; } -(void)updateViewConstraints { [super updateViewConstraints]; [self.view removeConstraintsRelatingToItems:@[self.upperOrLeftView,self.lowerOrRightView]]; if(UIInterfaceOrientationIsPortrait(self.interfaceOrientation)) { [self.view constrainSubview:self.upperOrLeftView usingEdgeInsets:UIEdgeInsetsMake(0, 0, -1, 0)]; [self.view constrainSubview:self.lowerOrRightView usingEdgeInsets:UIEdgeInsetsMake(-1, 0, 0, 0)]; [self.view constrainSubviewsTopToBottom:@[self.upperOrLeftView, self.lowerOrRightView]]; } else { [self.view constrainSubview:self.upperOrLeftView usingEdgeInsets:UIEdgeInsetsMake(0, 0, 0, -1)]; [self.view constrainSubview:self.lowerOrRightView usingEdgeInsets:UIEdgeInsetsMake(0, -1, 0, 0)]; [self.view constrainSubviewsLeftToRight:@[self.upperOrLeftView, self.lowerOrRightView]]; } } @end 

Put this in UIView + Constraints.h

 @interface UIView (Constraints) -(void)removeConstraintsRelatingToItems:(NSArray*)items; -(void)constrainSubview:(UIView*)subview usingEdgeInsets:(UIEdgeInsets)insets; -(void)constrainSubviewsLeftToRight:(NSArray*)subviews; -(void)constrainSubviewsTopToBottom:(NSArray*)subviews; @end 

This is UIView + Constraints.m

 @implementation UIView (Constraints) -(void)removeConstraintsRelatingToItems:(NSArray *)items { for(NSLayoutConstraint *constraint in self.constraints) { if([items containsObject:constraint.firstItem] || [items containsObject:constraint.secondItem]) { [self removeConstraint:constraint]; } } } /** Set up constraints to flow the subviews from top to bottom and with equal heights */ -(void)constrainSubviewsTopToBottom:(NSArray*)subviews { if(subviews.count > 1) { UIView *anchorView = subviews[0]; for(int i = 1; i < subviews.count; i++) { UIView *view = subviews[i]; NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:anchorView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:view attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0.0]; NSLayoutConstraint *edgesConstraint = [NSLayoutConstraint constraintWithItem:anchorView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:view attribute:NSLayoutAttributeTop multiplier:1.0 constant:0.0]; [self addConstraints:@[heightConstraint, edgesConstraint]]; anchorView = view; } } } /** Set up constraints to flow the subviews from left to right and with equal widths */ -(void)constrainSubviewsLeftToRight:(NSArray*)subviews { if(subviews.count > 1) { UIView *anchorView = subviews[0]; for(int i = 1; i < subviews.count; i++) { UIView *view = subviews[i]; NSLayoutConstraint *widthConstraint = [NSLayoutConstraint constraintWithItem:anchorView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:view attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0.0]; NSLayoutConstraint *edgesConstraint = [NSLayoutConstraint constraintWithItem:anchorView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:0.0]; [self addConstraints:@[widthConstraint, edgesConstraint]]; anchorView = view; } } } /** Set up constraints to anchor the various edges of the subview to it superview (this view) using the provided insets. Any inset set to < 0.0 means that edge is ignored; */ -(void)constrainSubview:(UIView*)subview usingEdgeInsets:(UIEdgeInsets)insets { if(insets.top >= 0.0) { [self addConstraint:[NSLayoutConstraint constraintWithItem:subview attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeTop multiplier:1.0 constant:insets.top]]; } if(insets.right >= 0.0) { [self addConstraint:[NSLayoutConstraint constraintWithItem:subview attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeRight multiplier:1.0 constant:-insets.right]]; } if(insets.bottom >= 0.0) { [self addConstraint:[NSLayoutConstraint constraintWithItem:subview attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-insets.bottom]]; } if(insets.left >= 0.0) { [self addConstraint:[NSLayoutConstraint constraintWithItem:subview attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self attribute:NSLayoutAttributeLeft multiplier:1.0 constant:insets.left]]; } } @end 

Answer 2

In my opinion, the best way to view viewController layouts in more than one orientation is to create several views for each orientation. Here I found this:

"When you add a view controller to the storyboard, it has a view. Call this container view. Add two views to the container view: portrait view and landscape view. Set the portrait view size and landscape view to match the size inspector. Add buttons, more views, shortcuts or something else in the portrait and landscape views needed for your application. Then, when the orientation changes hide one view and show another. "

Answer 3

You can achieve this behavior using only Interface Builder. You need to set some restrictions with different priorities.

See my more detailed answer on the topic here . There is also a screencast and a link to an example application that I created.