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.

Solution 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.

Solution 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)

Comments

[jowie]

I know how to do it in code thanks, however because I have a lot of nib files I'd much rather learn how to do it in Interface Builder.

[jowie]

Thanks! One thing I forgot to mention though, my app is for iOS 4 and above. Will this be okay? I've set the Deployment Target to 4.0 and it doesn't complain when I compile it to my iOS 6 devices...

[jowie]

Unfortunately, this doesn't work on my iPhone 4S. It shows up properly on the iPod touch 5G, but when I look on my iPhone (3.5" display), the view is aligned to the bottom of the screen.

[jake_hetfield]

you must design your view with 3.5" in mind first, then set the autosizing options so that it correctly stretches to 4". You can test it so that it works correctly in the Interface builder. See my answer on how I do it.

[jowie]

Sorry, I didn't get a chance to try this out today... I will soon and let you know how I got on thanks! I'm assuming this method is with Auto Layout switched off?

[jowie]

I'm afraid I'm stuck on point 3. Where is the "View" tab? The Size inspector is where all the Autosizing parameters are.

[jowie]

I voted this up anyway because your point about laying everything out for a 3.5" screen is the most important point here. However, changing size parameters to "none" doesn't seem to make any difference to me. I can also switch quite happily between 3.5" and 4" sizes to check it's working properly. It seems very strange that resizing parameters for the new iPhone 5 work better using the old Autosizing methods!

[jake_hetfield]

Sorry for a late response. Yes I just saw that I read it wrong, it should be the size inspector in point 3. Switching to none might not have an effect except that you can change the size of the view in Interface Builder. But for me it made sense to not lock it to a fix size. I hope you got it working at last =)