Custom Cells in a Table View

An example of a basic table view, albeit one that still has some custom cell settings, is on the About screen in General Settings. You can see it in the iPhone simulator. See Figure 9-1.

This instance uses two sections: the name of the device and a list of its attributes. Each cell has been overridden from a simple text label to have two text labels, one on the left with the description and one on the right with the data.

Navigation in a Table View

This is another example of a table view, this time having multiple sections and being tied to a navigation controller so that it may be used to navigate to other views. See Figure 9-2.

As you can see, this table has multiple sections, with some having only a single cell (the Reset section). Additionally, when cells are configured for navigation, iOS provides an arrow on their right-hand side to inform the user that selecting them will perform an action.

Controls Within Table View Cells

Another great example of how customizable the table view is comes in the Location settings screen. Here you can see that the background has been customized with help hints, and the cells, as well as having graphics in them, also have controls, such as the switches seen in Figure 9-4.

The Maps cell shown in Figure 9-4 is particularly interesting—you can see that it has a graphical subview like with the Settings app in the previous section, as well as a switch.

These are just a few examples of the versatility of the table view. For the rest of this chapter you’re going to go hands-on in constructing your own table views.

Designing the Interface

To get started, create a new single view app and call it “tableViewMultiSegmentDemo.” Drag and drop a table view component to the design surface. Size it so you have a little space at the top and room for a label underneath. Drag and drop a “Label” control to that space and make it wide enough to hold some text. When done, your design surface should look something like Figure 9-16.

With the table view selected, take a look at the attributes inspector and make sure that the style property is set to “Grouped,” and the separator property is set to “Single Line.” See Figure 9-17.

Editing the Headers

As in the previous example, create an outlet for the table view and call it “teamsTable.” Also create an outlet for the label and call it “lblOutput.” Finally, make sure that you specify that this view controller will implement the UITableViewDataSource and UITableViewDelegate.

Your ViewController.h should look like this when you’re done:

#import <UIKit/UIKit.h>
 
@interface ViewController : UIViewController<UITableViewDataSource, UITableViewDelegate>
@property (strong, nonatomic) IBOutlet UITableView *teamsTable;
@property (strong, nonatomic) IBOutlet UILabel *lblOutput;
 
@end

Creating the Data

Earlier you had an NSArray with the data for the single-sectioned table. It makes sense that if you are having more than one section, you can have more than one array in which to store the data. So, in this case we’ll create a table with two sections, one for countries and one for sports.

Thus, we’ll need two NSArray objects, one for each. Declare them below @implementation as before.

@implementation ViewController
NSArray *countriesArray;
NSArray *sportsArray;

Next, in your viewDidLoad function, initialize these and add data to them.

countriesArray = [[NSArray alloc] initWithObjects:
    @"USA",
    @"Canada",
    @"Mexico",
    nil];
 
sportsArray = [[NSArray alloc] initWithObjects:
    @"Baseball",
    @"Football",
    @"Hockey",
    @"Soccer",
    @"Basketball",
    nil];

Setting the Delegate and Data Source

While you’re editing viewDidLoad, you should put the code in to have the view controller be the delegate and dataSource for teamsTable.

_teamsTable.delegate = self;
_teamsTable.dataSource = self;

Setting the Number of Sections

Next up, you need to specify the number of sections in the table view. Naturally, there’s a function for that, and it’s called (unsurprisingly) numberOfSectionsInTableView . Implement that function and have it return 2, because we want two sections.

Here’s the code:

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

As before, if you don’t want to type out the whole thing, you can start typing –(NSInteger) n, and Xcode will give you hints to help.

Setting the Number of Rows per Section

In the earlier example, there was only one section in the table, so you could just return the amount of data as the number of rows. However, now we have two sections, so we want one section to have the number of elements in our array of countries, and the other to have the number of elements in our array of sports.

You use the numberOfRowsInSection function as before, but this time you can inspect the section parameter that is passed in. This is zero based, so the first section is number 0, the second is number 1, etc.

Here’s the code:

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    if(section==0)
    {
        return [countriesArray count];
         
    }
    else
    {
        return [sportsArray count];
    }
}

As you can see, it’s very straightforward. You just check which section is passed in and return the appropriate array size.

Creating the Table Cells

Similarly, when you create a cell in the cellForRowAtIndexPath, you do pretty much the same work as you did for a single-section table. The only big difference is that you have to check which section is selected so you can pick the appropriate text. The parameter that is passed in to the function, indexPath, has a property called “section” that you can check. Thus, based on the value of this property, you can set the text of the cell using the indexPath.row property.

