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!
|