3.5 and 4-Inch Screen Compatible

Now that iPhone 5 is in the market, we have to make sure that our apps are compatible to both 3.5-inch screens and 4-inch screens.

That's easy! 

Just check the "Use Autolayout" in our Interface Builder and it will automatically make our 3.5-inch screens compatible to 4-inch screens.

Now, wait!

"Use Autolayout" is useful if the minimum OS requirement is iOS 6 and up. What if your application's minimum OS requirement is, for example, iOS 4.3 and up? You can't use the "Use Autolayout" because your app will definitely crash if you run it in <iOS 6 devices (even in your simulator).

 This is what will happen if you use Autolayout and you're running your app in < i0S 6

The Good News is we have a simple solution for that!

1. First, I created a simple "Single View Application" project. View size is set to Retina 3.5 Full Screen.

Here's how my simple app looks like. No functions, just a simple user interface. We expect that what we see in our Interface Builder, that's what it should also look like when we run it in 3.5-inch screens.

2. Change the Device from 3.5-inch to 4-inch. Make sure that you're in the menu of the iOS Simulator.

If you run the app again in 4-inch screen, this is how it will look like. Everything looks sort of okay. Some of you might really find your UI not in their right places when you run it in a 4-inch screen.

3. Go back to your project and click the view and look for the "Autosizing" function (violet box).

If you can't find the "Autosizing" function and you find this instead (Content Hugging Priority, Constratins, etc)

Go to the first tab of the "Utilities Area" (Right panel) and UNcheck the "Use Autolayout". 

Once done unchecking the "Use Autolayout," you should be able to see the Autosizing function on the fifth tab.

Now, we're ready...

4. Click the View and change the Autosizing such that it will look like this. Tap or click all the vertical and horizontal lines in the inner and outer area of the box.

This means that we want our view to extend or expand its width and height depending on the size of the screen.

5. Next, click the Navigation Bar at the top with the segment control.

This means that we want our Navigation Bar to stick on top and extend its width depending on size of screen. We don't, or rather, we can't tap the inner vertical line of the box.. that means that we cannot change the height of the navigation bar. (And this is true since the height of the NavBar will always be 44.)

6. Same goes for the Label "Great Day," we want it to stick on top of the screen and extend its width depending on the size of the screen.

7. Next, tap the UIImageView.

The Autosizing means that we want our UIImageView to expand its width and height while still sticking on the top. The left and right lines (outer area of the box) means that the UIImageView will be at the middle of the view.

8. For the two buttons, we want them to be at the bottom always, so...

9. Run your application again both in 3.5inch screens and 4-inch screens.

        //4-inch Screen                                          //3.5-inch Screen

Done!