Here’s the code, with the differences between this and the single-section table highlighted:

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *simpleTableIdentifier = @"MyCell";
    UITableViewCell *thisCell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];
    if(thisCell==nil)
    {
        thisCell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier];
         
    }
    if(indexPath.section==0)
    {
        thisCell.textLabel.text  = [countriesArray objectAtIndex:indexPath.row];
         
    }
    else
    {
        thisCell.textLabel.text  = [sportsArray objectAtIndex:indexPath.row];
         
    }
    return thisCell;
     
}

You’ve now done everything to create the multi-selection table. There’s one more task—catching the user’s selection.

Getting the User’s Selection

As with the previous functions, the indexPath parameter is available to didSelectRowAtIndexPath, and this has a section property. So, in order to know which text was most recently selected, we can take a look at the section property, and then, based on that selection, we know which NSArray to use. And, as before, we can take the correct text using the indexPath.row property, and apply it to the correct array.

Here’s the code:

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    if(indexPath.section==0)
    {
        _lblOutlet.text = [countriesArray objectAtIndex:indexPath.row];
         
    }
    else
    {
        _lblOutlet.text = [sportsArray objectAtIndex:indexPath.row];
    }
}

Running the App

For your convenience, here’s the complete ViewController.m code:

#import "ViewController.h"
 
@interface ViewController ()
 
@end
 
@implementation ViewController
NSArray *countriesArray;
NSArray *sportsArray;
 
- (void)viewDidLoad
{
    [super viewDidLoad];
        // Do any additional setup after loading the view, typically from a nib.
    _teamsTable.delegate = self;
    _teamsTable.dataSource = self;
     
    countriesArray = [[NSArray alloc] initWithObjects:@"USA", @"Canada", @"Mexico", nil];
    sportsArray = [[NSArray alloc] initWithObjects:@"Baseball", @"Football", @"Hockey", @"Soccer", @"Basketball", nil];
}
 
- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}
 
-(NSInteger) numberOfSectionsInTableView:(UITableView *)tableView
{
    return 2;
}
 
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    if(section==0)
    {
        return [countriesArray count];
         
    }
    else
    {
        return [sportsArray count];
    }
}
 
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *simpleTableIdentifier = @"MyCell";
    UITableViewCell *thisCell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];
    if(thisCell==nil)
    {
        thisCell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier];
         
    }
    if(indexPath.section==0)
    {
        thisCell.textLabel.text  = [countriesArray objectAtIndex:indexPath.row];
         
    }
    else
    {
        thisCell.textLabel.text  = [sportsArray objectAtIndex:indexPath.row];
         
    }
    return thisCell;
     
}
 
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    if(indexPath.section==0)
    {
        _lblOutlet.text = [countriesArray objectAtIndex:indexPath.row];
         
    }
    else
    {
        _lblOutlet.text = [sportsArray objectAtIndex:indexPath.row];
    }
}
 
@end

That’s everything you need, so run the app and take a look. You can see it running in Figure 9-18.

Creating the App

As you work through this section, you’ll create a table navigation app that looks like the one in Figure 9-19. This app presents a table view with three options, and when you select an option, it will navigate to a different view, passing some data as it goes.

As you create this app, we’ll touch upon some more details of how storyboards work, as well as of how to use navigational controllers and segues. If these are all new concepts to you, don’t worry—the best way to learn is by doing!

First, create a new single view application and call it “tableViewNavDemo.”

Before going any further, you’re going to add a navigation controller to your app. To do this, open Main.Storyboard, select the view controller, and then go to the “Editor” menu at the top of your screen. Select “Embed In” and then select “Navigation Controller.”

You’ll see that a new navigation controller gets added to your design surface. It might be partially obscuring your original view controller. If so, drag things around until you can see them all. Your screen should look like Figure 9-20.

Next, you can add a table view to the view controller screen on the right. Do not add it to the navigation controller. Place it so that it is below the grey bar at the top of the view controller. Size it so that it’s about half the height of your view. See Figure 9-21 for an example.

With the table view selected, on the attributes inspector, make sure that the “Content” field is set to “Dynamic Prototypes” and change the “Prototype Cells” setting to “1.” See Figure 9-22.

You’ll notice that once you’ve done this, the design surface changes, giving a space near the top. This is a “Table View Cell” control that you can select and configure. See Figure 9-23.

