iOS Storyboard, layout shifts awkwardly between 4.0 inch screen size and 3.5 inch screen size

Question

I am having trouble with app screen sizes. I turned off auto-layout so that it wouldn't mess up the elements on the screens.

But now when I try to create a simple screen like this for a 3.5 inch screen:

But then when I see the same layout in a 4-inch screen it looks all messed up with the spacing like this:

I don't understand what I am doing wrong here. How can I create a screen that would look the same on a 3.5 inch and a 4.0 inch screen?

Thank you!

Answer 1

Autolayout did a HUGE step forward from Xcode 4.x to 5.0. One of the things were Apple listened to the developers was: auto-layout now per default does NOT create any auto-constraints, anymore. This means: you have a full static layout (with abolsolute coordinates) while you pull in all your controls (and you can at any timepoint remove all contraints later easily, to get back to that state.). The suggested workflow is to add contraints one-by-one from then on. Which leads to full controll on the developers side at any state.

That said. My suggestion for you is: turn auto-layout ON. Then place all your controls to a static position on the 3.5 screen. If you dont want to support portrait/landscape or iPhone/iPad, then simply do NOT add any constraints. And you are done, because a static layout that fits on a 3.5 screeen should also work on a 4.0 screen.

Once you want to support iPad or landscape modes with the same scene, add constraints one by one. It really works. Auto-layout is your friend now (starting with Xcode 5). Believe me.

Answer 2

Select your UITableView, then in the Size Inspector, activate all autosizing arrows and lines, make sure your tableview is the top view (inside your UIViewController view).

Answer 3

If you don't want to deal with Auto-Layout, go to your Size Inspector and change your autosizing to this:

Answer 4

Very common question and I have run into this issue with every single app of mine.

You have two options

1. In your story board you can have two branches from a single welcome screen viewcontroller. One brach will have all controller of 4in size while the other will have 3.5in controller. Draw back to this way is that you are creating double the work for yourself in storyboard.

This is how you do it

• Create layout as shown
• Add two buttons and attach them modally to those views.
• Change storyboard Segue identifiers to "iphone4" and "iphone5" for each button.
• Make the buttons really really small of 1px / 1px and hide them. Remove any default text.
• Add this code

in your *.h

#import <UIKit/UIKit.h>

@interface v2ViewController : UIViewController
{
    NSTimer *timer1;
    NSTimer *timer2;

}

@property (nonatomic, retain) NSTimer *timer1;
@property (nonatomic, retain) NSTimer *timer2;

In your *.m add this

@synthesize timer1;
@synthesize timer2;
- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    timer2 = [NSTimer scheduledTimerWithTimeInterval:2.5 target:self selector:@selector(moveOn) userInfo:nil repeats:NO];

}

- (IBAction) moveOn
{
    //Now go to the Display Call Page
if(UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone)
    {
        CGSize result = [[UIScreen mainScreen] bounds].size;
        if(result.height == 480)
        {
            // iPhone Classic
            [self performSegueWithIdentifier:@"iphone4" sender:nil];
        }
        if(result.height == 568)
        {
            // iPhone 5
           [self performSegueWithIdentifier:@"iphone5" sender:nil];
        }
    }

}

2. Second option is to add code that will resize all the views, buttons etc accordingly. You will need to attach everything to an IBOutLet and then do this. (sorry but I don't know why the #@!$ code formatting isn't working)

if(UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone) { CGSize result = [[UIScreen mainScreen] bounds].size; if(result.height == 480) { // iPhone Classic [weatherBGImageVw setFrame:CGRectMake(0, 0, 320, 480)]; } if(result.height == 568) { // iPhone 5 [weatherBGImageVw setFrame:CGRectMake(0, 0, 320, 568)]; } }