How to set two different layouts for one view using constraints? - ios

Question

I will be short and very clear. I want to do what's on the figure below using constraints.
Any suggestions or solutions?
Description:
The coloured places are UIViews, containing for ex. 4 labels. So what constraint should I use to manipulate with the second UIView so in Portrait mode to be under the first one and in Landscape to be next to it?

Answer 1

The code below assumes you already have a reference to the orange view and the yellow view in your code. When in portrait mode you want them to be in sequence so you can have a layout as such
NSLayoutConstraint *portraitConstraint = [NSLayoutConstraint
constraintWithItem:orangeView
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:yellowView
attribute:NSLayoutAttributeTop
multiplier:1.0f
constant:2.0f];
[self.view addConstraint:portraitConstraint];
When in landscape mode you can have a layout constraint as such
NSLayoutConstraint *landscapeConstraint = [NSLayoutConstraint
constraintWithItem:orangeView
attribute:NSLayoutAttributeTrailing
relatedBy:NSLayoutRelationEqual
toItem:yellowView
attribute:NSLayoutAttributeLeading
multiplier:1.0f
constant:2.0f];
[self.view addConstraint:landscapeConstraint];
Now these are not the full list of constraints you would need, if you build in the code and only the code you would have to have the orange view stick to the top, leading and trailing of the view and then in the code have the yellow view stick to the leading, trailing and bottom in the view for portrait.
In landscape you would have the orange view stick to the top, bottom and leading while the yellow view would stick to the top, bottom and trailing.
The constraints that are above would allow so you do not need a height to be set, but you might want to also say something like the orange view bottom is centerY - 1.0 in portrait and centerX - 1.0f in landscape thus avoiding the need for widths and heights and hence not worrying about the size of the screen. Center X and Y are below
NSLayoutConstraint *centerX = [NSLayoutConstraint
constraintWithItem:orangeView
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeCenterX
multiplier:1.0f
constant:-1.0f];
[self.view addConstraint:centerX];
NSLayoutConstraint *centerY = [NSLayoutConstraint
constraintWithItem:orangeView
attribute:NSLayoutAttributeCenterY
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeCenterY
multiplier:1.0f
constant:-1.0f];
[self.view addConstraint:centerY];
The above constraints should help you on your way to resolving the issue.