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!
