How To Create A Simple iPhone App Tutorial: Part 2/3 ~ PakTechClub

Apparently this Lady Bug isn't very scary!

This article is the second part of a 3 part series on how to create a simple iPhone app for beginners. And this app happens to be about rating scary bugs!

In the first part of the series, we created an app that contained a list of bugs in a table view.

In this article, we’ll cover how to create a detail view so that we can view a larger picture of the bugs, rate them, and and change their pictures!

In the third and final part of the series, we’ll cover how to add new bugs, add an icon and default image to our project, and handle long-running operations.

So let’s get to making some bugs! After all, isn’t that what programming’s all about? :]

View Controllers, Oh My!

Now that we have a list of bugs, it would be nice to be able to tap on the bug to bring up a screen where we can edit the bug’s name or picture, and rate the bug.

Most of the time in iPhone apps, for every “screen” of the app you have a class that is the “View Controller” for that screen. Right now we already have one view controller for our table view (RootViewController), so now we’ll need a second for our details screen.

Each “View Controller” can contain multiple views. In our table view controller, we just had a single view – the table view. However in our details view controller, we’re going to need a bunch of views – we’re going to need a view for the name of the bug, a view for the image, a view for the rating, and several others.

Download Some Stuff!

Speaking of which – we’re going to need a 5-star rating view in this details screen – but the iPhone doesn’t come with one by default. However, I recently wrote a tutorial on How To Make a Custom UIView: A 5-Star Rating View, so we’ll just use the view from that tutorial again here.

Don’t worry about going throught that tutorial now (unless you feel like it) – instead you can just download the Extra Stuff for Scary Bugs package that I put together for this project.

Go ahead and download the file then:

Create a new group named “Views” in XCode, and drag RateView.h/RateView.m to that group, making sure “Copy items into destination group’s folder (if needed)” is checked. This is the 5-star rating view code from the tutorial.
Repeat for UIImageExtras, except drag them to a new group named “Helpers”. This is some helper code we’ll need to resize images a bit later on.
Repeat for the three shocked face images made by my lovely wife, except drag them to the Resources group instead. These are the images we’ll be using for the “stars” in our rating view for some humorous flair :]
Repeat for the logo1.png, also drag that to the Resources group. We’ll be setting that as the app icon later.

Creating Our View Controller With Interface Builder

Ok – now we’re finally ready to go! Right click on the View Controllers group, and click “Add\New File…”. Choose Cocoa Touch Class\UIViewController subclass, and make “With XIB for user interface” is checked but no others are:

Click Next, name the file EditBugViewController.m, and click Finish.

You’ll see that three new files should be added to your project – EditBugViewController.h, EditBugViewController.m, and EditBugViewController.xib.

So what’s this XIB thing all about? Well double click it to find out:

A XIB is the file type that you edit with Interface Builder – a visual way to construct your user interface in XCode. You drag and drop UI elements onto your view, set up their properties the way you want, and you can even connect the elements to properties in your View Controller classes.

The easiest way to understand it is to try it out! But before we do, we need to set up some properties in our EditBugViewController.h first. So replace EditBugViewController.h with the following:

#import <UIKit/UIKit.h>
#import "RateView.h"
 
@class ScaryBugDoc;
 
@interface EditBugViewController : UIViewController <UITextFieldDelegate, RateViewDelegate, UIImagePickerControllerDelegate, UINavigationControllerDelegate> {
    ScaryBugDoc *_bugDoc;
    UITextField *_titleField;
    UIImageView *_imageView;
    RateView *_rateView;
    UIImagePickerController *_picker;
}
 
@property (retain) ScaryBugDoc *bugDoc;
@property (retain) IBOutlet UITextField *titleField;
@property (retain) IBOutlet UIImageView *imageView;
@property (retain) IBOutlet RateView *rateView;
@property (retain) UIImagePickerController *picker;
 
- (IBAction)titleFieldValueChanged:(id)sender;
- (IBAction)addPictureTapped:(id)sender;
 
@end

You may notice some funky types above – IBOutlet and IBAction. These are “magic keywords” that Interface Builder looks for, in order to allow us to associate controls that we add in interface builder to properties on our class. Basically, if we put an IBOutlet or IBAction next to a property/method, Interface Builder will detect it so we can hook it up later. These things are called “outlets” btw.

Now that our class and outlets are ready, let’s set up our XIB. In the window that reads “EditBugViewController.xib”, double click the View to bring up the View window if it isn’t there already. Then go to “Layout\Show Bounds Rectangles”, which will make it a bit easier to lay out the elements.

Now, let’s start adding some controls onto the screen! Bring up the Library by going to Tools\Library, and drag a UITextField, UIImageView, and a UIView onto the text screen and arrange them like the following (the text field is on top):

Then select the UITextField and click Tools\Attributes Inspector so we can change some properties.

Set the font to Helvetica-Bold size 18.0, the text alignment to center, the clear button behavior to “Appears While Editing”, the capitalization to Words like the following:

Then, switch over to the Size Inspector by clicking on the third tab or going to Tools\Size Inspector, and set up the autosizing attributes like the following:

This will make it so that when our view gets rotated to landscape, the text field stretches across the screen to become wider.

Next lets set up our UIImageView. In the first tab (Attributes Inspector) set the mode to “Aspect Fit”, and in the third tab (Size Inspector) and set the autosizing attributes to the following:

For the UIView, go to the fourth tab (Identity Inspector) and set the set the Class Identity to “Rate View” so our 5-Star Rating view shows up there. Then in the third tab (Size Inspector) set the autosizing attributes to the following:

So far, so good! Next we need to add a few more controls to the screen so that the user can tap the UIImageView area to change the picture.

There are a couple ways we can do this, but one easy way it to create an invisible button on top of the UIImageView, and set it up so that we get a callback when the button is tapped. We can also add a UILabel underneath the picture to say “Tap to Change Picture” if there is no picture set.

So drag a UIButton from the library, and resize it to be the same exact size and postion as the UIImageView. To make it invisible, in the first tab (Attributes Inspector) change the type to Custom. Then in the third tab (Size Inspector) set the autosizing attributes to the following:

Finally, drag a UILabel from the library, place it in the middle of the UIImageView, and double click to edit the text, changing it to “Tap To Change Image.” Then change the text alignment to center. Also, drag the UILabel up a few positions in the XIB so it’s behind the UIImageView (the list goes from bottom to top):

Then in the third tab (Size Inspector) set the autosizing attributes to the following:

Before you move on, you can double check that you’ve gotten all of the autosizing attributes right by selecting the root View, and changing the orientation from Portrait to Landscape:

If something isn’t right, don’t worry – just change it back to Portrait and double check the settings.

Phew! We’ve added all of the controls we need, so all we need to do now is hook everything up to their outlets in our class:

Control-drag from “File’s Owner” to the UITextField, RateView, and UIImageView, and connect each of them to their corresponding outlets.
Control-drag from the UITextField back up to the “File’s Owner” to set the EditBugViewController as the delegate of the UITextField.
Control-drag from the UIButton back up to the “Files’s Owner”, and connect it to the “addPictureTapped” outlet. This is a shortcut for hooking up the TouchUpInside event to that outlet.
Right click on UITextField, drag from the dot next to “Editing Changed” up to “File’s Owner”, and connect the action to the “titleFieldValueChanged” outlet.

When you’re done you can double check your work by right clicking on File’s Owner to bring up a popup with all of the connections you’ve set, it should look similar to the following:

Implementing Our Detail View

We’ve got the Interface Builder side all set up – now we need to finish impilementing EditBugViewController.m and hook it up to the rest of the project.

We’re going to make a bunch of changes to EditBugViewController.m. There’s a lot of code here, so let’s go over it party by part.

1) Import headers and synthesize properties

