Converting to iPhone 5 - step 2.

Ok, today I'm going to try to get a non-spash-screen to work in the iPhone.

Since there was a separate image for the splash, I wonder if I need a separate image for all the screens? Or can auto-resize somehow work?

One guy on SO says

"You shouldn't change the size of your xibs, because you'll want your app to work on both old and new phones. However, you may want to change the autoresizing masks of some of the views in your xibs so that they stretch to fill the larger screen."

Ok, this looks good:

"Make sure, your Xibs/Views use auto-layout to resize themselves.

Use springs and struts to resize views.

If this is not good enough for your app, design your xib/storyboard for one specific screen size and reposition programmatically for the other."

Ok, step one is to figure out how to get the xibs to auto-layout.

Ah, wait, that's the one that only supports the iPhone five.

It's the auto-resizing masks that I need.

I found a post that says use the size inspector in the nib to set it. So, if I click on the size inspector, I get that display which has the struts and springs - looks like a square with a shock absorber.

Clicking on view doesn't let me do anything with it, but if I click on image view, it lets me select arrange position view of "resize vertically". Let's give it a try.

Hmm.. Nothing. Why not?

I just have a feeling I'll need to create a new screen size and code for it. Urgh.

This resizing thing seems to be more oriented toward landscaping. It has to do with when the superview changes size. But, it's not changing size, it's starting out at that size. Could that be the problem, somehow?

Whoah - this guy has *exactly* the same problem i do:

http://stackoverflow.com/questions/12595049/iphone-5-cant-get-images-to-auto-resize

and no answers!

I think I'm just going to go straight to loading a separate image based on the difference size.

CGRect screenBounds = [[UIScreen mainScreen] bounds];
if (screenBounds.size.height == 568) {
    // code for 4-inch screen
} else {
    // code for 3.5-inch screen
}

But, what do I put inside those lines? How do I load the image?

How about this:

UIViewController *viewController3;

  if ([[UIScreen mainScreen] bounds].size.height == 568)
  {
    UIViewController *viewController3 = [[[mainscreenview alloc] initWithNibName:@"iphone5screen" bundle:nil] autorelease];               
  }    
  else
  {
     UIViewController *viewController3 = [[[mainscreenview alloc] initWithNibName:@"iphone4screen" bundle:nil] autorelease];
  }

What does initWithNibName do? Do I have to have a separate nib file? Thats' not cool.

hmm...I just saw a suggestion to set the image size to the iphone 5 size, and let it be cropped...

That would be easy. Hmmm...no. It just shows the stretched image taking the same area as the previous unstretched image.

Ok, here's the trick. Just go to the nib, select attributes, and set the size to "retina 4 full screen".

Then click on the image view, which is now showing the white space, and drag it down to the bottom of the containing view.

Actually, I ended up setting the size to "none". In a couple of views, I set the size physically like this:

background = [UIImage imageNamed: @"plum_blossoms3_568.png"];

    

Although, the "_568" is not a good name, because the real size is 468 x 548 pixels for the one I name 568, because I just took the existing height / 4 * 5 and increased the height to that. 

A couple of the views had image views instead of loading the image as shown above, and I just changed the attached view to the _568 and it seemed to work ok. Although, on on display, I had to use the struts in the nib to anchor the top and bottom by setting them red, which turns off auto-sizing from the center view to the superview, which means the distance is fixed, thus the anchor. Note that setting the autosize to red on the inside allows the view to expand, so I did that for the vertical and it fixed the problem.

Alright, next step - the grueling process of testing on on a borrowed iphone 5!