Updating an XIB made for iPhone5 to work with iPhone6 and iPhone6 Plus

Question

I have created several xibs in my app without auto-layout and size classes.

When I run app on actual device it runs fine on iPhone6 but on iPhone6 Plus views are hugging one side of the screen.

Elements on all xibs are set to use auto-resizing as:

Adding information on how my xibs are built: Auto-resizing has been set to look like this so that all objects on view stay at the same position when app is used on an iPhone with iOS < 7.0 where background image (that covers the whole view) goes below the status bar; in IOS7 and above background image is visible below the status bar. This is done on all views in the app.

The issue is no matter how I try, including auto layout and size classes to the xib messes up everything. Is there any easy way to transform my views to use auto-layout such that the same views (Designed for iPhone5 resolution | iPhone 4-inch) can be changed so that they appear the same on iPhone6 Plus resolution? It would be great if auto-resizing stays the way it is set.

I have tried using several techniques and Suggested Constraints but images sometimes increase only in height (not maintaining aspect ratios), background images stick to one side of the screen and labels don't increase in size. Assets for the iPhone6 and 6 Plus resolutions have been added into the project as well.

Answer 1

I think you are in the right way working with autoresize masks. Maybe some adjusts in it can resolve your problem.

The picture you attached is the autoresizing property of the object with a little preview of how this setting will behaviour.

Setting the autoresizing mask like you did, will fix you object's distance relative to it's superview, but as you are not setting the width flexible (the unselected arrows inside the box), the system will have to choose between positioning your object on the left or the right side of the container to resolve the conflict, and your object will probably be on the left side (default behaviour ... you can confirm this on the autoresize mask preview little window).

Try setting the width flexible and make sure that the superview's settings are configured to scale too (flexible width and flexible height).

I'm developing a project since iOS4, supporting iPhone and iPad using only one xib for each screen just setting the view scale behaviour using the autoresize mask properties, so I'm pretty sure that you can do it too.

Please, don't use 2 xibs if you have the same layout. It's a very bad practice most of the cases and you will stress later trying to update the layout, adding a button or wherever ...

Answer 2

This is what I found when I've needed to deal with the same problem:

1) If you do not want to use Autolayout, you can use the scale mode. Apple added this smart little trick on iOS8 to make all previous apps for iPhone 5 run without any modification on iPhone 6. To use it, you must not set a launch image with the iPhone 6 resolution on your project properties (but you need to set a image for iPhone 5 so it can know you support iPhone 5 and you have to leave Launch Screen File empty). Doing this, iOS will use scale mode when running your app on iPhone 6/6+ and all your views will be correctly scaled to work beautifully with its screens. That's possible because the new screens keep the aspect ratio to the iPhone 5 screen, so iOS basically just need to multiply your pos/size by the correct screen size proportion. I'm not sure this will still work if you set iPhone 6 specific resolution images to some XIBs, though.

This solution basically means you're chosing to ignore iPhone 6 existence and keep programming for the old devices.

2) If you really want to give up the automatic scale mode and make an updated App for iPhone 6 (Apple wants you to do it), you could do any of the two:

• Use autolayout. That's the standard Apple wants everybody to use, and although it's a bit hard to tame in the beginning, you'll get really attached to it. I've give up using Autolayout for now, though, as I found some problems when trying to run my app on iOS6 and 7, which I cannot afford to not support right now (you can read more about it here).

• Use two XIBs, one for iPhone 4/4s/iPod Touch 4, and one for iPhone 5/5s/6/6+. Note that I'm suggesting you to keep a XIB for each device aspect ratio Apple has designed. As the aspect ratio will be the same for the devices which will use a given XIB, you can use autoresizing masks to scale up your view as you please. Everything will keep the correct aspect ratio.

I'm using the first suggestion (scale mode) for now, while my issues with autolayout running on iOS6 and 7 do not get solved.