How do I set up different layouts for portrait and landscape orientations using auto layout?

Question

I have a view, as in the attached image

Now I am adding restrictions, so that the UITextview in the view should be to the right of the screen when the orientation is changed to landscape. In UItextview, I have added below limitations,

• Trailing space for: Superview
• Lower space to: Superview

These limitations, while displaying some warnings of ambitiousness, did the job for me. Below is a screenshot of the landscape mode.

My problem is that the UItextview is moving to the right, I want to get extra width from top to top when it is in landscape mode. In other words, I want the UITextview to be moved a little down, from where it is now in landscape mode. I am thinking about how to do this using auto-layout in IB, and I cannot figure out how to do this.

Any suggestions please.

Answer 1

You can do this with restrictions in several ways, but there is no way to do this automatically only with the restrictions that you do in IB. Using both the factor and constant values ​​in the method, constraintWithItem: attribute: relatedBy: toItem: attribute: multiplier: constant: you can have one constraint that is evaluated at different distances in portrait and landscape orientation. It's a pain to do the calculations to figure out what to use for these values, so I wrote a category in NSLayoutConstraint to do this. An example of one of these methods is the following:

+(NSLayoutConstraint *)topConstraintForView:(UIView *)subview viewAttribute:(NSLayoutAttribute) att superview:(UIView *)superview portraitValue:(CGFloat)pValue landscapeValue:(CGFloat)lValue { CGFloat multiplier = (pValue - lValue)/(superview.bounds.size.height - superview.bounds.size.width); CGFloat constant = pValue - (superview.bounds.size.height * multiplier); NSLayoutConstraint *con = [NSLayoutConstraint constraintWithItem:subview attribute:att relatedBy:0 toItem:superview attribute:NSLayoutAttributeBottom multiplier:multiplier constant:constant]; NSLog(@"top coeffs: %f %f",multiplier,constant); return con; } 

The way you use them is to add the initial portrait constraint in the storyboard, but check the "Placeholder - Remove at build time" checkbox in the attribute inspector for the constraint, and then replace it with viewDidLoad, like this

 - (void)viewDidLoad { [super viewDidLoad]; [self.view addConstraint:[NSLayoutConstraint topConstraintForView:self.textView viewAttribute:NSLayoutAttributeTop superview:self.view portraitValue:225 landscapeValue:50]]; } 

This will automatically adjust the position of the text view based on the rotation of the device without additional code. You may need to change the width of the text fields so that everything is matched correctly - I attached them and the “Receive” labels to make it easier to position them as a group. In this view and text view, there were restrictions on height and width, as well as top and left for the view, as well as top and right for the text view. There are methods in the category for setting other restrictions, and they can be found at http://jmp.sh/b/S4exMJBWftlCeO5GybNO .

Another way to do this is to make IBOutlets for the constraints that you create in IB and set them (constant value) or delete some and redo others in one of the rotation callback methods.