Now, all that’s left to do is populate the cell with data from the chosen row, using the properties we defined in our subclass.

cell.name = [rowData objectForKey:@"Name"]; cell.color = [rowData objectForKey:@"Color"];

Compile and run your application. You should see a table of rows, each with two lines of data, as shown earlier in Figure 8–15.

Being able to add views to a table view cell provides a lot more flexibility than using the standard table view cell alone, but it can get a little tedious creating, positioning, and adding all the subviews programmatically. Gosh, it sure would be nice if we could design the table view cell graphically, using Xcode’s nib editor. Well, we’re in luck. As we mentioned earlier, you can use Interface Builder to design your table view cells, and then simply load the views from the nib file when you create a new cell.

Loading a UITableViewCell from a Nib

We’re going to re-create that same two-line interface we just built in code using the visual layout capabilities that Xcode provides in Interface Builder. To do this, we’ll create a new nib file that will contain the table view cell and lay out its views using Interface Builder. Then, when we need a table view cell to represent a row, instead of creating a standard table view cell, we’ll just load the nib file and use the properties we already defined in our cell class to set the name and color. Besides making use of Interface Builder’s visual layout, we’ll also simplify our code in a few other places.

First, we’ll make a few changes to the BIDNameAndColorCell class. Since we’re going to wire things up in the nib editor, we’ll add outlets to point out the labels that need to be accessed. Add these lines to the @interface declaration in BIDNameAndColorCell.h:

@interface BIDNameAndColorCell : UITableViewCell

@property (copy, nonatomic) NSString *name; @property (copy, nonatomic) NSString *color;

@property (strong, nonatomic) IBOutlet UILabel *nameLabel; @property (strong, nonatomic) IBOutlet UILabel *colorLabel;

@end

Now that we have these outlets, we don’t need the tags anymore! Switch over to BIDNameAndColorCell.m, delete the tag definitions, and add method synthesis for our two new outlets:

#import "BIDNameAndColorCell.h"

@implementation BIDNameAndColorCell

@synthesize name; @synthesize color;

www.it-ebooks.info

@synthesize nameLabel; @synthesize colorLabel;

Having those outlets available also means that both of our setters can be simplified by removing a couple of lines:

- (void)setName:(NSString *)n {

if (![n isEqualToString:name]) { name = [n copy];

UILabel *nameLabel = (UILabel *)[self.contentView viewWithTag: kNameValueTag];

nameLabel.text = name;

}

}

- (void)setColor:(NSString *)c {

if (![c isEqualToString:color]) { color = [c copy];

UILabel *colorLabel = (UILabel *)[self.contentView viewWithTag: kColorValueTag];

colorLabel.text = color;

}

}

And, last but not least, remember that setup we did in initWithStyle:reuseIdentifier:, where we created our labels? All that can go. In fact, you should just delete the entire method, since all that setup will now be done in Interface Builder.

After all that, you’re left with a cell class that’s even smaller and cleaner than before. Its only real function now is to shuffle data to the labels. Now we need to re-create the labels in Interface Builder.

Right-click the Cells folder in Xcode and select New File. . . from the contextual menu. In the left pane of the new file assistant, click User Interface (making sure to pick it in the iOS section, rather than the Mac OS X section). From the upper-right pane, select Empty, and then click Next. On the following screen, leave the Device Family popup set to iPhone and click Next once again. When prompted for a name, type BIDNameAndColorCell.xib. Make sure that the main project directory is selected in the file browser and that the Cells group is selected in the Group popup.

Designing the Table View Cell in Interface Builder

Next, select BIDNameAndColorCell.xib in the project navigator to open the file for editing. There are only two icons in this nib’s dock: File’s Owner and First Responder. Look in the library for a Table View Cell (see Figure 8–16), and drag one of those over to the GUI layout area.

www.it-ebooks.info

Figure 8–16. We dragged a table view cell from the library into the nib editor’s GUI layout area.

Make sure the table view cell is selected, press 5 to bring up the size inspector, and in the View section, change the cell’s height from 44 to 65. That will give us a little more room to play with.

Next, press 4 to go to the attributes inspector (see Figure 8–17). One of the first fields you’ll see there is Identifier. That’s the reuse identifier that we’ve been using in our code. If this does not ring a bell, scan back through the chapter and look for

CellTableIdentifier. Set the Identifier value to CellTableIdentifier.

www.it-ebooks.info

Figure 8–17. The attributes inspector for a table view cell

The idea here is that when we retrieve a cell for reuse, perhaps because of scrolling a new cell into view, we want to make sure we get the correct cell type. When this particular cell is instantiated from the nib file, its reuse identifier instance variable will be prepopulated with the NSString you entered in the Identifier field of the attributes inspector—CellTableIdentifier in this case.

Imagine a scenario where you created a table with a header and then a series of “middle” cells. If you scroll a middle cell into view, it’s important that you retrieve a middle cell to reuse and not a header cell. The Identifier field lets you tag the cells appropriately.

Our next step is to edit our table cell’s content view. Go to the library, drag out four Label controls, and place them in the content view, using Figure 8–18 as a guide. The labels will be too close to the top and bottom for those guidelines to be of much help, but the left guideline and the alignment guidelines should serve their purpose. Note that

www.it-ebooks.info