iOS Development: Benefits of Using Standard vs. Custom Table View Cells
Azoft Blog iOS Development: Benefits of Using Standard vs. Custom Table View Cells

iOS Development: Benefits of Using Standard vs. Custom Table View Cells

By Sergey Pozhidaev on May 28, 2013

One of the important tasks in iOS application development is working with tables and cells in order to build the app’s interface. There are several ways to build an app using table views: using styles provided by the UITableViewCell class and implementing custom styles by subclassing UITableViewCell. Using custom cells gives you more control over the application look and feel, but many iOS developers forget that in most cases it is enough to use predefined styles. In this article I'd like to talk about the advantages of standard, predefined cells over custom cells.

Note that populating tables with elements created by a delegate is not used here. This method complicates and slows down access to the elements and requires extra work on recreating cells, which is impractical.

Using a standard cell:

- (UITableViewCell *)tableView:(UITableView *)curTableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;

{
NSString *cellIdentifier = @"defaultCellIdentifier";
UITableViewCell *cell = [curTableView dequeueReusableCellWithIdentifier:cellIdentifier];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier];
}
cell.textLabel.text = @"Some text";
return cell;
}

Using a custom cell with a style declared in UITableViewCellStyleDefault:

- (UITableViewCell *)tableView:(UITableView *)curTableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;
{
NSString *cellIdentifier = @"defaultCellIdentifier";

myTableViewCell *cell = (myTableViewCell *)[curTableView dequeueReusableCellWithIdentifier:cellIdentifier];
if (cell == nil) {
cell = (TableViewCellDefault *)[[[NSBundle mainBundle] loadNibNamed:@"TableViewCellDefault" owner:self options:nil] lastObject];
}
cell.textLabel.text = @"Some text";
return cell;
}

Custom cell implementation:

.h file
#import

@interface myTableViewCell : UITableViewCell

@property (nonatomic, retain) IBOutlet UILabel *textLabel;
@property (nonatomic, retain) IBOutlet UIImageView *myImageView;
@property (nonatomic, retain) IBOutlet UIButton *myAccessoryButton;

@end
.m file

#import "myTableViewCell.h"

@implementation myTableViewCell

@synthesize textLabel;
@synthesize myImageView;
@synthesize myAccessoryButton;

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
}
return self;
}

- (void)dealloc
{
self.textLabel = nil;
self.myImageView = nil;
self.myAccessoryButton = nil;
[super dealloc];
}

- (void)setSelected:(BOOL)selected animated:(BOOL)animated
{
[super setSelected:selected animated:animated];
}

@end

Standard cell views

What makes up a cell?

iOS Development - standard cell view

All cell styles have the following properties:

  • imageView — the image displayed in a cell, not set if the image is missing;
  • accessoryView — may contain a custom view or a standard accessory view given in cell.accessoryType; accessoryView is nil if cell.accessoryType is undefined or equal to UITableViewCellAccessoryNone;
  • contentView — the cell's content view.

Cells have a background image stored in the backgroundView property and a background image for the selected state stored in selectedBackgroundView property. Custom cells have the same properties, but contentView doesn't stretch to fit the cell's width and this behaviour generally makes it inconvenient to use imageView and accessoryView.

Standard accessory views

The example cell is based on UITableViewCellStyleDefault.

1. cell.accessoryType = UITableViewCellAccessoryCheckmark

UITableViewCellAccessoryCheckmark

2. cell.accessoryType = UITableViewCellAccessoryDetailDisclosureButton

UITableViewCellAccessoryDetailDisclosureButton

In this case accessoryView is a button that may be clicked without selecting the cell. Thus, selecting a cell and clicking on accessoryView are independent events. Clicking accessoryView will invoke the following delegate method:

-(void)tableView:(UITableView *)tableView accessoryButtonTappedForRowWithIndexPath:(NSIndexPath *)indexPath,

indexPath for the cell, in which the accessoryView button was clicked, will be passed to the method as an argument. Of course this accessoryView may be used with custom cells if it matches the idea and design of the cells.

3. cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator

UITableView Cell Accessory Disclosure Indicator

So, let's take a look at some standard types for table cells and their implementation.

UITableViewCellStyleDefault

contentView:

contentView

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

NSString *cellIdentifier = @"сellIdentifier";
UITableViewCell *cell = [curTableView dequeueReusableCellWithIdentifier:cellIdentifier];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier];
cell.textLabel.textColor = [UIColor whiteColor];
cell.textLabel.backgroundColor = [UIColor clearColor];
cell.backgroundView = [[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"background.png"]] autorelease];
cell.selectedBackgroundView = [[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"selectedBackground.png"]] autorelease];
 

cell.accessoryType = UITableViewCellAccessoryDetailDisclosureButton;
}
cell.textLabel.text = [NSString stringWithFormat:@"Simple text %i", indexPath.row];
cell.imageView.image = [UIImage imageNamed:@"smile.png"];
 

return cell;
}

UITableViewCellStyleDefault

UITableViewCellStyleValue1

contentView:

UITableViewCellStyleValue1

- (UITableViewCell *)tableView:(UITableView *)curTableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;

