Interface Builder
iPhone Programming Tutorial - Status-Bar-Less Utility Application
Introduction
Hello again! Well, much less time has passed since my second tutorial was published. A few things have changed in the world of iPhone development since last July (we now have OS 3.1) but, as you’ll again see by this tutorial, some things are still very much the same.
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.). It looks something like this:
Logistics
I will be using the iPhone SDK 3.1 (Xcode Version 3.1.4) 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 StatusBarLessUtilityAppTutorial in the Save As: field and click Save.
If you want you can click the Build and Go toolbar button (making sure Simulator - 3.1 | 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 StatusBarLessUtilityAppTutorial-Info.plist.
Open the Resources folder in your project’s Groups & Files. Click on the StatusBarLessUtilityAppTutorial-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 it highlighted like so:
Then click the icon at the right-edge of the row, 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:
We’re done, right? Sure, but the info icon that appears in the bottom right corner looks a little far from the bottom edge. We can fix that and learn a bit about dynamic layout at the same time. So more work to do, if you’re up for it.
Fixing the Info-Button To Be Tied To The Bottom-Right Corner
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 Interface Elements section to None:
With this removed, however, our view is now on 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:
(Save these changes: File > Save or ⌘-S.)
Almost there! With this last change the info icon has moved off the bottom edge to where we saw it earlier. Let’s tie it to the bottom right corner.
Click the info icon on the layout view window and the title of the Size Inspector window should change to “Button Size”. We were already in the Size Inspector before so we shouldn’t need to change inspector.
Drag the info icon down so that the suggested placement rulers appear:
Now change the Autosizing Options, by clicking to Deselect the top and left anchors (they look like I bars) and clicking to Select the bottom and right anchors. When you’re done, the autosizing pane should look like this:
Save these changes: File > Save or ⌘-S. Then go back to Xcode and Build and Go.
You’ll now see the info icon appearing in a better spot. If you don’t believe that it is truly tied to the bottom right corner, go back to Interface Builder and change the width or height of the view (you may have to click somewhere that’s not the icon in the layout window to select the main view itself). Even with different dimensions, you’ll see the info icon stays anchored to the bottom right corner.
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, that’s how to create a status-bar-less Utility application for the iPhone.
What’s Next?
In the final tutorial in this series I will show you how to wrap all these concepts into one landscape-mode-only, status-bar-less Utility Application. Stay tuned!
|
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!
iPhone Programming Tutorial - Landscape-Only View-Based 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!