In Part 1 of this series, I will introduce you to the very basics of CoreLocation services and getting the location of the device currently being used.

About CoreLocation

The CoreLocation framework provides your app with the ability to get a device’s current location, provided the user of the device has granted your app access to that information.

Location services are provided in two major ways using this framework:

1. Standard Location Services- This service provides the most accurate location information using a variety of methods including celluar, wifi, and GPS.
   • Most accurate.
   • Consumes the most power and can take a longer time to acquire.
   • Can only be used when your application is in the foreground.
2. Significant Change Location Services- This service uses cellular data to determine a general idea of where the device is located.
   • Fastest and uses the least amount of power to determine the location.
   • Can also be used to notify your app when a significant change in the location has occurred even if your app is not in focus.

Project Files:

You can download the project files at this github repository: http://github.com/shawngrimes/Location-and-Map-Sample

Adding Location Frameworks

The first step to adding location services to your project is to add the CoreLocation framework.

1. Select your target and go to the “Build Phases” tab.
2. Click the “+” button under “Link Binary With Libraries”
3. Select the CoreLocation framework and click “Add”

Location Manager

With location services, you create an instance of CLLocationManager. There is usually one instance of this per app so I feel a good place for this is in the App Delegate and then each view can access the current location from the App Delegate.

To start, open your App Delegate header file:

1. Add #import <CoreLocation/CoreLocation.h> to the top
2. Specify that your app delegate complies with the Core Location Delegate protocol by changing your @interface line with @interface CFAAppDelegate : UIResponder <UIApplicationDelegate, CLLocationManagerDelegate>
3. Specify a CLLocationManager property by adding @property (strong, nonatomic) CLLocationManager *locationManager right before the @end statement.

Your App Delegate header file should now look similar to the following:

#import <UIKit/UIKit.h>
 
//Add Location Framework
#import <CoreLocation/CoreLocation.h>
 
//Specify this app delegate complies with the location manager delegate
@interface CFAAppDelegate : UIResponder <UIApplicationDelegate, CLLocationManagerDelegate>
 
@property (strong, nonatomic) UIWindow *window;
 
//Add a location manager property to this app delegate
@property (strong, nonatomic) CLLocationManager *locationManager;
 
@end

Creating The Location Manager Object

Switch over to the App Delegate implementation file (.m), and we are going to create our location manager object. The first thing we should do, since we created it as a property of our app delegate, is synthesize the property so add @synthesize locationManager=_locationManager; under the line that reads @synthesize window = _window;.

#import "CFAAppDelegate.h"
 
@implementation CFAAppDelegate
 
@synthesize window = _window;
@synthesize locationManager=_locationManager;

Now that our property is synthesized, we can create the object. I usually create it in the method application didFinishLaunchingWithOptions:. A Location Manager object is created similar to any other object but there are three important properties you should set after you have alloc’d/init’d.

1. .purpose – The purpose property is displayed to the user of your app when they are prompted to allow your app to use their location. It gives you a chance to explain what your app is going to do with their location information.
2. .desiredAccuracy – The desired accuracy property allows you to tell the device how accurate you would like the location information to be. This should be set based on your application’s needs. Don’t set this property to kCLLocationAccuracyBest if you only need to know what city they are in. NOTE: This is the “desired” accuracy, it is not guaranteed. The device will determine the best available information and provide it to you but you are not, however, guaranteed any level of accuracy.
3. .distanceFilter – The distance filter property tells the location manager how far a device needs to move (horizontally vs. an altitude change) before triggering a new location event. It is measured in meters. You can set the property to kCLDistanceFilterNone to be notified of all events (this is also the default value).

The completed creation of our location manage looks like this:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    // Override point for customization after application launch.
    self.window.backgroundColor = [UIColor whiteColor];
    [self.window makeKeyAndVisible];
 
    if(self.locationManager==nil){
        _locationManager=[[CLLocationManager alloc] init];
        //I'm using ARC with this project so no need to release
 
        _locationManager.delegate=self;
        _locationManager.purpose = @"We will try to tell you where you are if you get lost";
        _locationManager.desiredAccuracy=kCLLocationAccuracyBest;
        _locationManager.distanceFilter=500;
        self.locationManager=_locationManager;
    }
 
    return YES;
}

If you run this now, you should not notice any change in the way your application runs, you also won’t start receiving location information just yet. That comes next…

Starting Location Services

Now that we have our location manager configured, we want to start getting the location. To start the standard location service, you should first check to make sure that location services are enabled. This is done with a simple call to [CLLocationManager locationServicesEnabled] so after we set up our location manager above and before the return YES;, add the following code:

    if([CLLocationManager locationServicesEnabled]){
        [self.locationManager startUpdatingLocation];
    }

NOTE: If location services are not enabled and you start updating location services, the user will be prompted to enable location services. This could be annoying to the end user if they have to answer “No” every time your app launches.

If you run your app now, you will notice that the user is prompted to enable location services (and it will include the message from the .prompt property of our location manager object).

Receiving Location Changes

We’ve started location services, but now we need to start receiving updates to location changes. This is all done through the CLLocationManagerDelegate protocol. There are a number of available methods to implement for this delegate but the three most important are probably:

1. – locationManager:didUpdateToLocation:fromLocation:
2. – locationManager:didFailWithError:
3. – locationManager:didChangeAuthorizationStatus:

– locationManager:didUpdateToLocation:fromLocation:

Let’s start with receiving an update in location and how to handle that. In our App Delegate implementation file (.m), add the following method placeholder below the @synthesize … statements and above - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions method:

-(void)locationManager:(CLLocationManager *)manager didUpdateToLocation:(CLLocation *)newLocation fromLocation:(CLLocation *)oldLocation{
 
}

One of the first things I like to do is check the timestamp of the newLocation detected. When you first start updating location services, the location manager will receive the last known location of the device, this could be hours or days old depending on the last time location services were used. In my apps, I like to make sure that I have a recent location. This following code will only use a location that has been found in the last 15.0 seconds:

    NSDate* eventDate = newLocation.timestamp;
    NSTimeInterval howRecent = [eventDate timeIntervalSinceNow];
    if (abs(howRecent) < 15.0)
    {
        //Location timestamp is within the last 15.0 seconds, let's use it!
    }

The next check that I like to perform is to see how accurate the newLocation is. This can be done by looking at the .horizontalAccuracy property. This property tells you how accurate your location information is. As I stated above, you can request to have very accurate locations but you are not guaranteed it. In the illustration below, the newLocation.coordinate is the location the device thinks it is, but in truth the orange circle of the .horizontalAccuracy says that it could be anywhere in that circle.

Your application’s need will determine how accurate of a location you need. Again, if you just need the city the user is in, you won’t need it to be as accurate as if you were trying to find something within walking distance. In the code below, I have set my accuracy threshold to 35.0 meters. This is pretty broad but I have found that it works well indoors as well as out. Insert the following code right after the comment //Location timestamp is within the last 15.0 seconds, let's use it!

        //Location timestamp is within the last 15.0 seconds, let's use it!
        if(newLocation.horizontalAccuracy<35.0){
            //Location seems pretty accurate, let's use it!
            NSLog(@"latitude %+.6f, longitude %+.6f\n",
                  newLocation.coordinate.latitude,
                  newLocation.coordinate.longitude);
            NSLog(@"Horizontal Accuracy:%f", newLocation.horizontalAccuracy);
 
            //Optional: turn off location services once we've gotten a good location
            [manager stopUpdatingLocation];
        }

The code above will print the new location to the console and then turn off location services. This is an optional step but if you don’t need location services anymore, it’s a smart thing to turn them off to conserve your user’s battery.