Select it, and you’ll see that it has a set of properties that you can configure in the attributes inspector. A prototype cell is simply a template for how you want the table cells to appear. Having the cell contain an arrow that hints at navigation is configured using the “Accessory” property. You can see this in the attributes inspector if the cell is selected. See Figure 9-24, where we’ve changed the “Accessory” property to “Disclosure Indicator.” You’ll notice that the little arrow appears on the prototype. Also set the “Identifier” text to “navCell.”

Next, create an outlet for the table view and call it “placesTable.” Make sure that it’s the table that you CTRL-drag onto the assistant, and not the cell. If you do it right you should see the UITableView in the “Type” field for the dialog. See Figure 9-25.

While you have the ViewController.h file open, add the interfaces to make the view controller the data source and the delegate for a UITableView.

Here’s the finished code for ViewController.h:

#import <UIKit/UIKit.h>
 
@interface ViewController : UIViewController<UITableViewDataSource, UITableViewDelegate>
 
@property (strong, nonatomic) IBOutlet UITableView *placesTable;
 
@end

In ViewController.m , you’ll need to set up the data for the table, as well as set up the cells of the table and their contents. If you need help with this, go back to the earlier examples in this chapter. Instead of going through all of them step by step here, we’re just going to give the code for ViewController.m. Again, if this isn’t familiar, go back and work through the earlier examples.

Here’s the code:

#import "ViewController.h"
 
@interface ViewController ()
 
@end
 
@implementation ViewController
NSArray *navItems;
- (void)viewDidLoad
{
    [super viewDidLoad];
        // Do any additional setup after loading the view, typically from a nib.
    _placesTable.dataSource = self;
    _placesTable.delegate = self;
    navItems = [[NSArray alloc]initWithObjects:@"Continents",
        @"Countries", @"Cities", nil];
}
 
- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}
 
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return [navItems count];
}
 
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *simpleTableIdentifier = @"navCell";
     
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];
     
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier];
    }
     
    cell.textLabel.text = [navItems objectAtIndex:indexPath.row];
    return cell;
}
 
@end

Do take note that the simpleTableIdentifier text should match what you configured in the prototype cell back in Figure 9-24, which was, in this case, “navCell.”

Now, if you run the app, you should see your table view with three cells, but you can’t do much. Earlier you added the navigation controller. In the next section you’ll see how it works.

Using a Navigation Controller

A navigation controller, as its name suggests, manages navigation between different views. Think of it like a traffic cop who controls everything when a traffic light is out. The navigation controller is in charge of keeping tabs on who is where, and, when you move forwards or backwards in navigation, that the right views get displayed.

Go to your storyboard, and, on the “Controls” list, find the view controller. It should look something like Figure 9-26.

Drag this and drop it to the right of the existing view controller. Then, pick the prototype cell that you created earlier and CTRL-drag it to the new view controller that you just dropped.

A menu with a number of options will pop up. See Figure 9-27.

Under “Selection Segue,” select “push.” When you’re done, you should see a connector between the views, and your Main.storyboard should look something like Figure 9-28.

Select the main view controller (the one in the middle in Figure 9-28) and select the grey bar at the top. Open the attributes inspector, and you’ll be able to create a title for the navigation item. Set the “Title” field to “Places I’ve Been.” See Figure 9-29.

Select the view controller on the right and do the same, then set the title to “Details.” When you’re done, the designer should look something like Figure 9-30.

Now, if you run your app and select one of the items in the menu, you’ll see that the screen will navigate to the details screen, and a button labeled “<Back” will appear at the top of the screen, allowing you to return to the menu. See Figure 9-31.

Congratulations if you’ve made it this far! This was your first foray into using navigation across multiple views. In the next section, you’re going to take it a little deeper, and we will show how you can pass data to a view. In this case, all three menu items point to the same view, so we need to distinguish each view somehow. If you are sharing a view across different navigational items, which is perfectly fine, you’ll just need to tell the view which item called it, so it can respond in kind. You’ll see that in the next section.

Passing Data to a View

In every example you’ve worked through so far, you had a single view and a class called ViewController that had the code and the data for that view. For the navigation app, you added a second view, but that view doesn’t have a class behind it.

So, let’s go and create that class now. From the File menu at the top of the screen, select “New” and then select “File.” You’ll see a dialog that asks you to select a template for your new file. See Figure 9-32.

