de

Today I am posting something small which adds a great touch to a UITableViewCell. I would like to show you how to add an image to the left of a tableview cell, in the minimum amount of code (realistically) possible.

Firstly I am using the TableViewStyle UITableViewCellStyleSubtitle Which is great for a main row of text and a smaller row of text underneath.

UITableViewCellStyleSubtitle – Subtitle Row Style

First the visual output:

and the code:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

static NSString *CellIdentifier = @”CellIdentifier”;

// Dequeue or create a cell of the appropriate type.
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier] autorelease];

}

        cell.detailTextLabel.text = tempName;        
        cell.textLabel.text = tempProject;

}

But I would like to add an image to the left side. In the past I have Created three custom views ontop of each cell, and then for each cell, set a number of properties and inserted the text/image. This was all created and deallocated automatically.

I have found an even simpler way to do all of this. It uses the fantastic property ‘indentationWidth’

UITableViewCellStyleSubtitle – Subtitle Row Style with Image

First the output pic:

And the code:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

static NSString *CellIdentifier = @”CellIdentifier”;

// Dequeue or create a cell of the appropriate type.
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier] autorelease];
cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
                cell.selectionStyle = UITableViewCellSelectionStyleBlue;
                
                //Indentation Code.
                cell.indentationLevel = 1;
                cell.indentationWidth = 30;
                
                CGRect frame; frame.origin.x = 5; frame.origin.y = 5; frame.size.height = 32; frame.size.width = 32;
                
                //Print Icon
                UIImageView *imgLabel = [[UIImageView alloc] initWithFrame:frame];
                imgLabel.tag = 1000;
                [cell.contentView addSubview:imgLabel];
                [imgLabel release];        

}

        cell.detailTextLabel.text = tempName;        
        cell.textLabel.text = tempProject;

        //Setup Pic in Cell
        UIImageView *imageView = (UIImageView *) [cell.contentView viewWithTag:1000];
        imageView.image = [UIImage imageNamed:@"ico-project.png"]; // set the image for the imageview

}

This is a vast improvement to what I have previously used and have seen online.

I Hope this is found to be useful!