iOS Tutorial: How To Create A Simple iPhone App Tutorial: Part 3/3

Perhaps the Scariest Bug of All!

Perhaps the Scariest Bug of All!

Update 6/02/14: Fully updated for iOS 7 by Jorge Jordán.

This article is the final part of a 3 part iOS tutorial 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, you created an app that contained a list of bugs in a table view.

In the second part of the series, you learnt how to create a detail view for the bugs.

In this article, you’ll know how to add new bugs, how to add an icon and default image to your project, and how to handle long-running operations.

So wrap this app up!

Adding and Deleting Bugs

Everything’s working great so far, but so far this isn’t a very user-friendly app! I mean the first thing anyone would want to do is add their own bug, and so far the only way to do that is by editing code!

Luckily, since you wrote your RWTDetailViewController to allow editing bugs, and are using a UITableViewController for the RootViewController, most of the infrastructure is already in place! There are just four changes you have to make, but I’m going to explain them bit-by-bit to keep things easy to understand:

1) Set up navigation bar buttons

Inside RWTMasterViewController.m, add the following lines of code to viewDidLoad:

self.navigationItem.leftBarButtonItem = self.editButtonItem;
self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] 
    initWithBarButtonSystemItem:UIBarButtonSystemItemAdd 
    target:self action:@selector(addTapped:)];

Here you set up some buttons in the navigation bar. Just like title is a special property in view controllers used by the navigation controller, navigationItem is another of those. Whatever you set for the leftBarButtonItem and the rightBarButtonItem will show up in the navigation bar when the navigation controller shows your view controller.

For the leftBarButtonItem, you use a special built-in button called editButtonItem. This button says Edit and toggles the UITableView between edit mode (where you can delete rows for example) and normal mode.

For the rightBarButtonItem, you create a button that the user can tap to create a new bug entry. It turns out there’s already a built-in system item for adding (that looks like a + symbol), so you go ahead and use that, and register the addTapped: method to be called when it’s tapped.

Note that you can also set these up in the Storyboard Editor, but I set them up here in code to show you that you can do things this way too.

2) Implement tableView:commitEditingStyle:forRowAtIndexPath

Still in RWTMasterViewController.m, replace the contents of the method tableView:commitEditingStyle:forRowAtIndexPath with the following:

if (editingStyle == UITableViewCellEditingStyleDelete) {        
    [_bugs removeObjectAtIndex:indexPath.row];
    [tableView deleteRowsAtIndexPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:UITableViewRowAnimationFade];
}

This method is called when the user chooses to modify a row in some way. You check to see that the user is trying to delete the row, and if so you delete it. Note you have to remove it both from your data model (_bugs) and notify the table view that one of the rows has been deleted, via deleteRowsAtIndexPaths.

3) Handle adding a new bug

Next add this new method to RWTMasterViewController.m:

- (void)addTapped:(id)sender {
    RWTScaryBugDoc *newDoc = [[RWTScaryBugDoc alloc] initWithTitle:@"New Bug" rating:0 thumbImage:nil fullImage:nil];
    [_bugs addObject:newDoc];
    
    NSIndexPath *indexPath = [NSIndexPath indexPathForRow:_bugs.count-1 inSection:0];
    NSArray *indexPaths = [NSArray arrayWithObject:indexPath];    
    [self.tableView insertRowsAtIndexPaths:indexPaths withRowAnimation:YES];
    
    [self.tableView selectRowAtIndexPath:indexPath animated:YES scrollPosition:UITableViewScrollPositionMiddle];
    [self performSegueWithIdentifier:@"MySegue" sender:self];    
}

You set things up in step 1 so that when the user taps the add button, this method gets called.

Here you create a RWTScaryBugDoc with some default values, and add it to the bugs array. Note you have to also update the table view so it knows there’s a new row.

Then you call some code to make the table view act as-if the user selected the new row, so you immediately go into the edit view for the new bug. You first select the row in the table view, then you manually perform the segue that you set up in the Storyboard Editor.

Note that you never actually named the segue MySegue in the Storyboard Editor earlier, so do that as your final step.

4) Name the segue

Open Main.storyboard and click on the arrow with an icon between the master and detail view controller – this is your segue.

Then in the fourth tab on the sidebar (the Attributes Inspector), set the Identifier to MySegue. This way you can manually run it when you want from code.

That’s it! If you compile and run the code, you should now be able to add your own bugs, such as this one:

Adding An Icon and Default Image

Ok, your app is looking pretty fun and amusing, time to ship it and get rich!

Except it would be pretty embarassing if you did right now, I mean you don’t even have an icon!

Luckily, that is quite easy to fix. Earlier, you added an icon to your project file (logo1.png), from ExtraStuffForScaryBugs2.zip. Set that as the icon for your project!

To do that, the easiest way is to select your ScaryBugs project in the Project navigator, and select your ScaryBugs target. Make sure the General tab is selected, and scroll down to App Icons and click on the arrow. Drag logo1.png from the project navigator to the iPhone Spotlight iOs 7 40pt slot:

Accept any warnings, and you should see it show up. If you get a warning that the image size doesn’t match, resize logo1.png to 80×80 (an earlier download had the file larger than that).

Go ahead and delete and re-install the app on your simulator or phone, and you should see the new icon show up!

There’s one other thing you should fix as well. If you try running ScaryBugs, you might notice that after you tap the icon, there’s a pause before it shows up where just a black screen displays. That is kind of embarassing behavior – it looks like the app isn’t very responsive.

According to Apple’s documentation, the best thing to do is to display a screen that looks just like your app would, but without any data in it yet. That’s pretty easy to do. Just open up RWTMasterController.m, and make the following change:

// Replace tableView:numberOfRowsInSection's return statement to the following:
return 0; //return _bugs.count;

Then run the project on the simulator, and you’ll see an empty table view after it loads. In the main menu of iOS Simulator, click on File\Save Screen Shot and find it in your desktop, you will use it as your launch image. To do that, back to XCode, select your ScaryBugs project in the Project navigator, and select the ScaryBugs target. Make sure the General tab is selected, and scroll down to Launch Images and click on the arrow. Drag the screenshot on your desktop to the iPhone Portrait iOS 7 2x.

Then restore tableView:numberOfRowsInSection to the way it was and run the app again. You should see a default screen as it loads instead of a blank view, and the app should feel a lot more responsive!