This is what our complete delegate method looks like:

-(void)locationManager:(CLLocationManager *)manager didUpdateToLocation:(CLLocation *)newLocation fromLocation:(CLLocation *)oldLocation{
    NSDate* eventDate = newLocation.timestamp;
    NSTimeInterval howRecent = [eventDate timeIntervalSinceNow];
    if (abs(howRecent) < 15.0)
    {
        //Location timestamp is within the last 15.0 seconds, let's use it!
        if(newLocation.horizontalAccuracy<35.0){
            //Location seems pretty accurate, let's use it!
            NSLog(@"latitude %+.6f, longitude %+.6f\n",
                  newLocation.coordinate.latitude,
                  newLocation.coordinate.longitude);
            NSLog(@"Horizontal Accuracy:%f", newLocation.horizontalAccuracy);
 
            //Optional: turn off location services once we've gotten a good location
            [manager stopUpdatingLocation];
        }
    }
}

Now we can run the project again. If you didn’t authorize the app to use location services before, go ahead and do that now. We haven’t done anything with the location at this point except print it out to the console. If you don’t know how to see the console, make sure Xcode is the active window (NOT the simulator) and press ⌘⇧C

If you are running the project on the simulator and not a device, you may not see any results in the console window. This is because the simulator does not have location services turned on by default. You can simulate a location by selecting the location services simulation in the console window:

You can also simulate a location in the Simulator by using the Debug menu.

Once a location has been selected, you may need to restart the app to get the new location to show in the console window:

Because we built the location manager into the App Delegate, you can access the device’s current location anywhere in your code by including the AppDelegate header file (.h) in your view controller’s implementation file (.m):

#import "CFAAppDelegate.h"

Then whenever you need to access the location, you can use the following bit of code:

//Make sure location services are enabled before requesting the location
if([CLLocationManager locationServicesEnabled]){
 
    CFAAppDelegate *appDelegate=(CFAAppDelegate *)[UIApplication sharedApplication].delegate;
    CLLocation *currentLocation=appDelegate.locationManager.location;
 
    //Do what you want with the location...
}

About: Shawn Grimes
Shawn is a mobile app developer for ELC Technologies. He is a co-author of the book, iOS 5 Recipes: A Problem-Solution Approach (Recipes Apress). You can follow him on twitter @shawng. Shawn also works with high school students to teach them app development skills through the APPlied Club Program.

UIKit/UIKit.hp

Here is a quick demonstration of the power of snippets

Type:

ttt

It generates:

#pragma mark - UITableView Datasource
 
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 1;
}
 
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 10;
}
 
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *cellIdentifier = @"Cell";
 
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];
 
    if(cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier];
    }
 
    cell.textLabel.text = [NSString stringWithFormat:@"Cell %d", indexPath.row];
 
    return cell;
}
 
#pragma mark - UITableView Delegate methods
 
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
 
}

As you can see, with 3 keystrokes, I now have a fully working table view implementation with sample data.

This article will be another introduction to XCode 4 snippets but focusing on how to set them up as well as share them with your team.

Adding A Snippet Inside Of XCode

In my opinion, this is not very obvious. The snippet library is fairly well hidden. To bring it up, first ensure that the right side bar is visible in XCode by selecting the right most option of the “view” pane in the top right corner of XCode.

Now that the right bar is available, click on the “{}” option of the bottom most pane. This will bring up the snippet library.

Feel free to browse the snippets that XCode ships with, however most of them are not very useful. So, now this is where I feel Apple engineers were a little too clever. It took me a little while to figure out how to actually add a new snippet. You would expect some sort of + button or something. The way you add a new snippet in this case is to write out a chunk of code and drag it into the Code Snippet Library window.

Once you drag the code into the library, it creates a default snippet called “My Code Snippet”. Which again, is just terribly non-obvious. Now, double click on “My Code Snippet”, and then click the “edit” button to modify it.

Let’s talk about each of the important fields:

1. Title – This is just the common name you will use to refer to the snippet. It will display during autocompletion
2. Completion Shortcut – this is the command you will use to invoke the snippet. For example, I have ttt to automatically create all of the UITableView delegate and datasource methods with sample data.
3. Completion Scopes – This is pretty cool. You can have the same shortcut to represent differnet snippets based on the scope of the document. For example, you won’t want to invoke your @property snippets inside of your Class implementation. So, they get ignored…

Adding dynamic fields

If you notice, many of Apple’s auto generated classes or snippets (like UIAlertView), have these “code bubbles” hinting at the type of data you should put into them. They are also nice because they allow you to tab between them enabling you to implement the code quicker. To add your own simply insert this into your code:

<#Text#>

Where “Text” is whatever you want the code bubble to say.

That’s it, when you are finished click done and you should now be able to use your snippets.

Sharing Snippets

While XCode doesn’t have an export button for snippets, they are in a fairly predictable location. They are located at:

~/Library/Developer/Xcode/UserData/CodeSnippets/

That being said, you could manually share them between developers (zip them up and email) OR you could version control this folder with something like git. I really like the latter approach. Any time a developer adds a new snippet to the library, the others just have to pull, restart XCode, and voila the snippet is there.

Conclusion

The only issue now is remembering to actually use your snippets in practice. It takes some getting used to, but I’m sure you will get it. Below, you can download a zip file containing many of the snippets that I use. Simply unzip it into the folder that I mentioned above.

Download My Snippets

Happy iCoding!

Follow me on Twitter

What we are going to explore today is how to remedy that situation.
To download the entire XCode project, you can find it at: http://github.com/elc/ICB_PrettyTableView

We are going to build a simple contact viewer, that will display the phones contacts. For each contact, if they have a first name, last name, email and phone number, they will be displayed within one cell, with different colors. The reason this is useful is because it provides the basics for customizing UITableViewCells that can really start to make your application look nice, and still scroll well.
If you don’t want to have simulated data inside the simulator, check out this post for copying data from your device to the simulator: How to import contacts into the iphone simulator

In this example, we have a standard UITableViewController. We are going to have a couple class variables defined in the header

#import <UIKit/UIKit.h>
#import <AddressBook/AddressBook.h>
 
@interface ICBTableViewController : UITableViewController
{
    ABAddressBookRef _addressBook;
}
 
@property (nonatomic, retain) NSArray *contacts;
 
@end

ABAddressBookRef _addressBook is defined in our header, so that we don’t have to release it until we dealloc. And the contacts is so that we can hold on to the data for our tableView.
In the main table view controller file we are going to override the – (void)viewDidLoad to provide some initial configuration of the tableView, as well as loading or generating our data. (We will generate fake data for devices or the simulator that don’t have address book data)

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.tableView.backgroundColor = UIColor.blackColor;
    self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
 
    ABAddressBookRef addressBook = ABAddressBookCreate();
    NSArray *tempArray = (NSArray *)ABAddressBookCopyArrayOfAllPeople(addressBook);
    tempArray = [tempArray sortedArrayUsingComparator:^NSComparisonResult(id obj1, id obj2) {
        NSString *name1 = (NSString *)ABRecordCopyCompositeName((ABRecordRef)obj1);
        NSString *name2 = (NSString *)ABRecordCopyCompositeName((ABRecordRef)obj2);
        return [name1 compare:name2];
    }];
 
    if ([tempArray count] > 0) {
        self.contacts = tempArray;
    } else {
        NSMutableArray *tempMutableArray = [NSMutableArray arrayWithCapacity:100];
        for (int i = 0; i < 100; ++i) {
            NSMutableDictionary *dict = [NSMutableDictionary dictionary];
            if ((i % 9) != 0) {
                [dict setObject:[NSString stringWithFormat:@"FirstName%d", i] forKey:@"firstName"];
            }
            if ((i % 3) == 0) {
                [dict setObject:[NSString stringWithFormat:@"LastName%d", i] forKey:@"lastName"];
            }
            if ((i % 3) == 0 && (i % 2) == 0) {
                [dict setObject:[NSString stringWithFormat:@"emailTest%d@test%d.com", i, i] forKey:@"email"];
            }
            if ((i % 7) == 0) {
                NSString *string = [NSString stringWithFormat:@"%d", i];
                while ([string length] < 10) {
                    string = [string stringByAppendingFormat:@"%@", string];
                }
                [dict setObject:string forKey:@"phone"];
            }
            [tempMutableArray addObject:dict];
        }
        self.contacts = tempMutableArray;
    }
}

