In my last tutorial UITableView Hello World I said that there are many ways to write a “Hello World” tutorial for the iPhone. Here is one using Interface Builder. Last time, I demonstrated a simple way to populate one cell in a UITableView with some text. Today’s tutorial is even simpler. I will show you how to work with Interface Builder to create a simple layout for you application. In fact, you won’t write any code at all! In my next tutorial, I will detail how to interface with your UI components in code.In this tutorial you will learn:
- Create a New View Based Project
- Opening the iPhone Simulator
- Adding UI Elements to your home screen
- Executing the code
Create a New View Based Project
Let’s start by opening up XCode and Creating a new View-Based Application. Do this by clicking onFile > New Project. Make sure that Application is highlighted under iPhone OS and select View-Based Application. Name this project HelloWorldViews.
So at this point, Apple has added some default files to get us started. They have added the main window for us to edit along with the code to launch the window. Now in iPhone terms, each window is called a View. Since you can only see one view at a time, you will need to create a new view for each screen in your application. In this tutorial, we will be sticking to editing the view Apple has provided us. In later tutorials, I will go into how to add new views and transition between them. Go ahead and click Build and Go.
Opening the iPhone Simulator
The program should compile and launch the iPhone Simululator. Your screen should look something like this.
Not very interesting right? Excuse my crappy screenshot. So let’s add some UI components to our view to make it more interesting. To do this we will be editing HelloWorldViewsViewController.xib . A file with the .xib extension is known as a nib file. These files open with Interface Builder and are where you define the look and feel of your application. Apple is nice enough to have provided us with one.
Adding UI Elements to You Home Screen
Once you open Interface Builder, you should see a few different windows… You should see a blank window that has the same dimentions as the iPhone that says View up in the top. If not click the View icon in the smaller box. This is the main window we will be editing.
To the right, you should see a tool box that contains many different UI components. Most of them should look familiar if you have ever used an iPhone application. So let’s add a few of them to our view. Just click on the one’s you want and drag them on to your view. Make sure you at least use a Label. For this tutorial, I have used a Label, Search Bar, and a Tab Bar. Notice when you drag the search bar and tab bar onto the view, they size correctly to the screen. Also, if you move the items around, you will see blue lines that guide you. These are in place to help you line up components and center them.
After you have added the label, click on it. Now let’s open the Attributes Inspector to change the text of the label. To do this click Tools > Attributes Inspector. At the top of the Attributes Inspector you should see a box labeled Text. If you don’t click on the label again to select it. Put whatever you would like the label to say in that box. I put “Hello World”. You can update other properties of the label including color and font using the Attributes Inspector. You may need to resize the Label to accommodate your new text. To do this click on the label and you will see little boxes around it that you can drag to resize the text area.
After you are done, your interface should look something like this:
Now press Apple-S to save this file. We are done with Interface Builder so you can close it. Your application should now be ready to execute.
Executing the Code
Go ahead and click Build and Go again to launch the iPhone Simulator. Your screens should look something like this:
