iPhone Application Design Intro

Introduction

This tutorial is designed to guide you through the process of setting up a basic iPhone application. It will show you how to set up a new application with a view that appears when the application is launched. This tutorial assumes that you have already downloaded the iPhone SDK, and are at least slightly familiar with the iPhone SDK tools. It is also helpful if you know a little bit about the basics of Objective C, the language used to program applications for the iPhone.

Step One – Create a New iPhone Project

First we need to prepare a new template to start from. There are several convenient templates which create pre-built applications that are already functional, but we will be starting from scratch. Not only does this allow you to create more personal code, but it is also more instructive, because it helps you to better understand the process behind the code, and how it works.

1. Launch Xcode
2. Select File -> New Project, or type ⌘ + + N to open the New Project dialog.
3. This will open a dialog containing the default project templates.
4. Click on iPhone OS -> Application in the selection box on the left.
5. Select the “Window-based application” item.

   

6. Click Choose and enter a project name in the dialog box that appears. For the sake of convenience please type “HelloWorld” as the project name.

At this point click “Build and Go” to test your development environment. The iPhone simulator should launch, and your iPhone application will open, showing a blank white screen.

Step Two – Create a View for the Application

As you have probably already realized, your application is currently nothing more than a white screen. It is time to create a view for your application. A view is like a card containing all the interface elements that you want displayed. There are two steps involved with using a view: designing it and implementing it into your application.

1. Launch Interface Builder
2. Click File -> New, or type ⌘ + N to open the New File dialog.
3. Click on Cocoa Touch in the selector on the left hand side.

   

4. Select the “View” item and click “Choose”.
5. Interface Builder will open, showing at least three different windows.

Step Three – Adding Elements to the View

For our first application let’s create an extremely simple view which does nothing more than show some text. This might seem like it is a little too simple, but the hard part is going to be linking this view to the application, so let’s start simple.

1. Open the Library window if it isn’t already open, and select “Inputs and Views” from the library.
2. Click on the “Label” item and drag it over to the view window.
3. Release the mouse button to drop the label somewhere near the center of the view.
4. To change the attributes of the label we must use the Inspector Window, so open if it isn’t already on the screen.
5. Click on the label item, then click the Attributes tab of the Inspector Window, or press ⌘ + 1 to go directly to the attributes tab.
6. Increase the font size of the label to 20pts so that it easier to read.
7. Resize the label so that the text inside isn’t cut off.
8. Double click on the text to edit it.
9. Type “Hello World” and press Enter.
10. If necessary resize the label again.

Now it is time to save the View that we have created.

Click File -> Save or press ⌘ + S to open the Save dialog.

Browse to the folder of the project that you created in the first step. It is very important that you save the View file inside this folder, because this keeps all the files of the project together in one place and causes Interface Builder to detect that this view is part of the project.
Save the View with the filename “HelloWorldView”. When you click the save button Interface Builder will open a dialog asking which project you want the file to be a part of. Click the checkbox next to your project and and Interface Builder will add the view to your project.

Switch to Xcode and you should see the file “HelloWorldView.xib” in the project tree on the left side of Xcode. Drag this file up and drop it in the “Resources” folder.

Now the view is designed and laid out. But you aren’t done yet. Before the view can appear as part of your application you have to write the code to load it into the application window.

Step Four – Implementing the View in Your Application

Implementing the view involves two aspects. First we need to create an Objective C interface attached to the view. This will be used for creating methods for adjusting the view and responding to events that affect the view. Second we need to add the code to launch the view and display it on application launch.

1. Switch to your Xcode project.
2. Click File -> New file… or press ⌘ + N to open the New File dialog.
3. In the left hand selection box click iPhone -> Cocoa Touch Class.
4. Select the “UIViewController subclass” item.
5. For a filename type “HelloWorldViewController”
6. Click Finish to create the new file and its header. Make sure that you drag the two new files up into the “Classes” folder in the project tree on the left side of Xcode. Technically it isn’t a requirement but it is a good idea to get used to project organization.
7. Switch back to Interface Builder.
8. In the Document Window click “File’s Owner”.
9. Click to open the Identity tab in the Inspector Window, or press ⌘ + 4 to open it directly.
10. In the Class Identity textbox that says “NSObject” type “HelloWorldInterfaceController.” This assigns a type to the View.
11. Now we need to associate the view object with the view instance variable in the code. Click on the Connections tab of the Inspector Window, or press ⌘ + 4 to open it directly.
12. In the Document Window click “File’s Owner.”
13. Under the Outlets section in the Inspector Window you will see the variable “view” appear.
14. To the right of the view variable is a small round circle. Hover your mouse over the circle so that it turns into a plus sign.
15. Click on the circle and drag the mouse over the Document Window so that the view item is highlighted. A blue line will appear between the variable outlet and the highlighted view item.
16. Release the mouse button and a connection will be made between the variable and the view element.

(Click on the screen image to enlarge the view.)

Now that the connection had been made between the variable and the view element, we are ready to add the code for displaying the view in the application window.

Open “HelloWorldAppDelegate.h” and replace it’s contents with the following code.

#import <UIKit/UIKit.h>

@class HelloWorldViewController;

@interface HelloWorldAppDelegate : NSObject <UIApplicationDelegate> {
UIWindow *window;
HelloWorldViewController *hwvc;
}

@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) HelloWorldViewController *hwvc;

@end

Basically what this does is add the HelloWorldViewController interface to the main application delegate class. However, all it adds is a pointer, so we still need to add code to allocate a new instance of HelloWorldViewController and then display it.

Open “HelloWorldAppDelegate.m” and replace it’s contents with the following code:

#import "HelloWorldAppDelegate.h"
#import "HelloWorldViewController.h"

@implementation HelloWorldAppDelegate

@synthesize window, hwvc;

- (void)applicationDidFinishLaunching:(UIApplication *)application
{

HelloWorldViewController *local_hwvc = [HelloWorldViewController alloc];

[local_hwvc initWithNibName:@"HelloWorldView" bundle:[NSBundle mainBundle]];

self.hwvc = local_hwvc;
[local_hwvc release];

[window addSubview:[self.hwvc view]];

// Override point for customization after application launch
[window makeKeyAndVisible];
}

- (void)dealloc
{
[hwvc release];
[window release];
[super dealloc];
}

@end

When the applicationDidFinishLaunching event message is sent to the application delegate it allocates a new instance of HelloWorldViewController, and then adds the view as a subview of the application window. Then it displays the window.

It is also important that the destructor for the interface deallocate the HelloWorldViewController that it allocated.

Testing and Troubleshooting

The code should be complete. Click “Build and Go” to test it out. The application should launch, opening a white screen with the words “Hello World” at the center.

If your application crashes with the message “The application HelloWorld quit unexpectedly” then that means that you did not set up the link between the view variable and the view element properly. Return to Interface Builder and repeat the step where you drag the blue line from the view variable in the connections inspector to the view element object in the document window. If the view variable does not appear in the connections inspector then you may also need to set the class identity to “HelloWorldViewController” if you missed that step as well.

Conclusion

This is admittedly a very simple application. It’s only interaction with the user is that of launching and closing. However, it demonstrates the steps and code required to create a view in Interface Builder and then load it from your view controller in your project code. Now that the view is set up you can add anything you want to it—another label, a button, a text box, a navigation bar—anything at all, and it will be displayed when the application launches.

If you just want to check out the code without following the instructions, of if you simply can’t get it to work on your own machine, then feel free to download the project file for this tutorial. It contains the complete project, interface builder view, and everything is already set up and ready to compile.