XCode Tutorial Practice 1: Hello World iPhone App

Updated Oct 3 2013: This tutorial is compatible with XCode 5 AND XCode 4!

We’re taking a practical approach to learning iOS programming. This means lots of hands on work and practice!
In order to benefit the most from these lessons, you should open XCode and try to follow along.

This is part 4 of the lesson plan. Click here for the entire Learning Plan.

It’s time to change our blank XCode project so that we can see something on the screen of that iPhone simulator!

We’re going to be modifying the view through Interface Builder so click on ViewController.xib which is the default view that XCode has created for you. It’s also the view that your ViewController class manages.

When you select it, the editor area of XCode is going to change into a visual designer.

Before we proceed any further. Take a moment to look at this visual diagram of what the different areas of XCode are called because we’re going to refer to them by name.
(If you’d like a more in-depth tour of XCode right now, you can do so in my XCode guide)

If you’re using XCode 4, it may look a little different but the areas and tools shown in the diagram above are the same.

In the Library Pane which is the bottom half of the Utility Area in the lower right corner (you may have to click on ViewController.xib before you see the library pane), type in “UILabel”. If you don’t see UILabel, you may need to switch to the “Objects” tab of the Library Pane (The “objects” tab can be shown by clicking the blue cube icon near the middle of the Utility Area in the screenshot above).

Once UILabel shows up as a draggable control, you can click and drag and drop it onto your view.

This will create a UILabel on your view.

At this point it doesn’t have any text, so on the right hand side property inspector, find the text property and type in “Hello World”!

After you’ve modified the text, click the Run button on the upper left corner of the XCode interface and watch your Hello World app come to life!

In this tutorial you learned how to add elements to your view from Interface Builder as well as how to customize properties on your UI Elements.

Frequently Asked Questions

If you have any questions on this tutorial, please ask in the comment section below and I’ll update this section with Q&A.