28 June 2009
iPhone Programming Tutorial - Landscape-Only Utility Application
Introduction
Well, almost a year has passed since my first tutorial was published. My apologies. Let’s hope we don’t wait that long again for the third one. A lot has changed in the world of iPhone development since last September (we now have OS 3.0) but, as you’ll see by this tutorial, some things are still very much the same.
In this tutorial we will create a utility application that runs in landscape-mode only (i.e. the screen is wider than taller) vs. the usual portrait-mode (where the screen is taller than wider). In order to keep things simple, we will restriction the orientation to “LandscapeRight”, meaning the home button ends up to the right side of the iPhone’s screen.
Logistics
I will be using the iPhone SDK 3.0 (Xcode Version 3.1.3) for this tutorial. If you have another version, things may be different. In other words, “your mileage may vary.”
You may notice a different font than the Xcode default in my code snapshots. That’s because I am now using the font Inconsolata (thanks to Daring Fireball for the tip). It’s still a monospaced-font but just looks so much less blocky.
Create a New Utility Application
Open Xcode
Create a new iPhone OS Project
Click File > New Project...
Make sure Application is selected under iPhone OS and then select Utility Application.
Click Choose... and enter LandscapeOnlyUtilityAppTutorial in the Save As: field and click Save.
If you want you can click the Build and Go toolbar button (making sure Simulator - 3.0 | Debug is selected from the left-most dropdown) and you’ll see that the iPhone Simulator now shows the application but it’s running in portrait mode. Time to start making some changes. Don’t forget to quit out of the iPhone Simulator.
Making Changes To Go From Portrait To Landscape
First we need to add a new key/value pair to your Info.plist file, which under SDK 3.0 seems to be called LandscapeOnlyUtilityAppTutorial-Info.plist.
Open the Resources folder in your project’s Groups & Files. Right-click on the LandscapeOnlyUtilityAppTutorial-Info.plist file and choose Open As > Source Code File.
At the bottom of the file, just before the </dict> tag, add the following directive:
<key>UIInterfaceOrientation</key><string>UIInterfaceOrientationLandscapeRight</string>so it looks like so:
Save your changes: File > Save or ⌘-S.
If you try running the app now, you’ll notice it starts in landscape-mode but the UI still looks portrait-esque. For example, the info button appears pretty much where it would’ve appeared in portrait-mode and even has portrait-orientation. So more work to do.
Next, open your Main View folder and select your MainViewController.m file and find the shouldAutorotateToInterfaceOrientation: method.
Uncomment the method and then change the return line to be:
return (interfaceOrientation == UIInterfaceOrientationLandscapeRight);
Finally, open your Flipside View folder and make the same shouldAutorotateToInterfaceOrientation: changes you just made above to the FlipsideViewController.m file.
Save your changes and then Build and Go. Ta da! It looks like we have a landscape-only application. You can verify this by using the Hardware menu item to Rotate Left and Rotate Right. You’ll see the display stays stuck in landscape-mode.
But wait! What happened to the info-button (that looks like a lower-case i in a circle) that lets us flip to the reverse-side? Looks like we’re not done yet.
Fixing the Info-Button To Be Landscaped Too
Open the Resources folder and double-click the MainView.xib file.
This will open the .xib file in Interface Builder. From the window titled Main View, select and move the info-button to the top-left corner first so that it is not “lost in rotation” (my apologies to Sofia Coppola). Then click the rotation arrow in the top-right corner to rotate the view to landscape-mode.
Then drag the info-button back down to the lower-right corner. Your main view should now look something like this:
Next, open the FlipsideView.xib file in Interface Builder and rotate its view to landscape-mode. You remember which icon does that, right?
The FlipsideView should look like this now:
Once again, save your changes and run the app via the Build and Go button.
The initial view should look like this:
and, if you click the info-button, you should see this:
We’re almost done now. Finally, let’s add some more elements (quit the iPhone Simulator, if you haven’t already) to ensure we’re truly headed in the right direction.
Adding Some More UI Elements To The Views To Solidify Landscaping
Open the MainView.xib file in Interface Builder.
Drag a Label (left-aligned under the status Bar) into the window and change its text color to white to make it a bit easier to read. Your main view should look something like this now:
Save! Then open FlipsideView.xib and drag a Label (left-aligned under the Nav Bar), change its title to “Flipside Label” and change its text color to white as well. Also, let’s add a Button to the bottom-right corner, just for fun. You may need to double-click the label and button to change their text. Your flipside view should now look like this:
Once again, save your changes and run the app via the Build and Go button.
You’ll see that your new labels and button appear as they were laid-out in the Interface Builder and, even if you rotate the simulator, they stay put. Success!
So, that’s how to create a Utility landscape-mode-only iPhone application.
What’s Next?
In the next tutorial you will learn how to create a view-based app without a status bar. Then the final tutorial in this series will show you how to wrap all these concepts into one landscape-mode-only, status-bar-less Utility Application. Stay tuned!
|