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!

Tags: iPhone, iPhone SDK, Objective-C, Tutorial, Xcode, Interface Builder, Landscape, Landscape Only, Utility Application

In this tutorial we will create a view-based 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).

Create a New View-Based Application

Open Xcode



Create a new iPhone OS Project

Click File > New Project...



Make sure Application is selected under iPhone OS and then select View-Based Application.

Click Choose... and enter LandscapeOnlyViewBasedTutorial in the Save As: field and click Save.



If you want you can click the Build and Go toolbar button (making sure Simulator | 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.

Open the Resources folder in your project’s Groups & Files. Right-click on the 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 seems to want to start in landscape-mode but switches to portrait immediately and there appears to be a status-bar artifact left on the right side of the view. So more work to do.

Next, open the Classes folder and then select the LandscapeOnlyViewBasedTutorialAppDelegate.m file.

Find the applicationDidFinishLaunching method and add the following after the [window makeKeyAndVisible]; line:

[[UIDevice currentDevice] setOrientation:UIInterfaceOrientationLandscapeRight];



Save your changes again.



If you tried building the project, you’ll notice a “warning: ‘UIDevice’ may not respond to ‘-setOrientation:’ message appears. You can ignore this. We are accessing an undocumented feature of UIDevice.

UPDATE: I’ve discovered that the setOrientation message for UIDevice is only needed to get the iPhone Simulator to start with the desired orientation. It can be left out if you are testing on a device and/or for your “final” build, if you want to avoid even this one warning.

Finally, select your LandscapeOnlyViewBasedTutorialViewController.m file and find the shouldAutorotateToInterfaceOrientation method.

Change the return line to be:

return (interfaceOrientation == UIInterfaceOrientationLandscapeRight);



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.



Now let’s add some more elements (quit the iPhone Simulator, if you haven’t already) to ensure we’re headed in the right direction.

Adding UI Elements To The View And Hope They’re Landscaped Too

Open the Resources folder and double-click the LandscapeOnlyViewBasedTutorialViewController.xib file.

This will open the .xib file in Interface Builder. From the window titled View, click the rotation arrow in the top-right corner to rotate the view to landscape-mode.



Drag a few UI elements from the Library (Tools > Library, if it’s not showing) into the view, namely a Navigation Bar (place it underneath the status bar), a Label (left-aligned under the Nav Bar), and a Round Rect Button (right-aligned in the bottom corner). Your view should look something like this:



(You will need to double-click the button to assign it a title.)

Once again, save your changes and run the app via the Build and Go button.



You’ll see that your new Navigation Bar, Label 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 view-based landscape-mode-only iPhone application.

What’s Next?

In the next couple of tutorials you will learn how to create a Utility Application that runs in landscape-only mode as well as create a view-based app without a status bar. Then another tutorial will show you how to wrap all these concepts into one landscape-mode-only, status-bar-less Utility Application. Stay tuned!

Tags: iPhone, iPhone SDK, Objective-C, Tutorial, Xcode, Interface Builder, Landscape, Landscape Only