As you can see here we have a couple of self.tableView methods we have called to setup the background color, and also the cell separator style.
If you are running this application on a device, or simulator that has contacts, this method will also make a copy of the address book as the data to display. If there is no data in the address book, we create some fake test data just for displaying.
Also don’t forget to include our – (void)dealloc method for releasing our _addressBook variable.

- (void)dealloc
{
    CFRelease(_addressBook);
    [_contacts release];
    _contacts = nil;
}

We have to supply the tableView with our number of rows

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return [self.contacts count];
}

The next portion we have to override is the – (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath so that we can supply the tableView with our cells.

// Customize the appearance of table view cells.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{   
 
    static NSString *CellIdentifier = @"ICBTableViewCellIdentifier";
 
    ICBTableViewCell *cell = (ICBTableViewCell*)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[ICBTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
        cell.textLabel.textColor = UIColor.whiteColor;
    }
    cell.tag = indexPath.row;
 
    NSObject *object = [self.contacts objectAtIndex:indexPath.row];
    if ([object isKindOfClass:NSDictionary.class]) {
        [cell setDictionary:(NSDictionary *)object];
    } else {
        [cell setRecord:(ABRecordRef)object];
    }
 
    return cell;
}

We are checking each object coming out of our array so that we can determine if we need to call the setDictionary, or setRecord method calls.

Now the meat of this tutorial, extending a UITableViewCell.

In our header we are going to define a bunch of strings that we want to display

#import <UIKit/UIKit.h>
#import <AddressBook/AddressBook.h>
 
@interface ICBTableViewCell : UITableViewCell
 
@property (nonatomic, retain) NSString *firstName;
@property (nonatomic, retain) NSString *lastName;
@property (nonatomic, retain) NSString *email;
@property (nonatomic, retain) NSString *phone;
@property (nonatomic, retain) NSString *address;
 
- (void)setRecord:(ABRecordRef)record;
- (void)setDictionary:(NSDictionary *)dict;
 
@end

And then our two set methods:

- (void)setRecord:(ABRecordRef)record
{
    self.firstName = [(NSString *)ABRecordCopyValue(record, kABPersonFirstNameProperty) autorelease];
    self.lastName = [(NSString *)ABRecordCopyValue(record, kABPersonLastNameProperty) autorelease];
    self.email = [self getFirstEmail:record];
    self.phone = [self getFirstPhone:record];
    [self setNeedsDisplay];
}
 
- (void)setDictionary:(NSDictionary *)dict
{
    self.firstName = [dict objectForKey:@"firstName"];
    self.lastName = [dict objectForKey:@"lastName"];
    self.email = [dict objectForKey:@"email"];
    self.phone = [dict objectForKey:@"phone"];
    [self setNeedsDisplay];
}

Some tutorials will have you put this next part into a separate UIView subclass, and add that class as the contentView of this UITableViewCell, but I prefer to override the drawRect of the UITableViewCell, and do all my drawing there.

The first thing I am doing is getting the current graphics context so that we can draw to the screen, clipping to the rect that is passed in drawRect:(CGRect)rect, and then depending on whether this cell is even, I am filling the entire rect with an almost black color, or slightly lighter.