// At top of file
#import "ScaryBugDoc.h"
#import "ScaryBugData.h"
#import "UIImageExtras.h"
 
// After @implementation
@synthesize bugDoc = _bugDoc;
@synthesize titleField = _titleField;
@synthesize imageView = _imageView;
@synthesize rateView = _rateView;
@synthesize picker = _picker;

You should be a pro at this by this point!

2) Set up Rate View

// Uncomment viewDidLoad and add the following inside
_rateView.notSelectedImage = [UIImage imageNamed:@"shockedface2_empty.png"];
_rateView.halfSelectedImage = [UIImage imageNamed:@"shockedface2_half.png"];
_rateView.fullSelectedImage = [UIImage imageNamed:@"shockedface2_full.png"];
_rateView.editable = YES;
_rateView.maxRating = 5;
_rateView.delegate = self;

In viewDidLoad, we set up the properties of our RateView. For more details, check out the How To Make a Custom UIView: A 5-Star Rating View tutorial.

3) Enable autorotation

// Uncomment shouldAutorotateToInterfaceOrientation and replace the return value to:
return YES;

In shouldAutorotateToInterfaceOrientation, we return YES since we went to all the work of setting up the autosizing attributes in Interface Builder! This will allow the user to rotate this view between orientations, and our controls will re-layout according to the autosizing attributes we set up.

4) Release memory properly where applicable

// Inside didReceiveMemoryWarning
self.picker = nil;
 
// Inside viewDidUnload
self.titleField = nil;
self.imageView = nil;
self.rateView = nil;
 
// Inside dealloc
[_bugDoc release];
_bugDoc = nil;
[_titleField release];
_titleField = nil;
[_imageView release];
_imageView = nil;
[_rateView release];
_rateView = nil;
[_picker release];
_picker = nil;

In didReveiveMemoryWarning, we should clear out anything that we may have a pointer to that we don’t absolutely need because we can recreate it later. In this case, the Image Picker fits into that category becuase we will write our code so that we re-create it wheneer its nil.

viewDidUnload is called when the OS is trying to save memory – one of the things it does is unload any views that are no longer visible. When they become visible again, viewDidLoad is called again. So in viewDidUnload, it’s important to set anything we create in viewDidLoad to nil, as well as anything that was connected by Interface Builder. So here we set our three controls connected by Interface Builder to nil.

And of course, in dealloc, we should free everything.

5) Set up initial UI state

// Add new method
- (void)viewWillAppear:(BOOL)animated {    
    _titleField.text = _bugDoc.data.title;
    _rateView.rating = _bugDoc.data.rating;    
    _imageView.image = _bugDoc.fullImage;
    [super viewWillAppear:animated];
}

viewWillAppear is a good place to initialize all of our controls to what they should display, based on our model.

6) Handle text view and rating view

- (IBAction)titleFieldValueChanged:(id)sender {
    _bugDoc.data.title = _titleField.text;
}
 
#pragma mark UITextFieldDelegate
 
- (BOOL)textFieldShouldReturn:(UITextField *)textField {
    [textField resignFirstResponder];
    return YES;
}
 
#pragma mark RateViewDelegate
 
- (void)rateView:(RateView *)rateView ratingDidChange:(float)rating {
    _bugDoc.data.rating = rating;
}

We set up titleFieldValueChanged to be called whenever the user changes the value of the text field, so we update the model as well whenever it changes.

textFieldShouldReturn is called when the user hits the return key on the keyboard. We call resignFirstResponder to get the keyboard to disappear off the screen when that happens.

rateView:ratingIsChanged is called when the user chooses a new rating since we set ourselves as the RateView’s delegate, so when that happens we update our model.

In case you were wondering, the #pragma marks are just special lines that XCode can read to set up separators in the editor’s function list for organization’s sake:

7) Display image picker and process results

- (IBAction)addPictureTapped:(id)sender {
    if (_picker == nil) {   
        self.picker = [[[UIImagePickerController alloc] init] autorelease];
        _picker.delegate = self;
        _picker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
        _picker.allowsEditing = NO;    
    } 
    [self.navigationController presentModalViewController:_picker animated:YES];    
}
 
#pragma mark UIImagePickerControllerDelegate
 
- (void)imagePickerControllerDidCancel:(UIImagePickerController *)picker {
    [self dismissModalViewControllerAnimated:YES];
}
 
- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info {    
 
    [self dismissModalViewControllerAnimated:YES];
 
    UIImage *fullImage = (UIImage *) [info objectForKey:UIImagePickerControllerOriginalImage]; 
    UIImage *thumbImage = [fullImage imageByScalingAndCroppingForSize:CGSizeMake(44, 44)];
    _bugDoc.fullImage = fullImage;
    _bugDoc.thumbImage = thumbImage;
    _imageView.image = fullImage;
}

We set up addPictureTapped to be called whenever the user taps the invisible button above the UIImage, so here we create the UIImagePicker (if it doesn’t exist already), and set the photo source to photo library (you can choose other things such as camera as well). We set ourselves as the delegate so we can get callbacks when the user finished picking the picture. Finally, we present the image picker as a modal view controller, which means it takes up the whole screen.

Finally, we implement the image picker callbacks for when the user picks an image or cancels. Either way, we dismiss the modal view controller. If the user did pick the image, we get the full image and also a thumbnail version (which we resize with the UIImageExtras class that we added earlier), and update both the model and the view.

OMG – you’re probably sick of writing code now eh? Don’t worry – we’re almost done, just gotta hook this baby in!

Integrating Our Detail View

This should be pretty quick. Make the following changes to RootViewController.h:

// Before @interface
@class EditBugViewController;
 
// Inside @interface
EditBugViewController *_editBugViewController;
 
// After @interface
@property (retain) EditBugViewController *editBugViewController;

We’re just declaring an instance variable and property to keep track of the view controller for editing a bug.

Then make the following changes to RootViewController.m:

// At top of file
#import "EditBugViewController.h"
 
// In synthesize section
@synthesize editBugViewController = _editBugViewController;
 
// Uncomment viewWillAppear and add the following inside:
[self.tableView reloadData];
 
// Add inside tableView:didSelectRowAtIndexPath
if (_editBugViewController == nil) {
    self.editBugViewController = [[[EditBugViewController alloc] initWithNibName:@"EditBugViewController" bundle:[NSBundle mainBundle]] autorelease];        
}
ScaryBugDoc *doc = [_bugs objectAtIndex:indexPath.row];
_editBugViewController.bugDoc = doc;
[self.navigationController pushViewController:_editBugViewController animated:YES]; 
 
// Inside didReceiveMemoryWarning
self.editBugViewController = nil;
 
// Inside dealloc
[_editBugViewController release];
_editBugViewController = nil;

Most of this should be self-explanatory, however there are two things to point out.

First, note that in viewWillAppear, we reload the data in the table. This is because when the user is in the detail view, they might change the name of the bug or the picture, and we want the updated name/picture to show up when they come back to the table view. One easy way to do that is to reload the entire table, so we do that here.

The important code is in the tableView:didSelectRowAtIndexPath method. When the user selects a row, we check to see if we’ve created the editBugViewController, and if not we go ahead and create it. Then we get the bug the user has tapped on by indexing the _bugs array, set the bug property on the editBugViewController, and present the view controller by pushing it onto the navigation stack.

Finally, we’re done! Go ahead and compile and run your project, and if all goes well you should now be able to bring up the bug detail view, change the names of the bugs, change their pictures, rate them, and even rotate to any orientation!

Where To Go From Here?

Here is a sample project with all of the code we’ve developed so far in this tutorial series.

Please let me know if anything in the above is confusing or if you’d like me to go into more detail about anything.

In the final part of the series, we’ll cover how to add and delete bugs, add an icon and default image to our project, and correctly handle long-running operations!

PakTechClub

Thursday, 13 October 2011