246 CHAPTER 8: Introduction to Table Views
you can drag out one label, and then option-drag to create copies, if that approach is easier for you.
Figure 8–18. The table view cell’s content view, with four labels dragged in
Next, double-click the upper-left label and change it to Name:. Then change the lowerleft label to Color:.
Now, select both the Name: and Color: labels, and press the small T button in the attribute inspector’s Font field. This will open a small panel containing a Font popup button. Click that, and choose System Bold as the typeface. If needed, select the two unchanged label fields on the right and drag them a little more to the right to give the design a bit of breathing room.
Finally, resize the two right-side labels so they stretch all the way to the right guideline. Figure 8–19 should give you a sense of our final cell content view.
Figure 8–19. The table view cell’s content view with the left label names changed and set to bold, and with the right labels slightly moved and resized
Now, we need to let Interface Builder know that this table view cell isn’t just a normal cell, but rather our special subclass. Otherwise, we wouldn’t be able to connect our outlets to the relevant labels. Select the table view cell, bring up the identity inspector by pressing 3, and choose BIDNameAndColorCell from the Class control.
Next, switch to the connections inspector ( 6), where you’ll see the colorLabel and nameLabel outlets. Drag each of them to their corresponding label in the GUI.
Using the New Table View Cell
To use the cell we designed, we just need to make a few pretty simple changes to the tableView:cellForRowAtIndexPath: method in BIDViewController.m. We’re going to add a bit and take a bit away.
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *CellTableIdentifier = @"CellTableIdentifier"; static BOOL nibsRegistered = NO;
if (!nibsRegistered) {
UINib *nib = [UINib nibWithNibName:@"BIDNameAndColorCell" bundle:nil];
www.it-ebooks.info
CHAPTER 8: Introduction to Table Views |
247 |
[tableView registerNib:nib forCellReuseIdentifier:CellTableIdentifier]; nibsRegistered = YES;
}
BIDNameAndColorCell *cell = [tableView dequeueReusableCellWithIdentifier: CellTableIdentifier];
if (cell == nil) {
cell = [[BIDNameAndColorCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellTableIdentifier];
}
NSUInteger row = [indexPath row];
NSDictionary *rowData = [self.computers objectAtIndex:row];
cell.name = [rowData objectForKey:@"Name"]; cell.color = [rowData objectForKey:@"Color"];
return cell;
}
The first change you see here is the addition of a new static BOOL variable. This variable maintains its state across invocations of this method, and it is initialized to NO only the first time this method is called. This lets us insert a few lines that will be called only once (the first time this method is called), in order to register our nib with the table view. What does this mean?
Starting in iOS 5, a table view can keep track of which nib files are meant to be associated with particular reuse identifiers. UITableView’s dequeueReusableCellWithIdentifier: method is now so smart that, even if there are no available cells, it can use this nib registry to load a new cell from a nib file. That means that as long as we’ve registered all the reuse identifiers we’re going to use for a table view, its dequeueReusableCellWithIdentifier: method will always return a cell, and it never returns nil. Therefore, we can remove the lines that check for a nil cell value, since that will never happen.
There’s one other addition we need to make. We already changed the height of our table view cell from the default value in CustomCell.xib, but that’s not quite enough. We also need to inform the table view of that fact; otherwise, it won’t leave enough space for the cell to display properly. The simplest way to do this is by adding a table view delegate method that lets us specify the value. Add the following new method to the bottom of the class definition in BIDViewController.m:
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
return 65.0; // Same number we used in Interface Builder
}
That’s it. Build and run. Now your two-line table cells are based on your mad Interface Builder design skillz.
So, now that you’ve seen a couple of approaches, what do you think? Many people who delve into iOS development are somewhat confused at first by the focus on Interface
www.it-ebooks.info