- (void)drawRect:(CGRect)rect
{
    CGContextRef ctx = UIGraphicsGetCurrentContext();
 
    CGContextClipToRect(ctx, rect);
    //If even
    if (((self.tag % 2) == 0)) {
        CGContextSetFillColorWithColor(ctx, [UIColor colorWithWhite:0.1f alpha:1.f].CGColor);
    } else {
        CGContextSetFillColorWithColor(ctx, [UIColor colorWithWhite:0.15f alpha:1.f].CGColor);
    }
 
    CGContextFillRect(ctx, rect);

The next thing I am going to figure out is whether I want this text to be centered in the cell, and I am determining this based off whether there is an email field or not.

    //Vertically center our text, if no email
    BOOL isCentered = (self.email == nil);

And now for the meat of the drawRect method. We calculate the size of firstName, draw it offset from the left by 5, and then draw lastName right after it. We also change the color we are drawing between those two.

    CGRect tempRect;
    CGFloat midY = CGRectGetMidY(rect);
    [[UIColor whiteColor] set];
    UIFont *defaultFont = [UIFont systemFontOfSize:16];
    CGSize size = [self.firstName sizeWithFont:defaultFont];
    if (isCentered == NO) {
        tempRect = CGRectMake(5, 0, size.width, size.height);
    } else {
        tempRect = CGRectMake(5, midY - size.height/2, size.width, size.height);
    }
    [self.firstName drawInRect:tempRect withFont:defaultFont];
 
    [[UIColor lightGrayColor] set];
    size = [self.lastName sizeWithFont:defaultFont];
    if (isCentered == NO) {
        tempRect = CGRectMake(CGRectGetMaxX(tempRect)+5, 0, size.width, size.height);
    } else {
        tempRect = CGRectMake(CGRectGetMaxX(tempRect)+5, midY - size.height/2, size.width, size.height);
    }
    [self.lastName drawInRect:tempRect withFont:defaultFont];

Next we find out if phone actually exists, and if so set the color to red, and draw it to the right of lastName. We also have to make sure we aren’t drawing this outside our boundaries, so we check to see where the end is, and if it is outside, we crop it to 5 pixels from the end.

    if (self.phone != nil) {
        [[UIColor redColor] set];
        size = [self.phone sizeWithFont:defaultFont];
        CGFloat end = CGRectGetMaxX(tempRect) + size.width;
        if (end > rect.size.width) {
            size.width = CGRectGetMaxX(rect) - CGRectGetMaxX(tempRect) - 10; //-10 so that we get 5 from the end of last name, and 5 from the end of rect
        }
        if (isCentered == NO) {
            tempRect = CGRectMake(CGRectGetMaxX(rect) - size.width - 5, 0, size.width, size.height);
        } else {
            tempRect = CGRectMake(CGRectGetMaxX(rect) - size.width - 5, midY - size.height/2, size.width, size.height);
        }
        [self.phone drawInRect:tempRect withFont:defaultFont lineBreakMode:UILineBreakModeTailTruncation];
    }

And finally if our email actually exists draw it on the bottom left.

    if (self.email != nil) {
        [[UIColor blueColor] set];
        size = [self.email sizeWithFont:defaultFont];
        tempRect = CGRectMake(5, midY, size.width, size.height);
        [self.email drawInRect:tempRect withFont:defaultFont];
    }

I hope this helps you in configuring UITableViewCells for your own project, and hopefully will let you start to think about the possibilities.

To download the entire XCode project, you can find it at: http://github.com/elc/ICB_PrettyTableView

In today’s post, we are going to be discussing view controllers. Let’s start by talking about what a view controller is and it’s role in your iOS projects.

What is a View Controller?

View Controllers are at the core of every application. They act as sort of the glue between your models and your views. View controllers are both responsible for fetching/initializing your models as well as loading up your views to display the information within them.

Basic View Controllers

Every view controller that Apple provides extends from the base UIViewController subclass. This gives them a few basic properties that you will find handy. The most important of course is the view property. This is a reference to the view that the controller is managing.

Along with some default properties, you also get some powerful methods that allow each UIViewController subclass to easily interact with all of the common view controllers.

Here are some of the basic view controllers to be discussed in this post:

• UINavigationController
• UITableViewController
• UITabBarController

I picked these 3 controllers since they are the most common and are automatically created in the main project templates when creating a new XCode project.

UINavigationController

Basic Navigation Interface

Generally we don’t talk about UINavigationControllers outside of the context of a UITableViewController, however we need to discuss them prior in order to see what’s going on under the hood.

UINavigationController are used when you want to have some sort of hierarchal representation of your data (ie drill down). They work using a stack of UIViewController subclasses. Every time you “drill down”, you simply add another view controller to the stack. Then, the “back” logic is simply a matter of popping view controllers off of a stack.

At the bottom of the stack, there is the rootViewController which get set during initialization and can never be popped off. At the top of the stack, is the current view controller who’s view is being displayed to the user.

Here is a code sample demonstrating how to push a view controller on to the navigation stack.

// Initialize MyViewController object
MyViewController *controller = [[MyViewController alloc] initWithNibName:@"MyViewController" 
                                                                   bundle:[NSBundle mainBundle]];
// Pushes MyViewController object on the navigation stack
[self.navigationController pushViewController:controller animated:YES];
[controller release];

In this example, we instantiate a new UIViewController subclass called MyViewController and push it on to the view controller stack. One very important detail to point out is, you must do this from inside of a view controller that is contained inside of a navigation controller, otherwise the “self.navigationController” property will be nil. navigationController is a property of every UIViewController subclass that gets set whenever it has been inserted into a UINavigationController.

Another thing to note is, we release the controller after pushing it on to the stack (prior to iOS5 with ARC). This is because the navigation controller will retain your view controller therefore preventing it from being released from memory.

The following code will pop the view controller off of the view stack with an animation.

[self.navigationController popViewControllerAnimated:YES];

Now we are going to see how UINavigationControllers are used in conjunction with UITableViewControllers.

UITableViewController

UITableViewController

UITableViewControllers are quite possibly the most popular/common view controllers used in iOS. They are perfect for displaying large amounts of data or any sort of form entry.

By default, a UITableViewController has a UITableView as it’s main view and serves as both the delegate and data source for this view. What this means is, it is responsible for populating the table with data, configuring how the data is displayed, and determining what to do when the user interacts with the table (swipes, touches, etc…).

Let’s take a look at a simple UITableViewController. Here is an init method initializing the data array to be displayed in the table view as well as the primary 3 data source methods.

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        self.title = NSLocalizedString(@"Sites", @"Sites");
        // #1
        _dataArray = [[NSArray alloc] initWithObjects:@"Reddit",
                                                        @"XKCD",
                                                        @"The Oatmeal",
                                                        @"Hacker News",
                                                        @"iCodeBlog", nil];
    }
    return self;
}
 
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    // #2
    return 1;
}
 
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    // #3
    return [_dataArray count];
}
 
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *CellIdentifier = @"Cell";
 
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
        cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
    }
 
    // #4
    cell.textLabel.text = [_dataArray objectAtIndex:indexPath.row];
    return cell;
}

As mentioned before, we are displaying a simple array of NSString objects in the table view. This array gets initialized in #1 before the tableview is even displayed. The next method in #2 returns the number of sections for the table. In our case, we only need one section so we hard code the number 1 as the return value.

The code in #3 returns the number of cells in a given section. Generally, this will mean the number of objects in your array. So, we just return the count property of our dataArray.

Finally, the method in #4 builds the cell for a given row in a section, configures that cell, and returns it. In our case, the only configuration we need to do is set the text property of the cell’s UITextLabel to the string in our array at the corresponding index.

These 3 methods are the absolute minimum required to use a UITableViewController and display its table. There are quite a few more methods that you can implement related to the cell height, titles for sections, and more. The last thing I want to show you is how to support basic user interaction.

There is only one method you need to implement to support taps on the cells. Here is the sample code from above inside of didSelectRowAtIndexPath.

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    // Initialize MyViewController object
    MyViewController *controller = [[MyViewController alloc] initWithNibName:@"MyViewController" 
                                                                       bundle:[NSBundle mainBundle]];
    // Forward some data
    controller.site = [_dataArray objectAtIndex:indexPath.row];
    // Pushes MyViewController object on the navigation stack
    [self.navigationController pushViewController:controller animated:YES];
    [controller release];
}

Now when the user taps a row, it will loading up a MyViewController object, pass along the information about the cell tapped and push it on to the view stack. One thing to note here is, this code assumes that the UITableViewController class presented above is inside of a UINavigationController.

UITabBarController

UITabBarController

The last controller we are going to discuss in this post is the UITabBarController. As you may have seen in many applications, a tab bar separates out view logic into multiple “tabs” and switches between them when the user taps on each one. Each tab represents a different view controller that could be any of the types above. As a newer developer, TabBarControllers are a little tricky to implement manually, so I’d suggest starting your project using “Apple’s Tab Bar Application” template file. This will provide you with a simple tab bar application with two sample tabs.

We are going to walk through the code generated from the iOS 5 template that details how a tab bar is constructed.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease];
    // #1
    UIViewController *viewController1 = [[[FirstViewController alloc] initWithNibName:@"FirstViewController" bundle:nil] autorelease];
    UIViewController *viewController2 = [[[SecondViewController alloc] initWithNibName:@"SecondViewController" bundle:nil] autorelease];
    // #2
    self.tabBarController = [[[UITabBarController alloc] init] autorelease];
    // #3
    self.tabBarController.viewControllers = [NSArray arrayWithObjects:viewController1, viewController2, nil];
    // #4
    self.window.rootViewController = self.tabBarController;
    [self.window makeKeyAndVisible];
    return YES;
}

The code here is actually pretty straight forward. #1 initializes both of the view controllers we want to display in 2 separate tabs. Don’t worry about setting their title and tab bar icon now, I will get to that in a moment.

Now, in #2 we initialize the tab bar controller. Unlike the UITableViewController, we don’t need to make our own subclass. It is fine to just let the app delegate manage an instance of the tab bar controller.

The code in #3 is where we set the view controllers of the tab bar controller. It should be clear now how easy it is to add more “tabs” to you your application.

Finally, #4 adds the tab bar controller to the window displaying it to the user.

Let’s take a quick look at the code in the initWithNibName method of FirstViewController in order to see how the title and image are set for that controller.

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        self.title = NSLocalizedString(@"First", @"First");
        self.tabBarItem.image = [UIImage imageNamed:@"first"];
    }
    return self;
}

Pretty simple right? Every UIViewController subclass has a title and tabBarItem property. That way, it knows what to display if you place it inside of a UITabBarController.

Conclusion

This wraps up our very surface level introduction to UIViewControllers. I have zipped both of the sample projects used here and you can download them here.

If you have any questions or comments, please feel free to leave them here or write them to me on Twitter.

Happy iCoding!

This post is part of an iOS development series called Back To Basics. You can keep up with this series through the table of contents, RSS feed, or Twitter.

