Simple iPhone app development tutorial

So you are new to Xcode and Objective-C, well don’t be scared, this tutorial will help you create a simple app. The app will not do anything special but it will implement stuff inorder to make simple stuff.

First we will establish what the app should do and what features we want to implement. Since this is a tutorial app the functionality of the app is not that important, we will focus more on the features. Lets make an app that changes the background picture of the app by dragging a selector on the thumb of the image. So we will implement animation and touch and drag.

Now you need to start a new project, Xcode (using version 4.2 on Snow Leopard) has several templates, for this tutorial I will use the “Single View Application” template. Since this is a very basic tutorial we will use only local storage and no connection to web services or Game Center. We will keep it simple and clean.

After selecting the template we will name our project, I have called mine Tutorial App. For this app we will create an iPhone only app and use the Automatic Reference Counting (ARC) functionality. 

You can now run your app, it has nothing but it will run, both on your device and in the simulator.

Lets start by adding the images we want to use in the project. I usually add a group called “Images” and have two subgroups, “Retina” and “Standard”. One for images that shall be used on iPhones with retina screen. You don’t need to worry about having code for recognizing the screen (even if it is easily done), all you need to do is to name the images and add a @x2 on the retina images, so if a image is named “background.png” the retina version of the image should ba named “background@2x.png”. The only actual difference is that retina images are 4 times bigger. So if a image is 32×32 pixels the retina version is 64×64 pixels.

Lets add our resources now, when we click on our project in XCode we will see the project settings. In the main view we see a list of our project and out target. When looking on the summary of the target there are boxes where we can add app icons and launch images. Add your app icon as you see fit, remember that the standard screen icon should be 57×57 and retina is 114×114. The launch images is the screen resolution, but you can use other resolutions as well, but XCode will give a warning then.

Before we start coding here is some background (not much) on how apps work on the iPhone (and iPad). Every app runs on one window and every window can have several views. Every view can then have there own views. So when we created the project the code for creating the window was generated and it also added one view, therefor we could run the app. But since the view has nothing on it there was nothing to show when we ran the app.
If you look in the AppDelegate.h and .m file you will see that there is a property for the window and it is assigned the view that has been generated. So in order to change what we see we need to change in the view (ViewController.h/.m/.xib).

Lets keep it simple and start with the nib (.xib) file. Click on ViewController.xib and you will be presented with XCodes InterfaceBuilder, here you can add objects to the view as you see fit. Lets start by adding an Image View, placing it so it fills the view. On the properties of the UIImageView you can set the image to use, always use the standard resolution file i.e. the filename without @2x.

As you can see I have added several Image Views and they are listed in the Interface Builder according to z-order. So moving around the images in the list will change the place in height and can make images “disappear” if they get behind an other image. You can play with some attributes in the properties of each image view and try them out.
The selector image (the X) need to have the “User Interaction Enabled” box checked in order to make it available for touch.

Now that you know the basics, lets implementing some code.

Go to ViewController.h, here we need to declare the objects that we want to work with. That is:

• Background image
• Selector image
• Thumbs for other images

The ViewController should look something like this.

@interface ViewController : UIViewController
{
IBOutlet UIImageView *backgroundImage;
IBOutlet UIImageView *selector;
IBOutlet UIImageView *background1Thumb;
IBOutlet UIImageView *background2Thumb;
IBOutlet UIImageView *background3Thumb;
}
@end

What did we just do? IBOutlet is the way of declaring a pointer for an object such as UIImageView so that it can be detected by the Interface Builder. If you now go back to the ViewController.xib file and mark the “File Owner”, you will see the declared objects in the “Connections Inspector”. Now you drag from the empty boxes to the designated Image View. This will connect the Interface Builder object to the code. Otherwise at runtime there would be no complications but nothing would happen either.
Now we move on to the ViewController.m, here is where all the magic happens. First lets check what exists in this file. There are some methods for the lifecycle of the app. At the bottom there is a “shouldAutorotateToInterfaceOrientation” method for the view. This will return what rotations are supported by the view. Since this app is standing only we will change this method.

return (interfaceOrientation == UIInterfaceOrientationPortrait);

Now lets add the touch events and make the selector movable with touch.

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [touches anyObject];
if (touch.view == selector)
{
selectorTouched = YES;
}
}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
if (selectorTouched)
{
UITouch *touch = [touches anyObject];
[selector setCenter:[touch locationInView:self.view]];
}
}

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
selectorTouched = NO;
}

With the movement of the selector in place all we need to do is to detect collision between the selector and the thumbs of the background images. All you need to do is to add this code in the touchesMoved method after we set the new position of the selector.

if (CGRectIntersectsRect(selector.frame, background1Thumb.frame))
[backgroundImage setImage:[UIImage imageNamed:@"Background1.png"]];
else if (CGRectIntersectsRect(selector.frame, background2Thumb.frame))
[backgroundImage setImage:[UIImage imageNamed:@"Background2.png"]];
else if (CGRectIntersectsRect(selector.frame, background3Thumb.frame))
[backgroundImage setImage:[UIImage imageNamed:@"Background3.png"]];

Now you can run the app and you will see that moving around the selector on different thumbs will change the background image.
For myself I like more to declare all objects in code and work as little with the Interface Builder as posible. But for beginners I think the Interface Builder is a more suited way to start.
If there is any requests I can update this tutorial with transitions as well for the background image change.