How do I position views in Interface Builder for both 3.5” and 4” Retina?

Question

I want to position a UIView so it appears in the centre on both 3.5” and 4” Retina screens. What is the best way to do this? If I turn off all the Autosizing bars I would expect it to align to the centre of the screen, but this doesn't seem to happen.

I am happy to use the new Autolayout, but I don't know how to get it to do this either.

Answer 1

Follow these steps for your XIB and you should be getting the correct resizing for your views:

1. For seamless iOS4 compatibility, start by setting the top view Size to Retina 3.5 size.

2. Remove the size parameter for the top view and set it to "none". You should now have a main view with the correct size but without a fixed set size option.

3. Turn on all autosizing vertically for the top view under the "Size inspector" tab.

4. For each of the subviews do the following

   • Select the view and go to the Size Inspector tab
   • Select Arrangement (Center vertically or align)
   • If you want it centered, remove the both the alignment markers in the Autosizing box. Select one of them if you want it "sticky" or both if you want it to fill parent.
   • Select if it should be resized relatively or not by highlighting or unhighlighting the vertical "double pointed arrow"
   • Make sure that all elements are located on their intended places in your 3.5" view at this point - this is crucial for it to work on iOS4.

5. Save your changes. Check if you were successful with your autoresizing by selecting the top view and choose size: "Retina 4 Full Screen". When doing this, your view should look like your intended result.

6. Undo the change in 5 (so that the view in the xib has the 3.5 size again, but the Size option set to "None", save and run your app.

This works for iOS4 also, because the size of the view is already adapted for Retina 3.5 thus no autosizing is used for the older screen size.

In some occasions, it is not possible to get the exact right sizes/positioning for all the elements. In these cases you need to programmatically change the views sizes position for the 4" screen size.

Answer 2

To center view in its parent (container) view in IB with autolayout:

• Select you view
• go to menu and select Editor->Align->Horizontal/Vertical Center in Container option

However you can use autolayout only if you support iOS 6 and later, if you target earlier OS versions you'll have to use other approaches (e.g. setting centring view with code as Eric suggested)