While I know many of iCodeBlog’s readers are veteran developers, this tutorial (and many in this series) are going to be geared towards the more novice developer. This group is often overlooked when it comes to tutorials, and my hope is to help lay a solid foundation for them (in addition to honing the skills of the veteran developers). So, let’s dig in.

Introduction

Generally, when you make a “Hello World” project, the goal is to get the text “Hello World” to display on the screen or the console. On the iPhone/iPad, there are quite a few ways to display text on the screen (labels, text areas, text views, core text, etc…). Today we are just going to focus on drawing the text using a UILabel.

There are two ways to get a UILabel to display on the screen. The first is to use Apple’s Interface Builder tool. Interface Builder is an extremely handy tool for creating iOS interfaces visually. It supports drag and drop and allows you to configure all of the properties of each of the elements. While it is a great tool, I want to show you a bit what’s happening under the hood in code. It is important not to lean on Interface Builder as a crutch when creating interfaces as there are times when you will have to add UI elements manually. That being said, I will have an intro to Interface Builder tutorial up later in this series.

Creating The Project

Before we begin make sure you have read and understand the following tutorial:

Back To Basics – Getting Set Up For iOS Development

This tutorial will ensure that you have the proper environment set up for iOS development.

When you first launch XCode, you are prompted with a screen similar to this one:

To create a new project, simply click on Create a new XCode project. This will bring up a wizard guiding you through the initial project set up.

Built into XCode are several different project templates to be used as a base for the most common projects that you might want to create. Each one comes with some specific “boiler plate” code to quickly get you up and running.

We are going to start by clicking on View-based Application. This will give us enough code to have a simple view on the screen. A UIView is the simplest of display objects. Every other UI element that you draw on the screen will inherit from UIView. In the case of a view-based application, we are given a full screen blank view to start with. We can then add display objects as subviews.

After selecting View-based Application, click next. This screen will show some simple project options such as name, company identifier, and Device family.

Here’s a bit about each:

• Name: This is simply the name of the application. Don’t worry you are not bound to this and you can easily change the display name.
• Company Identifier This is unique id used to identify your application. It will be prepended to your project name to form the unique id that the app store uses. Identifiers are usually of the form com.companyName.projectName.
• Device Family: This will be either iPhone or iPad. You can always upgrade to universal later (tutorial to come).

The Files

Once your project has been created, you will have 6 files of interest (for this tutorial’s sake):

HelloiPhoneAppDelegate.h/m

The app delegate is the point of entry for your application. It’s a singleton class (meaning there is only one), and it is responsible for displaying the main window/view of the application. You generally want to keep this class pretty lean and offload the work somewhere else. It’s often a n00b mistake to want to work on your UI/logic in the app delegate. For this project, we are not going to touch it at all. Just note that it is what’s launching your main view.

MainWindow.xib

Xib files are to be used with Interface Builders. They are basically xml files that Interface Builder uses to represent a user interface. In this case the MainWindow.xib (pronounced nib), is responsible for loading up our Window and Main ViewController (HelloiPhoneViewController). The View Controller could have been loaded programmatically in the App Delegate, however Apple has chosen to load in using a nib in Interface Builder for this template. I’m not going to go into detail about that in this tutorial, but you can see for yourself by opening up MainWindow.xib and look under objects.

HelloiPhoneViewController

iOS development tends to really enforce Model-View-Controller design patterns. This is basically the idea of separating the view code from the model code (using the controller code as the glue). Generally, in iOS when you have a view controller, it has a corresponding nib file(the view) to go along with it. HelloiPhoneViewcontroller.xib is where you would drag and drop UI elements to customize the view using the Interface Builder tool. As I mentioned in the beginning, we are going to ignore this file and add our text manually.

The Code

Well, this has been quite a bit of talk just to get us to the simple code below. Open up the file HelloiPhoneViewController.m and find the method called - (void) viewDidLoad . This method fires automatically when the view is first loaded. Make sure to uncomment it if it’s commented out. Inside of this method, add the following code:

1
2
3
4
5
6
7
8
9
10
11

- (void)viewDidLoad {
    [super viewDidLoad];
 
    CGRect frame = CGRectMake(10, 10, 300, 25);
    UILabel *helloLabel = [[UILabel alloc] initWithFrame:frame];
    helloLabel.text = @"Hello iPhone!";
    helloLabel.textColor = [UIColor blueColor];
    helloLabel.textAlignment = UITextAlignmentCenter;
    [self.view addSubview:helloLabel];
    [helloLabel release];
}

Let’s break down this code:

Line 4: This creates a frame. Think of a frame as a box. The first two parameters are the starting x and y locations of the box, and the second two are the width and height of the box. Every display object you will create has a frame. It tells the device how big and where to draw a view.

Line 5: On this line we create a new label object. The alloc says “give me the memory large enough for a UIlabel” and the init initializes all of the view properties. You will never really see these two methods called apart from each other. We call one of the copy constructors of UILabel called initWithFrame. This allows us to pass in the view’s frame on initialization.

Lines 6-8: In these 3 lines, we configure various properties of a UILabel. The first is the actual text to be displayed, the second is the color of the text, and the third tells the text to center inside of it’s frame. There are quite a few options you can set with regards to any UI element and they can be found in the documentation for that particular object.

Line 9: This is where we actually get the label to display. All views are subviews of some other view (even your main view is a subview of the window). We are basically attaching our label to the main view to be drawn. Without this line, your label would never be seen.

Line 10: I don’t want to go too much into this right now, but The iOS platform (as of iOS versions < 5) doesn’t have garbage collection. What this means is, we need to handle our memory management ourselves. That being said, as a general rule, whenever you do an “alloc init” on an object, you must have a corresponding release call to give that memory back to the system. Otherwise, you have a memory leak. More to come on this.

Running The Application

OK, now that we have the code in place it’s time to run it in the simulator. To do this, select iPhone X.X Simulator in the dropdown at the very top of XCode (currently mine says 4.3). Then click the Run button. Your code will be compiled and the simulator will start. You should now see your _beautiful Interface_.

Well, it’s not much to look at, but try reading the documentation and adding some other interface elements to the view. Or, read the documentation for UILabel and change some of the properties.

If you have any questions or comments, feel free to leave them in the comments section of this post or send them to me on Twitter.

You can download the source code for this tutorial here.

Happy iCoding!

This post is part of an iOS development series called Back To Basics. You can keep up with this series through the table of contents, RSS feed, or Twitter.

The Hardware

The first thing you are going to need is an Intel Based Apple Computer running OSX 10.6.6 or better. Hackintosh computers have been know to allow you to develop on them however, they are not recommended as they require quite a bit of configuration. So, your best best is to develop on the real thing.

Besides that, who wants to use a Windowz box anyway?

The Account

To become a bonafide iOS developer, you must sign up for Apple’s iOS Developer program. It’s free until you are ready to submit your applications to the App Store. So, if you are just tinkering with iOS development and want to give it a shot, there is no risk.

Once you sign up, you will have access to the latest SDK, developer articles, sample code, documentation, XCode, and more! What are you waiting for? Sign Up Now!

Once you are ready to deploy your first application, you will need to upgrade your account for the low low price of $99. Also, you must pay this fee when you are ready to test on your own device. The free account limits you to using only the simulator for testing.

One cool thing this gets you (besides the ability to submit applications to the App Store) is you get to download all of the early iOS releases. As I write this post, I’m running iOS 5 beta on my device which isn’t slated to come out for another couple months.

The Software

In order to develop for the iOS platform, you must have the iOS SDK installed. Apple has nicely bundled their SDK up along with some other great tools such as XCode in order to make it super easy for you to install and get coding.

