Question

I have a UITableView in which of course I use some UITableViewCells. Now some cells have an icon / image which I want to display in front of the text, and some others don’t. I didn’t create the UITableViewCells in Interface Builder, just using the default stuff :

// Customize the appearance of table view cells.
– (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];
}

// Set up the cell...
switch (indexPath.row) {
    case 0:
        cell.textLabel.text = @"Nearby";
        cell.imageView.image = [UIImage imageNamed:@"marker.png"];
        break;
    case 1:
        cell.textLabel.text = @"Bookmarked";            
        cell.imageView.image = [UIImage imageNamed:@"bookmark.png"];
        break;
    case 2:
        cell.textLabel.text = @"Other";
        break;
    default:
        break;
}

return cell;

}

This seems to be working perfectly, but I have a little issue with the width of the cell.imageView. The icons I’m using seem to have a different width. Some are 21 pixels, others are 25 pixels and in some casts I have no icon at all.

This results in the text for the textLabel to appear at different positions (depending on the width of the imageView).

Now my question is, can I add some code / statement which will make sure that the imageView of my cell is always 30 pixels wide ? Even if there is no image for that imageView ?

Can this be done programatically or will I have to make a Custom Cell in InterfaceBuilder or even create my own UITableViewCell descendant.

Any information on this topic is welcome.

Regards,

Stefaan

Answer 1

A slightly easier but hackier way:

1) Make sure your images are the same width. Use an image editor like Acorn to pad the images with a transparent area.

2) Make a transparent .png 30 (or whatever) pixels wide. Set this as the image on rows with no icon.

3) There’s no step three!