{

NSString *cellIdentifier = @"сellIdentifier";

UITableViewCell *cell = [curTableView dequeueReusableCellWithIdentifier:cellIdentifier];

if (cell == nil) {

cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:cellIdentifier];

cell.textLabel.textColor = [UIColor whiteColor];

cell.textLabel.backgroundColor = [UIColor clearColor];

cell.detailTextLabel.textColor = [UIColor whiteColor];

cell.detailTextLabel.backgroundColor = [UIColor clearColor];

cell.backgroundView = [[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"background.png"]] autorelease];

cell.selectedBackgroundView = [[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"selectedBackground.png"]] autorelease];

 

cell.accessoryType = UITableViewCellAccessoryDetailDisclosureButton;

}

cell.textLabel.text = [NSString stringWithFormat:@"Simple text %i", indexPath.row];

cell.detailTextLabel.text = [NSString stringWithFormat:@"detail text %i", indexPath.row];

cell.imageView.image = [UIImage imageNamed:@"smile.png"];

 

return cell;

}

UITableViewCellStyleValue1

UITableViewCellStyleValue2

UITableViewCellStyleValue2 does not have imageView, but accessoryView can be used in place of imageView if required.

contentView:

UITableViewCellStyleValue2-contentView

- (UITableViewCell *)tableView:(UITableView *)curTableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;

{

NSString *cellIdentifier = @"сellIdentifier";

UITableViewCell *cell = [curTableView dequeueReusableCellWithIdentifier:cellIdentifier];

if (cell == nil) {

cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue2 reuseIdentifier:cellIdentifier];

cell.textLabel.textColor = [UIColor whiteColor];

cell.textLabel.backgroundColor = [UIColor clearColor];

cell.detailTextLabel.textColor = [UIColor whiteColor];

cell.detailTextLabel.backgroundColor = [UIColor clearColor];

cell.backgroundView = [[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"background.png"]] autorelease];

cell.selectedBackgroundView = [[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"selectedBackground.png"]] autorelease];

 

cell.accessoryType = UITableViewCellAccessoryDetailDisclosureButton;

}

cell.textLabel.text = [NSString stringWithFormat:@"Simple text %i", indexPath.row];

cell.detailTextLabel.text = [NSString stringWithFormat:@"detail text %i", indexPath.row];

 

UIImageView *accessoryImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0.0, 0.0, 44.0, 44.0)];

accessoryImageView.image = [UIImage imageNamed:@"smile.png"];

cell.accessoryView = accessoryImageView;

 

return cell;

}

UITableViewCellStyleValue2

UITableViewCellStyleSubtitle

contentView:

UITableViewCellStyleValue2-contentView

- (UITableViewCell *)tableView:(UITableView *)curTableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;

{

NSString *cellIdentifier = @"сellIdentifier";

UITableViewCell *cell = [curTableView dequeueReusableCellWithIdentifier:cellIdentifier];

if (cell == nil) {

cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:cellIdentifier];

cell.textLabel.textColor = [UIColor whiteColor];

cell.textLabel.backgroundColor = [UIColor clearColor];

cell.detailTextLabel.textColor = [UIColor whiteColor];

cell.detailTextLabel.backgroundColor = [UIColor clearColor];

cell.backgroundView = [[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"background.png"]] autorelease];

cell.selectedBackgroundView = [[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"selectedBackground.png"]] autorelease];

 

cell.accessoryType = UITableViewCellAccessoryDetailDisclosureButton;

}

cell.textLabel.text = [NSString stringWithFormat:@"Simple text %i", indexPath.row];

cell.detailTextLabel.text = [NSString stringWithFormat:@"detail text %i", indexPath.row];

cell.imageView.image = [UIImage imageNamed:@"smile.png"];

 

return cell;

}

UITableViewCellStyleValue2

I did a little comparison of the creation time and the reuse time (when the cells have already been created) for standard and custom cells. The performance is measured on an iPod Touch 4gen.

Legend

  • Reuse — time in milliseconds required for reusing a cell by calling dequeueReusableCellWithIdentifier and setting new property values.
  • Create — time in milliseconds required for creating a cell, if the above method returned an empty cell.

Both cells use UITableViewCellStyleDefault and set some of its properties.

Results for standard cell with the style UITableViewCellStyleDefault:

UITableViewCellStyleDefault

Results for custom cell with the style UITableViewCellStyleDefault:

UITableViewCellStyleDefault

Results for standard cell with the style UITableViewCellStyleSubtitle:

UITableViewCellStyleSubtitle

Results for custom cell with the style UITableViewCellStyleSubtitle:

UITableViewCellStyleSubtitle

Conclusion

As shown by the above comparison, reusing a cell takes roughly the same amount of time in all of the tests, since the time doesn't depend on the type of a cell and it's only wasted on setting the properties. While creating a table, a difference in 3-4 milliseconds seems minor, but the main benefit of using standard cells is not their performance. There is no need to create your own cell classes and standard cells are guaranteed to be supported in the next versions of iOS.

VN:F [1.9.22_1171]
Rating: 5.0/5 (5 votes cast)
VN:F [1.9.22_1171]
Rating: +1 (from 3 votes)
iOS Development: Benefits of Using Standard vs. Custom Table View Cells, 5.0 out of 5 based on 5 ratings



Request a Free Quote
 
 
 

Please enter the result and submit the form

Content created by Sergey Pozhidaev