Formatting is different when laying out app in ib than in simulator

Question

I am just learning how to make apps and the first thing I noticed is when I graphically lay out my application in interface builder it is not the same when I run it in the simulator or on my own device. I have two screen shots of what is happening..

Notice the space between the segment and the switches... they are different and it causes problems when I want to move the switches up...

How can I fix this? It looks like maybe to have to do with the larger screen size of newer iphone and that is not what is running in my simulator... If so what are some things I should know when designing apps that look good on both phones?

Answer 1

The issue, as I think you diagnosed, is that Interface Builder is showing you the 4" screen, but your simulator is showing you the 3.5" screen. In Interface Builder you can click on the following button in the lower right corner of the main panel to toggle between 4" and 3.5" display:

You can also, in the simulator, choose your "device" to be either a 3.5" screen or a 4" screen from the "Hardware" menu, too, so you can simulate running your app on both size app screens. By the way, when you go to a "retina" simulator, it will appear twice as large on the screen (because the screen has twice the resolution). But you can control the size of the simulator window by playing around with the "Scale" options on the simulator's "Window" menu. This just changes the size of the simulator's rendition of the simulated device on your Mac's screen. But if you're working on a smaller Mac screen, sometimes you'll find this "Scale" option useful, too.

But you really want to make sure your app works well, regardless of the size of the screen, so you really should test the app for both sizes. You want your app to render nicely on both iPhone 4 devices as well as iPhone 5 devices. Fortunately, you can achieve this with a single storyboard.

In terms of what dictates the layout of your controls on the two sizes of screens, it depends upon whether you're using auto layout or not. You control that by clicking on the first tab of that far right panel and checking or unchecking the "use autolayout" checkbox:

If not using autolayout (which is important if your app is to run on iOS 5, for example), you can go to the autosizing mask tab and control the "springs and struts" that dictate the layout. For example, if you click on one of your controls in your scene, you can then control whether the margins should change as the size changes, or whether the layout should, by looking at the "size inspector" tab:

If you hover over that "example" window, it will animate how the size will change as the size of its superview does (e.g. whether the iPhone has a 3.5" screen or a 4" screen).

On the other hand, if you're using autolayout (which works on devices running iOS 6 and higher, only), the layout on the screen is dictated by the "constraints" you have defined for the view (see the latter half of the image below):