Apr
06
2009

 

This is a simple tutorial for a first iPhone application.  We are creating an iPhone application to display the word: Hello World.  It assumes that you have Xcode and the iPhone SDK installed (for steps to install Xcode and iPhone SDK, see this other guide).

Step1

Start up Xcode.

Step2

Create a new project (File->New Project).  A dialog will pop up:

iphonehelloworld1

Select View-Based Application then click Choose.

Step3

A dialog will pop up, asking for a project name.  Name it HelloWorld.

Step4

The Xcode project window will open.  You see on the left side, under Classes, are the classes you will be working with.

iphonehelloworld2

HelloWorld.app will be the name of your application.  HelloWorldAppDelegate is the application main class.  It contains the HelloWorldViewController.  HelloWorldViewController is the “view” that you will see on the application. Notice that there’s also a file named HelloWorldViewController.xib, under Resources group (expand the Resources tree if you don’t see it).  This xib file will be loaded by the application and it is sort of a “canvas” where you can design the look of the application.

For this example, let’s draw the Hello World text into the xib file.

Step5

Double click HelloWorldViewController.xib.  The Interface Builder should open. Interface Builder is a tool to layout user interface in a somewhat WYSWYG manner (I say somewhat because sometimes the actual result differs sightly).

In the Interface Builder, you should see a View window, and the Library window (if you don’t see it, open it using Tools->Library on the Interface Builder menu).

iphonehelloworld2a

The View window is our HelloWorld screen.  It’s blank now, but we are going to add a Label.

Step6

Find Label on the Library window Objects->Cocoa Touch Plugin window (see below), and drag the Label instance onto View.

iphonehelloworld3

Step7

Double click the label that you inserted into View, then type Hello World.  Notice the text is off center.  Center it.

Step8

Let’s do some more things here.  Bring up the Inspector window (Tools->Inspector).  Change the font color for example.

iphonehelloworld4

Hint: if you want to change the Font Size, you should uncheck Font Size checkbox (on the dialog above), then use menu: Font->Bigger.  You can also change font-type by using Font->Show Fonts, but be aware that iPhone may not have the font that is installed on your machine.  You can also change the Background of the Label box (if you do, make sure the b checkbox is checked, otherwise the color won’t show up).

Step9

Save the xib file (File->Save).  Quit Interface Builder.  Go back to Xcode and do Build and Go to compile and run your app.  This is mine:

iphonehelloworld6

That concluded the Hello World exercise.  But let’s do something more.  We’re going to add a picture.

Step10

Import a picture (png or jpg) into your Resources folder by Control-Click the Resources group, then selecting Add->Existing Files.

iphonehelloworld9

You will get a dialog asking if you want to copy or just reference the file.  If you select copy, then the file will be copied into your Xcode project folder which means that if you move your project folder into another computer, the file will be there also.  Select whichever one you prefer.

iphonehelloworld8

Step11

We’re going to add the picture into the View.   So, double-click HelloWorldViewController.xib to edit it, then insert an Image View object into the view (see Step6 for reference).

iphonehelloworld7

You can resize the view by dragging the handles if you wish.

Step12

With the Image View still selected, open up the Inspector (Tools->Inspector).  Select the image that you have previously added into the project.  iphonehelloworld10

If the image is too big, you can make it fit by changing the Mode (above, I used Aspect Fit which makes the image fits the box while still maintaining the aspect-ratio).

Save the xib file (File->Save).  Quit Interface Builder.  Go back to Xcode and do Build and Go to compile and run your app.

Comments are closed.