226 |
CHAPTER 8: Introduction to Table Views |
Figure 8–5. The Simple Table application, in all its dwarven glory
Adding an Image
It would be nice if we could add an image to each row. Guess we would need to create a subclass of UITableViewCell or add subviews in order to do that, huh? Actually, no, not if you can live with the image being on the left side of each row. The default table view cell can handle that situation just fine. Let’s check it out.
In the project archive, in the 08 - Simple Table folder, grab the file called star.png, and add it to your project’s Simple Table folder. star.png is a small icon we prepared just for this project.
Next, let’s get to the code. In the file BIDViewController.m, add the following code to the tableView:cellForRowAtIndexPath: method:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *SimpleTableIdentifier = @" SimpleTableIdentifier ";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier: SimpleTableIdentifier];
if (cell == nil) {
cell = [[UITableViewCell alloc]
www.it-ebooks.info
CHAPTER 8: Introduction to Table Views |
227 |
initWithStyle:UITableViewCellStyleDefault
reuseIdentifier:SimpleTableIdentifier];
}
UIImage *image = [UIImage imageNamed:@"star.png"]; cell.imageView.image = image;
NSUInteger row = [indexPath row]; cell.textLabel.text = [listData objectAtIndex:row];
return cell;
}
@end
Yep, that’s it. Each cell has an imageView property. Each imageView has an image property, as well as a highlightedImage property. The image appears to the left of the cell’s text and is replaced by the highlightedImage, if one is provided, when the cell is selected. You just set the cell’s imageView.image property to whatever image you want to display.
If you compile and run your application now, you should get a list with a bunch of nice little star icons to the left of each row (see Figure 8–6). Of course, we could have included a different image for each row in the table. Or, with very little effort, we could have used one icon for all of Mr. Disney’s dwarves and a different one for Mr. Tolkien’s.
Figure 8–6. We used the cell’s image property to add an image to each of the table view’s cells.
www.it-ebooks.info
228 |
CHAPTER 8: Introduction to Table Views |
If you like, make a copy of star.png, use your favorite graphics application to colorize it a bit, add it to the project, load it with imageNamed:, and use it to set imageView.highlightedImage. Now if you click a cell, your new image will be drawn. If you don’t feel like coloring, use the star2.png icon we provided in the project archive.
NOTE: UIImage uses a caching mechanism based on the file name, so it won’t load a new image property each time imageNamed: is called. Instead, it will use the already cached version.
Using Table View Cell Styles
The work you’ve done with the table view so far has made use of the default cell style shown in Figure 8–6, represented by the constant UITableViewCellStyleDefault. But the UITableViewCell class includes several other predefined cell styles that let you easily add a bit more variety to your table views. These cell styles make use of three different cell elements:
Image: If an image is part of the specified style, the image is displayed to the left of the cell’s text.
Text label: This is the cell’s primary text. In the style we used earlier, UITableViewCellStyleDefault, the text label is the only text shown in the cell.
Detail text label: This is the cell’s secondary text, usually used as an explanatory note or label.
To see what these new style additions look like, add the following code to tableView:cellForRowAtIndexPath: in BIDViewController.m:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *SimpleTableIdentifier = @"SimpleTableIdentifier";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier: SimpleTableIdentifier];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier: SimpleTableIdentifier];
}
UIImage *image = [UIImage imageNamed:@"star.png"]; cell.imageView.image = image;
NSUInteger row = [indexPath row]; cell.textLabel.text = [listData objectAtIndex:row];
if (row < 7)
www.it-ebooks.info
CHAPTER 8: Introduction to Table Views |
229 |
cell.detailTextLabel.text = @"Mr. Disney";
else
cell.detailTextLabel.text = @"Mr. Tolkien";
return cell;
}
All we’ve done here is set the cell’s detail text. We use the string @"Mr. Disney" for the first seven rows and @"Mr. Tolkien" for the rest. When you run this code, each cell will look just the same as it did before (see Figure 8–7). That’s because we are using the style UITableViewCellStyleDefault, which does not make use of the detail text.
Figure 8–7. The default cell style shows the image and text label in a straight row.
Now, change UITableViewCellStyleDefault to UITableViewCellStyleSubtitle and run the app again. With the subtitle style, both text elements are shown, one below the other (see Figure 8–8).
Figure 8–8. The subtitle style shows the detail text in smaller, gray letters below the text label.
Change UITableViewCellStyleSubtitle to UITableViewCellStyleValue1, and then build and run. This style places the text label and detail text label on the same line on opposite sides of the cell (see Figure 8–9).
Figure 8–9. The style value 1 will place the text label on the left side in black letters and the detail text rightjustified on the right side in blue letters.
Finally, change UITableViewCellStyleValue1 to UITableViewCellStyleValue2. This format is often used to display information along with a descriptive label. It doesn’t show the cell’s icon, but places the detail text label to the left of the text label (see Figure 8– 10). In this layout, the detail text label acts as a label describing the type of data held in the text label.
Figure 8–10. The style value 2 does not display the image and places the detail text label in blue letters to the left of the text label.
Now that you’ve seen the cell styles that are available, go ahead and change back to using UITableViewCellStyleDefault before continuing. Later in this chapter, you’ll see how to customize the appearance of your table. But before you decide to do that, make sure you consider the available styles to see whether one of them will suit your needs.
You may have noticed that we made our controller both the data source and delegate for this table view, but up to now, we haven’t actually implemented any of the methods
www.it-ebooks.info