With the download your get quite a bit (from Apple’s site)

“This is the complete Xcode developer toolset for Mac, iPhone, and iPad. It includes the Xcode IDE, iOS Simulator, and all required tools and frameworks for building Mac OS X and iOS apps.”

So even if you don’t have an iOS device (I didn’t when I first started developing AND BLOGGING on iCodeBlog), you can still develop and test your applications. One note on this however is, always test on a real device before submitting an application to the store. The simulator is a great tool to use while testing but is very misleading in terms of performance abd behavior.

Conclusion

Well, I hope that this post has found you well and you are now on your way to creating your first iPhone application. In the next tutorial in this series, I will be discussing the basics of XCode and setting up your iOS projects.

If you have any comments, questions, or things to add, feel free to post them in the comments section of this post.

Happy iCoding!

This post is part of an iOS development series called Back To Basics. You can keep up with this series through the table of contents, RSS feed, or Twitter.

As you know, a few things (to say the least) have changed since we first launched iCodeBlog in 2008 with the way we develop for the iOS platform. With that being said, many of my early tutorials are now quite dated with old screenshots, old (deprecated) code, and no knowledge of memory management whatsoever. I have also evolved both in development as well as writing. Since beginning, I have published many tutorials, written over 30 iOS applications, and even published a book.

A New iOS Development Series

All that being said, I am proud to announce my next tutorial series called Back To Basics. This will be an ongoing series where I will revisit some of the core iOS development concepts for n00bs and experienced developers alike. I will focus heavily on conventions, clean and clear coding, and really try to aid the reader in developing a solid foundation in iOS development.

Here is a rough roadmap of where we are going (obviously incomplete). This will serve as the table of contents as the articles are written.

• Getting Set Up For iOS Development
• Basics of Objective-C
• Hello iOS
• An Introduction To View Controllers
• Survey of Native Interface Components
  • Views
  • Table Views
  • Labels
  • Image Views
  • Pickers
  • Sliders
  • etc…
• Then we start the good stuff…). iOS Frameworks
• Image and Video
• Audio Recording and Playback
• Location
• Maps
• GameKit
• Game Center
• etc…

* Note that this list by no means is sorted or complete, it’s just to give you an idea of what I plan on working on going forward. At some point, I will have a formal method for submitting suggestions for tutorials to be considered.

But iCodeBlog Seems To Lack In The Post Frequency Department Lately

This is true, and I’m very sorry about that. Over the years iCodeBlog has gone through many transitions from being acquired by ELC Technologies to partnering with Velum Media. This has caused a lot of confusion and lack of motivation to create new content. We now have quite a few dedicated authors with some real incentives to write new content.

So make sure you subscribe to the RSS feed and stay tuned, because iCodeBlog is about to enter its best season yet.

Happy iCoding!

This post is part of an iOS development series called Back To Basics. You can keep up with this series through the table of contents, RSS feed, or Twitter.

GIT Hub

You can find a demo project with this code hosted on GitHub. Follow us if you find it useful, we try to open source as much as we can.

Screencast

Here is a fast video demo of a simple form that can be made using these cells.

ELCTextFieldCell Demo from Collin Ruffenach on Vimeo.

How to use

This class is best used by defining to arrays in the header of the table view controller that is going to use it. I like to call mine labels and placeholders. In these arrays store the values that are going to be the left labels for your forms cells and the placeholders for the cells. I create these in the viewDidLoad method most commonly. The reason I like to do this is because it allows for less code to be written through many other method in the table view controller. From here we need to define 6 more methods, most of which are pre defined by Apple in your table view controller class.

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return [labels count];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
 
    static NSString *CellIdentifier = @"Cell";
 
    ELCTextfieldCell *cell = (ELCTextfieldCell*)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[ELCTextfieldCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
    }
 
	[self configureCell:cell atIndexPath:indexPath];
 
    return cell;
}

Here I like to have a configureCell:AtIndexPath method to keep my delegate UITableViewCellDelegate methods a bit cleaner. In this case my 4th cell (row 3) is for a phone number, you can obviously change this depending on your needs.

- (void)configureCell:(ELCTextfieldCell *)cell atIndexPath:(NSIndexPath *)indexPath {
 
	cell.leftLabel.text = [self.labels objectAtIndex:indexPath.row];
	cell.rightTextField.placeholder = [self.placeholders objectAtIndex:indexPath.row];
	cell.indexPath = indexPath;
	cell.delegate = self;
 
	if(indexPath.row == 3) {
 
		[cell.rightTextField setKeyboardType:UIKeyboardTypeNumberPad];
	}
}

All that is left to do is implement the ELCTextFieldDelegate methods. The first we will implement is the method that will be called whenever text is changed within the text field of the cell. In this case I just print out all the data going through this method but in most cases you will be applying these changes to your model.

- (void)updateTextLabelAtIndexPath:(NSIndexPath*)indexPath string:(NSString*)string {
 
	NSLog(@"See input: %@ from section: %d row: %d, should update models appropriately", string, indexPath.section, indexPath.row);
}

The final method that you implement will be the method called when return is hit by the user when typing in the rightTextField of the cell. Here you will first check if it is anything but the bottom most cell. If it is, you will increment the IndexPath row and then request that the rightTextField of this next cell becomes the new first responder, which will make the field active. Then you tell the tableview to make sure that this new index path cell is visible. With long forms the tableview will scroll with the users navigation through each field which is very nice. If it is indeed returning from the last cell all we do is tell the textFieldCell to resign first responder so the keyboard disappears.

-(void)textFieldDidReturnWithIndexPath:(NSIndexPath*)indexPath {
 
	if(indexPath.row < [labels count]-1) {
		NSIndexPath *path = [NSIndexPath indexPathForRow:indexPath.row+1 inSection:indexPath.section];
		[[(ELCTextfieldCell*)[self.tableView cellForRowAtIndexPath:path] rightTextField] becomeFirstResponder];
		[self.tableView scrollToRowAtIndexPath:path atScrollPosition:UITableViewScrollPositionTop animated:YES];
	}
 
	else {
 
		[[(ELCTextfieldCell*)[self.tableView cellForRowAtIndexPath:indexPath] rightTextField] resignFirstResponder];
	}
}

That’s all and you’re done! This should be a super fast way to make forms in your apps. Let me know any questions and happy iCoding.

Follow me on twitter @cruffenach

Now, that the iPad has been released, I’m sure you are all scrambling for ideas on how to snag a piece of the maket in the imminent gold rush. iCodeBlog is going to help you on your journey with a series of iPad tutorials to come.

Since the iPad uses the same SDK as the iPhone, all of the code under the hood is almost identical. Actually, when looking at the new and changed API classes, you will realize that most of them are user interface related. This is good news for us since we have already been coding iPhone.

While this tutorial is called “Hello World”, it is really much more than that. I assume you already have working knowledge of iPhone/Objective-C programming.

What We Will Be Creating

In today’s tutorial, I will be showing you how to create an iPad project that uses the UISplitViewController to display content in 2 separate panes. We will also be touching on some of the new design/UI patterns and giving an overall introduction to iPad programming.

The project will be based on one of my earliest tutorials that displayed a list of fruit in a UITableView and drilled down when they were selected. We will be expanding on that example and creating something that will look like this.

It uses a UISplitViewController to display a UITableView on the left and a UIView with a UIImageView subview on the right. This project is actually quite simple to create as the template code provides much of the code we need to get started.

Getting Started

1. Make sure you have downloaded the 3.2 SDK form http://developer.apple.com/iphone/. The iPad simulator will come with this download.

