Mobile Zone is brought to you in partnership with:

Luke and the other bloggers on the Avid Life Media blog develop at Avid Life Media Inc. - a leading social entertainment company that operates some of the most vibrant dating brands and communities on the Internet. Luke is a DZone MVB and is not an employee of DZone and has posted 7 posts at DZone. You can read more from them at their website. View Full User Profile

Updating your IOS apps for iPhone 5’s 4 inch retina display

04.05.2013
| 5997 views |
  • submit to reddit
Originally authored by apollo23232

Your existing IOS apps will run fine on the iPhone 5 even if you don’t make any changes. The view will simply be centered on the screen vertically with black space filling the rest of the screen. Why not take advantage of more screen space on the iPhone 5? It’s simple, and if your app is not too complex, won’t take long. Below are screenshots of the Ashley Madison app running on iPhone 5 before and after modifications were made.

 

We’ve just finished updating the Ashley Madison and CougarLife apps and would like to share the simple steps involved so others can easily update their apps. We’ll look at how to get started and how to add rules to autosize your views in interface builder as well as programmatically. In some cases, you may need to detect screen size to set custom translations depending on the screen height. We’re using a special category on UIDevice that lets you do this easily. There are also new methods for implementing autorotation in iOS 6 which must be added to your project to maintain this functionality.

Getting Started

If you have written universal apps for the iPhone/iPod touch and iPad, you will know that you must create custom nib files for the two different screen sizes. Enabling support for the 4 inch retina display is completely different. You start by simply adding a launch screen resource to your project that is 640 x 1136. This now tells your app to run full size on 4 the inch iPhone 5 screen and tells all base views to auto stretch vertically, filling the gaps. You then have to specify rules for the subviews to behave correctly otherwise they still will not fill the base view or be incorrectly positioned.

Auto Sizing Views

In interface builder, any subviews that are to be stretched vertically should have the vertical ‘spring’ turned on. For example, on the login page for the Cougar Life app, the subview which contains all of the images and buttons needed to be auto stretched vertically to fill the automatically auto stretched base view. This setting can be found in the size inspector in IB (see figure below).

The same setting can be configured programmatically if you’re not using IB. For example, given a UIView named loginView, you would add this line of code to the init or loadView method of your view controller:


Published at DZone with permission of Luke Galea, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)