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 (eg 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):

Answer 2

If you want to have perfect control over the layout you should have 2 different XIBs, one for the standard screen (320 x 480) and another one for the new iPhone 5 screen (320 x 568). That way you can specify exactly where each element will appear and you won't have any surprises with different screen sizes.

But in any case you should always leave the anchoring and autoresizing of each element you put into your XIB well configured.

The following is from this tutorial .

When the screen rotates on an iOS device you can manage how the UI objects will alter their position or if they stretch to fill the new window. This can all be managed with this simple little tool in Interface Builder.

The box on the left is where you decide how the object will scale and the box on the right is an animated visualisation on how the object will perform when the layout frame is modified. The outer box on the left is where you set the “anchors” or what sides the object will lock on. Any side selected will make the object stick to that side when the screen dimensions change. The inner square has controls for stretching. When the object is locked on 2 sides and the screen changes its width then the object can be told to stretch with the screen. Its worth having a play with these settings and see the results from different configurations.