2. Download the resources needed for this project and unzip them iPadHelloWorldResources.zip . (contains image files and a plist we will be using to load the images)

Creating The Project

Starting a project for the iPad is no different than starting one for the iPhone. When you open XCode and select File->New Project, you should notice the addition of a Split View-Based Application. Select this and name it iPadHelloWorld.

This will create a basic application with a UITableView on the left and a UIView on the right. It will even populate the table with some sample elements. It will add the following files to your project.

Here is a brief description of each of these files:

• iPadHelloWorldAppDelegate – This is similar to every app delegate. If you look in the application:didFinishLaunchingWithOptions method, you will see that the UISplitViewController is being allocated with the MasterViewController and DetailViewControllers.
• MasterViewController – A UITableViewController, nothing fancy. It will be handling the view on the left hand side.
• DetailViewController – This handles the content view that you see on the right hand side. We will be updating this as the user selects different rows in the table to the left. This simply houses a single view.

Go ahead and press Build and Run to check out the application. If you haven’t already done so, play around with the iPad contacts and settings apps as well.

Note: When you launch the application, you will only see the main view since the simulator runs in vertical mode. To see the views side-by-side, rotate the simulator by clicking “Hardware -> Rotate Left/Right”. You can also press CMD->Arrow Left/Right on the keyboard.

Importing The Project Images

Once you have had some time to play with the new iPad project, you will now need to import the images needed for this project. After downloading and unzipping the files in from this tutorial, drag them into the project folder called “Resources-iPad”.

XCode will prompt you to copy the files, check yes and click OK.

Make sure you include all 4 images files as well as the file named fruits.plist.

Displaying The List Of Fruits

Displaying our fruits list is no different than displaying data in any other UITableView. Let’s begin by opening MasterViewController.h and adding a declaration for our fruits array.

#import
 
@class DetailViewController;
 
@interface MasterViewController : UITableViewController {
    DetailViewController *detailViewController;
    NSArray * fruits;
}
 
@property (nonatomic, retain) IBOutlet DetailViewController *detailViewController;
@property (nonatomic, retain) NSMutableArray *fruits;
 
@end

As you can see, there is nothing new here. We simply declare our fruits array and create a property for it.

We will be loading the fruits from the plist file that you imported into your project in the last step. Loading content from a plist file is a very quick and easy solution when you don’t require a database.

Open up MasterViewController.m and add the following line of code to your viewDidLoad method.

- (void)viewDidLoad {
    [super viewDidLoad];
    self.fruits = [[NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"fruits" ofType:@"plist"]] retain];
}

The file fruits.plist is essentially an array that has been written out to a file. If you open it up, it looks very similar to XML. Now that our fruits array has been populated, let’s implement each of the UITableView delegate and datasource methods to populate the table.

UITableView datasource methods

- (NSInteger)tableView:(UITableView *)aTableView numberOfRowsInSection:(NSInteger)section {
    // Return the number of rows in the section.
    return [fruits count];
}
 
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
 
    static NSString *CellIdentifier = @"CellIdentifier";
 
	// Dequeue or create a cell of the appropriate type.
	UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
        cell.accessoryType = UITableViewCellAccessoryNone;
    }
 
    // Get the object to display and set the value in the cell.
    cell.textLabel.text = [self.fruits objectAtIndex:indexPath.row];
    return cell;
}

Nothing special… We first tell the tableview that we want fruits.count (4 in this case) number of rows.

Next, we display the name of the fruit in each tableview cell. If you want to learn more on UITableViews, read this tutorial.

UITableView delegate methods

- (void)tableView:(UITableView *)aTableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
 
    /*
     When a row is selected, set the detail view controller's detail item to the item associated with the selected row.
     */
    detailViewController.detailItem = [self.fruits objectAtIndex: indexPath.row];
}

Here, we are simply setting the detailItem property of the detailViewController to the selected fruit. We will discuss this property later in this section, but for now all you need to know is that its type is id.

At this point, go ahead and press Build and Run to see your code in action. You should see something that looks like this:

It displays the list of fruits, but nothing happens when you select a cell (well the title of the detailView may change).

Now that we have our list of fruits displayed, we now need to implement the code to display their corresponding image.

Displaying The Fruits

Displaying the selected fruit is actually quite simple. The first thing we need to do is add a UIImageView to our detailView.

Start by adding the IBOutlet for the image view. Open up DetailViewController.h and add the following code:

@interface DetailViewController : UIViewController  {
 
    UIPopoverController *popoverController;
    UINavigationBar *navigationBar;
 
    id detailItem;
 
    IBOutlet UIImageView * fruitImageView;
}
 
@property (nonatomic, retain) UIPopoverController *popoverController;
@property (nonatomic, retain) IBOutlet UINavigationBar *navigationBar;
 
@property (nonatomic, retain) id detailItem;
 
@property (nonatomic, retain) IBOutlet UIImageView * fruitImageView;
 
@end

All of the code here comes with the template except the code to add the IBOutlet UIImageView. Once you have added this open up DetailView.xib in interface builder.

Add a UIImageView on to the view and size it to 500×500.

Now, click on the File’s Owner object and open the connection inspector (Tools -> connection inspector).

Drag from your imageView IBOutlet to the UIImageView and release. The UIImageView is now connected to your outlet.

Note: If you want the images to not skew, set the content mode of the image view (in the attributes inspector) to Aspect Fit.

Now that the imageview has been connected, it’s time to write the code that updates it. Close Interface Builder and open the file DetailViewController.m and add the following lines to the setDetailItem method:

- (void)setDetailItem:(id)newDetailItem {
    if (detailItem != newDetailItem) {
        [detailItem release];
        detailItem = [newDetailItem retain];
 
        // Update the view.
        navigationBar.topItem.title = detailItem;
	NSString * imageName = [NSString stringWithFormat:@"%@.png",detailItem];
	[self.fruitImageView setImage:[UIImage imageNamed:imageName]];
    }
 
    if (popoverController != nil) {
        [popoverController dismissPopoverAnimated:YES];
    }
}

Most of this code has been added by the template and I won’t discuss it too much in this tutorial. But for now, the important additions are the lines that load the image based on the name of the fruit and the one below it that sets the image property of the image view.

There you have it! Build and go and the application should function as mentioned. Here is another screenshot of the final product.

Another Cool Feature Of SplitViewController

When in vertical mode, the SplitViewController gives you another new UI element called the UIPopOverView. Collin will have a tutorial up soon on this view, but the figure below shows you what I’m talking about.

When the device is vertical, it will automatically rotate your view and provide a UIPopoverView when the “Master List” button is pretty. (BTW this button is also customizable).

You may download the source for this tutorial here iPadHelloWorld.zip.

If you have questions, post them here or ask me on Twitter.

Happy iCoding!

A few days ago I came across this cool Pick Your Own Adventure game on Twitter from user Peretti. I decided to make a quick renewable application that used UIAlertViews and UIActionSheets to tell the story. We are going to implement the UIAlertView and UIActionSheet protocol methods in order to get the functionality we are looking for. This will be a short project but will show the important methods associated with these views.

Step 1

Start a new view based project called CYOA. If you want to add a background image you can add a UIImageView to your CYOAViewController.xib. You can get the one I used here. But that is not necessary.

Step 2

In your project we are going to create a new object to hold the pieces that compose and given “frame” of a pick your own adventure. A frame of a pick your own adventure game is composed of 6 things as far as I am concerned.

1. Prompt/Title
2. Choice 1 Text
3. Choice 2 Text
4. Choice 1 Tile
5. Choice 2 Tile
6. isEnd

