how can I use one storyboard for 4“ and 3.5” iphone screens with autolayout (ios6 + ios7)?

Question

While there are many questions and answers about building a storyboard layout that would work both on 4\" and 3.5\" screen sizes, I couldn\'t find a suitable solution for th

Answer 1

If you want to use only one storyboard and you do not want to utilize auto layout, which would make your life a lot easier for what you've shown in your diagram, you will have to layout your views in code.

You will just need to detect if the user is running on a 4" device and layout your views accordingly.

#define IS_568_SCREEN (fabs((double)[[UIScreen mainScreen]bounds].size.height - (double)568) < DBL_EPSILON)

if (IS_568_SCREEN) {
    // Lots of code to layout for 4" devices
} else {
    // Lots of code to layout for 3.5" devices
}

However, if you were to use autolayout for this, you'd find it's going to save you a ton of time and code. Instead of having to manually layout every view in code using the solution I mentioned above, you'd simply need to update the y and height constraints depending on the device.

Considering this diagram showing what autolayout would handle for you and what you'd need to update manually, this should help paint a better picture of just how much you'll save with utilizing autolayout.

#define IS_568_SCREEN (fabs((double)[[UIScreen mainScreen]bounds].size.height - (double)568) < DBL_EPSILON)

if (IS_568_SCREEN) {
    self.layoutConstraintY.constant = 50.0f;
    self.layoutConstraintHeight.constant = 248.0f;
} else {
    self.layoutConstraintY.constant = 30.0f;
    self.layoutConstraintHeight.constant = 220.0f;
}
[self layoutIfNeeded];

Answer 2

How about adding an extra view and including the square view inside it? The extra view should be transparent so no-one sees it. Set the constraints of the extra view to expand with the screen size and set the constraints of the square view to be centred in the extra box. Select a multiplier for the square view size relative to the extra box

Answer 3

This stackoverflow answer has solved the same problem for me.

Key is make an IBOutlet to the constraint (e.g height). Then do something like this

- (void)updateViewConstraints {
    [super updateViewConstraints];

    self.myConstraintFromIB.constant =
        [UIScreen mainScreen].bounds.size.height > 480.0f ? 200 : 100;
}

Answer 4

You will need to edit your constraints programatically. You may find this question helpful for that.

You could also have two separate Storyboard files, or two viewController scenes in one storyboard file.