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 on
File > 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.