Through the use of these 6 objects we will be able to create a network of what I have called “AdventurePieces”. Create a new file. Make a subclass of NSObject and call it AdventurePiece.

Open AdventurePiece.h and input the following.

#import
 
@interface AdventurePiece : NSObject {
	NSString *message;
	NSString *choice1;
	NSString *choice2;
 
	AdventurePiece *choice1Piece;
	AdventurePiece *choice2Piece;
 
	BOOL isEnd;
}
 
@property (nonatomic, retain) NSString *message;
@property (nonatomic, retain) NSString *choice1;
@property (nonatomic, retain) NSString *choice2;
 
@property (nonatomic, retain) AdventurePiece *choice1Piece;
@property (nonatomic, retain) AdventurePiece *choice2Piece;
 
@property (assign) BOOL isEnd;
 
-initWithMessage:(NSString*)_message
	 firstChoice:(NSString*)_choice1
	secondChoice:(NSString*)_choice2
	  firstPiece:(AdventurePiece*)_choice1Piece
	 secondPiece:(AdventurePiece*)_choice2Piece
		   isEnd:(BOOL)_isEnd;
 
@end

Step 3

We are now going to implement the initialization method that we defined in our header. Open up AdventurePiece.m and input the following.

#import "AdventurePiece.h"
 
@implementation AdventurePiece
 
@synthesize message;
@synthesize choice1;
@synthesize choice2;
 
@synthesize choice1Piece;
@synthesize choice2Piece;
 
@synthesize isEnd;
 
-initWithMessage:(NSString*)_message
	 firstChoice:(NSString*)_choice1
	secondChoice:(NSString*)_choice2
	  firstPiece:(AdventurePiece*)_choice1Piece
	 secondPiece:(AdventurePiece*)_choice2Piece
		   isEnd:(BOOL)_isEnd
{
	if(self = [super init])
	{
		message = _message;
		choice1 = _choice1;
		choice2 = _choice2;
		choice1Piece = _choice1Piece;
		choice2Piece = _choice2Piece;
		isEnd = _isEnd;
	}
 
	return self;
}
@end

All we need to do in this initialization method is fill in our object parameters appropriately.

Step 4

Now that we have made the object that will facilitate our story we need to go about making the logic to automate bringing up the adventure pieces in the right order. First we are going to define one object in our view controller header. Go to CYOAViewController.h and input the following.

#import
#import "AdventurePiece.h"
 
@interface MakeMyOwnAdventureViewController : UIViewController <UIActionSheetDelegate, UIAlertViewDelegate>  {
 
	AdventurePiece *currentPiece;
}
 
@end

Step 5

With that done we need to do the following final steps.

1. When the app launches a method should be called that creates a bunch of connected adventure pieces and sets the currentPiece instance variable to the one we desire to start on.
2. Tell the app to show the currentPiece adventure tile.
3. Respond to users pushing buttons on the adventure tile by resetting the current piece instance variable.

Pull up a different view when the end of the chain is reached.

For our purposes we will be have UIAlertViews show the parts of the story before the end. And the final piece of our story will be shown in a UIActionSheet. Lets look at each of the code pieces required to finish off our last four steps.

1. When the app launches a method should be called that creates a bunch of connected adventure pieces and sets the currentPiece instance variable to the one we desire to start on.

-(void)makeTheStory {
 
	AdventurePiece *successPiece = [[AdventurePiece alloc] initWithMessage:@"Sparks fly from the red wire but no explosion! Kim Jong Il's evil plot is foiled!" firstChoice:@"YAY" secondChoice:nil firstPiece:nil secondPiece:nil isEnd:YES];
	AdventurePiece *failPiece = [[AdventurePiece alloc] initWithMessage:@"Cutting the blue wire begins a chain reaction - omg that is bad. Like really bad..Kaboom! What went wrong!?!" firstChoice:@"Too Bad" secondChoice:nil firstPiece:nil secondPiece:nil isEnd:YES];
	AdventurePiece *failPiece1 = [[AdventurePiece alloc] initWithMessage:@"Bad Choice. You Die" firstChoice:@"Too Bad" secondChoice:nil firstPiece:nil secondPiece:nil isEnd:YES];
	AdventurePiece *middlePieceA = [[AdventurePiece alloc] initWithMessage:@"You parachute to North Korea, sneak past guards to a live nuclear bomb. Do you" firstChoice:@"Cut Red" secondChoice:@"Cut Blue" firstPiece:successPiece secondPiece:failPiece isEnd:NO];
	AdventurePiece *middlePieceB = [[AdventurePiece alloc] initWithMessage:@"As you are leaving you notice trained assassins behind you" firstChoice:@"Run" secondChoice:@"Fight" firstPiece:failPiece1 secondPiece:failPiece1	isEnd:NO];
	currentPiece = [[AdventurePiece alloc] initWithMessage:@"You are assigned to a dangerous mission." firstChoice:@"Accept" secondChoice:@"Vacation" firstPiece:middlePieceA secondPiece:middlePieceB isEnd:NO];
}

In this method we make 5 total adventure pieces. This specific pick your own adventure is quite short. It as 3 prompts, 2 choices each with a total of 4 end points. You can see what I mean in this diagram here. The white square are the prompts, the green squares are the choices and the red squares are the final results. We fill in the current piece instance variable as the top most piece and we are done here.

2. Tell the app to show the currentPiece adventure tile.

- (void)viewDidLoad {
 
    [super viewDidLoad];
	[self makeTheStory];
	[self showStoryForCurrentPiece];
}

-(void)showStoryForCurrentPiece {
 
	if([currentPiece isEnd]) {
		UIActionSheet *actionSheet = [[UIActionSheet alloc] initWithTitle:[currentPiece message] delegate:self cancelButtonTitle:nil destructiveButtonTitle:nil otherButtonTitles:[currentPiece choice1],@"Retry",nil];
		[actionSheet showInView:self.view];
	}
 
	else {
 
		UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Your Message" message:[currentPiece message] delegate:self cancelButtonTitle:nil otherButtonTitles:[currentPiece choice1],[currentPiece choice2],nil];
		[alert show];
	}
}

This method should be called every time a new current piece is set. If checks to see if the adventure piece is an ending piece, if it is then an action sheet it created. If it is not an alert view is created. The button titles, and prompts are filled in appropriately.

Respond to users pushing buttons on the adventure tile by resetting the current piece instance variable.

- (void)alertView:(UIAlertView *)alertView willDismissWithButtonIndex:(NSInteger)buttonIndex {
 
	if(buttonIndex == 0)
	{
		currentPiece = [currentPiece choice1Piece];
		[self showStoryForCurrentPiece];
	}
 
	else
	{
		currentPiece = [currentPiece choice2Piece];
		[self showStoryForCurrentPiece];
	}
}

When an alert view button is pressed this method will be called. An adventure piece that brings up an alert view should always have connected adventure pieces for both of the possible answers it as. This resets the currentPiece adventure piece and show the current piece again.

Pull up a different view when the end of the chain is reached

- (void)actionSheet:(UIActionSheet *)actionSheet clickedButtonAtIndex:(NSInteger)buttonIndex {
 
	if(buttonIndex == 1)
	{
		[self makeTheStory];
		[self showStoryForCurrentPiece];
	}
}

If this method is called that means that a action piece that was at the end of a chain was brought up. If the users hits the second button (button id == 1) that means they want to reset the story. This can be performed by building our story again showing the current piece again.

You can change the makeTheStory method to be whatever type of story you want. You can download the project here.