Select “Objective-C “class as in Figure 9-32, and select “Next.” On the next screen, give your class the name “TravelDetailsViewController” and make sure that it is a subclass of UIViewController, as shown in Figure 9-33. Make sure also that “With XIB for user interface” is unchecked, if you can see it.

Click “Next” and then click “Create” to create the class. Now return to Main.storyboard and select the details view controller. It should be the one on the right. On the inspector window, select the third icon from the left to open the identity inspector. There, change the “Class” setting to read “TravelDetailsViewController.” If you can’t see “TravelDetailsViewController” on the list, make sure that the view controller, and not the view, is selected on storyboard view. You should see a bold blue outline around it, like in Figure 9-34.

Now, add a label to the details view and make it large enough to hold some text. Make it the width of the screen (less some sensible margins as guided by the storyboard editor) and tall enough to hold three to four lines of text. Create an outlet for the label and call it “lblOutput.” When you create the outlet, make sure that you are dragging to TravelDetailsViewController.h and not ViewController.h

Next, manually add a property by typing the code below into TravelDetailsViewController.h immediately beneath where the outlet was created. Ensure that it is above the line that reads @end.

@property (nonatomic, strong) NSString *navItemName;

This property will be a piece of data that other classes can read and write to. It’ll be used when we navigate to the details view, and the navigation item from the menu screen will set it. You’ll see that shortly.

Here’s the entire TravelDetailsViewController.h, for your convenience:

#import <UIKit/UIKit.h>
 
@interface TravelDetailsViewController : UIViewController
@property (strong, nonatomic) IBOutlet UILabel *lblDetails;
@property (nonatomic, strong) NSString *navItemName;
@end

In TravelDetailsViewController.m , you’ll need to do something called “synthesizing” the navItemName property that you just created. This makes the property available for getting and setting its value from outside this class.

Just below @implementation, use the following code:

@synthesize navItemName;

Finally, you’ll need to set the contents of the label to this property when the view loads. Here’s the code:

-(void)viewDidLoad
{
    [super viewDidLoad];
     
    _lblOutput.text = navItemName;
}

To recap: The TravelDetailsViewController now exposes a property called navItemName. Any code that uses this class can write to that property. When the view loads, that property will be read, and its contents will be loaded into the label.

To do this, go back to the Main.Storyboard and select the segue between the table view and the details view. On the attributes inspector, you’ll see settings for “Storyboard Segue.” See Figure 9-35.

Give the segue the name “showDetail,” as shown in Figure 9-35.

In ViewController.m, there are a couple of things you’ll need to do.

First, as you are going to be using the TravelDetailsViewController class that you created earlier, you need to tell ViewController.m about it. This is done using the #import function, which you point at TravelDetailsViewController.h and place at the top of the file, above where it says @interface.

#import "TravelDetailsViewController.h"

Next, you’ll need to implement the prepareForSegue method. This gets called as iOS does the transition to the next screen in the navigation. It’s the ideal place for us to set our data.

Here’s the code:

-(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
    if([segue.identifier isEqualToString:@"showDetail"])
    {
        NSIndexPath *indexPath = [_placesTable indexPathForSelectedRow];
        TravelDetailsViewController *deetsController = segue.destinationViewController;
        deetsController.navItemName = [navItems objectAtIndex:indexPath.row];
    }
}

Your app may have many segues, so the one that triggered this function is passed into the function with a pointer called “segue.” This has a property called “identifier,” which, if it is set to “showDetail,” we’ll know that it’s the segue that links to the detail view. Look back to Figure 9-35 where you named the segue.

Once we have the right segue, we can get our indexPath by looking at what the indexPath is for the selected row. This is the same type of indexPath that you used when setting up the table view, and it contains information about the section and row of the presently selected item.

We then create an instance of the TravelDetailsViewController class that we call deetsController. We can set its navItemName property to the item from our navItems array that corresponds to the currently selected item. And as you saw in the viewDidLoad function for TravelDetailsViewController, when this property is set it will load its contents into the label and render them.

Run the app and you’ll see this. See Figure 9-36, where “Continents” was selected to trigger the detail view for continents.

Typically items that are grouped in the same section of a table will have similar views, but the view itself handles rendering the appropriate data. An example like this one shows how to pass the data, and the view itself is simple. In real-world apps, this might be used to trigger a data query for different data sets that would be rendered on the view, but, for learning purposes, hopefully this has been a good demonstration of what’s possible!