What To Do With the Extra Space In Your Apps?
With this new expanded interface, there’s a lot more room to breathe. The changes you made were aesthetic rather than functional, and if you like, you can stop there when it comes to accommodating the new 4-inch screen. But what else could you do with this extra space?
To put the luxurious new space you’ve been given to use, generally speaking you’ve got two choices.
First, if the app is really data-driven, you can expand the view and show more data. This can be useful in apps that prominently feature lists or grids, such as a Twitter app. You can add another one or two list items per screen.
Your other option is to use the extra space to add functionality to your app. Looking at the Twitter example again, you could add a tab bar at the bottom that would allow for easy access to frequently-used or hard-to-access functions.
Currently one of the best examples of an app taking advantage of the extra screen space to add functionality is djay for iPhone.
With the old 3.5-inch interface, the developers were just able to fit both turntables on the screen. For the user to access functionality like viewing the BPM or changing the tempo, the app had to change views and block the table.
The new iPhone 5-optimized app shows both turntables, some basic BMP information and a tempo slider all on one view.
Enhanced interfaces like these are great, but they bring up a major looming question: how do you design or update your existing apps to accommodate both the old 3.5-inch and the new 4-inch screens?
The answer depends in part on whether your app uses Storyboards or .xib files. If it does not and you are just creating your UI in code, then you could use something like the IS_IPHONE5 macro from earlier to find the device’s form factor and then adjust your UI elements accordingly.
If you are using Storyboards, then it’s easiest to do much the same thing you did to make this app backwards-compatible. That is, simply create multiple Storyboards and then in code, use something like the IS_IPHONE5 macro from earlier to decide which to load for the current device.
Where To Go From Here?
Congrats! You have successfully upgraded an existing project to the new iPhone 5 screen and adjusted the assets to take advantage of the extra space, all while ensuring that the app remains backwards-compatible with earlier screen sizes and iOS versions. If that bigger screen had you a little intimidated, you should now feel more at ease.
You can download the completed project here.
If you want additional practice, see if you can:
- Play with Auto Layout to center the item selection window and arrows in iOS Diner.
- Expand the amount of data available on the 4-inch screen version of the iOS Diner storyboard – maybe add a description of the current food item?
- Download other completed tutorial projects from this site and upgrade them to take advantage of the 4-inch screen – or your own apps!
Note: Special thanks to James Prete for a fix for the original iOS Blocks application!
Thanks for following along and if you have any questions, please join the forum discussion below!
