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).
Start up Xcode.
Create a new project (File->New Project). A dialog will pop up:
Select View-Based Application then click Choose.
A dialog will pop up, asking for a project name. Name it HelloWorld.
The Xcode project window will open. You see on the left side, under Classes, are the classes you will be working with.
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.
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).
The View window is our HelloWorld screen. It’s blank now, but we are going to add a Label.
Find Label on the Library window Objects->Cocoa Touch Plugin window (see below), and drag the Label instance onto View.
Double click the label that you inserted into View, then type Hello World. Notice the text is off center. Center it.
Let’s do some more things here. Bring up the Inspector window (Tools->Inspector). Change the font color for example.
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).
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:
That concluded the Hello World exercise. But let’s do something more. We’re going to add a picture.
Import a picture (png or jpg) into your Resources folder by Control-Click the Resources group, then selecting Add->Existing Files.
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.
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).
You can resize the view by dragging the handles if you wish.
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.