Getting visual with UITableViews [UPDATED]

Rune Madsen — Sun, 23 Aug 2009 17:14:18 +0000

UPDATED 27/8:

I’ve updated the code and pushed it to bitbucket. All the drawing takes place in a separate class and only one subview is added to the cell(s). Again, if you need to add images for every single cell in a large UITableView, you should probably update the code a bit to suit your needs :)

$ hg clone http://bitbucket.org/runmad/visual-uitableview/

ORIGINAL:

I am working on an app that lists movie releases and tapping a title will display more details about the selected release in a UITableView. One of the details include number of discs included with the product.

Instead of just writing the number of discs in the detailTextLabel, I thought it would be nice to visualize the number of discs. Where appropriate, it’s always a nice touch to use icons/images to dispay information, instead of just using text:

There’s two things added to the cell: a UIImage and a UILabel with the disc amount and label number updated according to the number of discs in the product.

The example code can of course be used for a lot of things than just display some disc icons and a number. Since they’re subviews, it’s probably not wise to use the code as is for every single cell in a large UITableView. Since I am just displaying the icons in one cell, I do not have any memory issues when using subviews.

You can use any integer for the discCount, in the example project, I just used the row number.

A nice touch is the spacing for the disc and label for every disc. The more discs, the less spacing there is between the images and labels (minus one pixel). You will also notice that when there’s 10 or more discs, I simply write the disc amount in the cell’s detailTextLabel and just add one disc image (without a number label). That makes for easier reading when there’s a large amount of discs.

Let me know if you use the code in your own project! I’d love to hear from you if you make any updates to the code that you’d like to share.

cell.textLabel.text = @"Discs";

UIImage *discIcon = [UIImage imageNamed:@"iconDisc.png"];

int discCount = indexPath.row + 1;

if (discCount < 10) {

    for (int i=0; i) {

        CGRect frame = CGRectMake(83 + (17 – discCount) * i, 11, 24, 27);

        UIImageView *discCellImageView = [[UIImageView alloc] initWithFrame:frame];

        discCellImageView.image = discIcon;

        [cell.contentView addSubview:discCellImageView];

        int discNumber = 1 + i;

        CGRect labelFrame = CGRectMake(86 + (17 – discCount) * i, 8, 24, 27);

        UILabel *discCountLabel = [[UILabel alloc] initWithFrame:labelFrame];

        discCountLabel.textColor = [UIColor darkGrayColor];

        discCountLabel.font = [UIFont systemFontOfSize:8];

        discCountLabel.shadowColor = [UIColor whiteColor];

        discCountLabel.shadowOffset = CGSizeMake(0, 1.0);

        discCountLabel.backgroundColor = [UIColor clearColor];

        discCountLabel.text = [NSString stringWithFormat:@"%d", discNumber];

        [cell.contentView addSubview:discCountLabel];

    }

} else if (discCount >= 10) {

    cell.detailTextLabel.text = [NSString stringWithFormat:@"%d", discCount];

    CGRect frame = CGRectMake(113, 11, 24, 27);

    UIImageView *discCellImageView = [[UIImageView alloc] initWithFrame:frame];

    discCellImageView.image = discIcon;

    [cell addSubview:discCellImageView];

}

You can download the project here: http://bitbucket.org/runmad/visual-uitableview/.

Or in Terminal:

$ hg clone http://bitbucket.org/runmad/visual-uitableview/

Thanks to Blake for his input and help!

Rune's Blog » uiimageview

Getting visual with UITableViews [UPDATED]