Introduction

Hello again! Well, once again nearly a year has passed since my last tutorial was published. Sorry!

A lot of things have changed in the world of iPhone development since last September (we now call it iOS and not iPhone OS, and we have iOS 3.2 for iPads and iOS 4.0 for iPhones and iPod touches) but, as you’ll again see by this tutorial, some things are still pretty much the same.

In this tutorial we will create a Utility application that has no status-bar and runs in landscape-mode only. If you need more details on what those mean, please refer to my previous tutorial blogs in this series. Since specific-orientation apps are kind of a no-no on the iPad anyways, we will make this an iPhone app only.

Logistics

I will be using the iPhone SDK 4.0 (Xcode Version 3.2.3) for this tutorial. If you have another version, things may be different. In other words, “your mileage may vary.”

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 StatusBarLessLandscapeOnlyUtilityAppTutorial (whew! too long?) in the Save As: field and click Save.



If you want you can click the Build and Run/Debug toolbar button (making sure Simulator - 4.0 | Debug is selected from the left-most dropdown) and you’ll see that the iPhone Simulator now shows the application but with a status bar showing. Time to start making some changes. Don’t forget to quit out of the iPhone Simulator.

Making Changes To Remove The Status Bar

First we need to add a new key/value pair to your Info.plist file, which under SDK 3.0+ seems to be called StatusBarLessLandscapeOnlyUtilityAppTutorial-Info.plist.

Open the Resources folder in your project’s Groups & Files. Click on the StatusBarLessLandscapeOnlyUtilityAppTutorial-Info.plist file and it should open as an XML Property List file in the editor pane:



Click the top line that says Information Property List, so it is highlighted like so:



Then click the icon at the right-edge of the row, the one with three horizontal lines:



You should get a new row just below the top one with a drop-down menu already open. Scroll down and select “Status bar is initially hidden”:



Then check the box that appears in the Value column:



Save your changes: File > Save or ⌘-S.

If you try running the app now, you’ll notice it starts with no status-bar appearing:



So that takes care of the status-bar, right? Sure, but we should also make sure the view is sized properly now that no status bar shows. So more work to do...

Resizing The View To Adjust For Removed Status Bar

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

This will open the .xib file in Interface Builder. First, let’s remove the status-bar from the simulated interface elements, which are just placeholders that you can use to better layout your elements by leaving space for the interface elements like the status bar or the top bar.

Bring up the Attributes Inspector, if it’s not already showing: Tools > Attributes Inspector or ⌘-1.



Change the Status Bar selection in the Simulated User Interface Elements section to Unspecified:



(Also, don’t worry about the Orientation setting just yet. We’ll take care of that soon enough, although not directly.) With the status bar removed, however, our view is now of improper size (320x460 pixels). We should resize it to take up the entire screen (320x480).

Bring up the Size Inspector: Tools > Size Inspector or ⌘-3.

Change the height (H:) of the view to 480 pixels:



Note that we no longer need to worry about making sure that the info icon is anchored to the bottom-right corner (which we had to worry about in the previous tutorials). Apple now properly anchors it for us.

Save these changes: File > Save or ⌘-S. Then go back to Xcode and Build and Run.



Nothing should look any different than the last time we ran the app. We’ve just resized the view to help protect us in the future.

What About The Flipside View?

Although it doesn’t make much difference in this simple tutorial, you may wonder if the flipside view also needs its status-bar simulated element removed and the view resized. Well, if you’re a good iPhone Development citizen, then yes, it does! Open the FlipsideView.xib file in Interface Builder and set the Status Bar to None in the Attributes Inspector and resize the view in the Size Inspector.

So, now we have a status-bar-less Utility application for the iPhone. It’s time to make it Landscape-Only.

Making Changes To Go From Portrait To Landscape

First we need to add a new key/value pair to your Info.plist file which, remember, is now called StatusBarLessLandscapeOnlyUtilityAppTutorial-Info.plist.

Open the Resources folder in your project’s Groups & Files. Click on the StatusBarLessLandscapeOnlyUtilityAppTutorial-Info.plist file and it should open as an XML Property List file in the editor pane. Click the top line that says Information Property List, so it is highlighted.

Then click the Add Child Node control at the right-edge of the row. You should get a new row just below the top one with a drop-down menu already open. Scroll down and select “Initial interface orientation”:



Then select the “Landscape (right home button)” choice that appears in the Value column drop-down:



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.



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. Then click the rotation arrow in the top-right corner to rotate the view to landscape-mode.



This ensures that we are laying out our UI elements in a view with the desired orientation.

Drag a Label into the top-left corner of the window (so that the auto-layout lines kick in) and then 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 , click the rotate icon from the top-right corner of the window, and then 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 Round Rect 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 Run 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 status-bar-less, landscape-only Utility application for the iPhone.

What’s Next?

Well, this posting concludes this series so who knows what’s next? If you have suggestions, I’d love to hear them. I may do a blog posting on integrating a customized activity indicator view I created into a simple application. Or I may post about something iPad-related or even concerning Universal apps (ones that run on both iPhone and iPad). Or maybe something else entirely. Stay tuned!

In this tutorial we will create a utility application that has no status-bar (i.e. the little bar at the top of the screen that contains carrier info, the time, battery strength, etc.). Read More...

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). Read More...

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). Read More...