I’ve previously hit on the need to use a custom UITableViewCell, though I’ve always shied away from it because of project time constraints and the assumption that it would take some sweet time to perfect.

Well… as it turns out I was wrong.

It’s easy!

Create in X-Code

If you create a new file in X-Code and choose to make the file a subclass of UITableViewCell, it’ll set everything up as you need for you:

Set up MyCustomCell

You’ll be faced with this code:

Implementation

#import "MyCustomCell.h"

@implementation MyCustomCell

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

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

    // Configure the view for the selected state
}

@end

#import "MyCustomCell.h"

@implementation MyCustomCell

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier

{

self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];

if (self) {

// Initialization code

}

return self;

}

- (void)setSelected:(BOOL)selected animated:(BOOL)animated

{

[super setSelected:selected animated:animated];

// Configure the view for the selected state

}

@end

Interface

#import <UIKit/UIKit.h>

@interface MyCustomCell : UITableViewCell{

}

@end

#import <UIKit/UIKit.h>

@interface MyCustomCell : UITableViewCell{

}

@end

Okay, so it’s quite easy to customise the cell, but to do that you’ll need to understand how a cell is initially composed.
In a standard cell there is a single UILabel called textLabel, in a detail cell, there are two, textLabel and detailTextLabel.

In my particular example, I need three. One as the primary (like the normal textLabel), one as the secondary (emulating the detailTextLabel of the UITableViewCellStyleSubtitle), and one over to the right hand side (emulating the UITableViewCellStyleValue1 detailTextLabel).

MyCustomCell Layout

Creating my Labels

We’re not restricted to labels, by any means. This is just the method I needed to employ to create this. We can use most other components too, such as UIImageView.

Here are my three labels in the header file set up as standard:

#import <UIKit/UIKit.h>

@interface MyCustomCell : UITableViewCell{
    UILabel *primaryLabel;
    UILabel *secondaryLabel;
    UILabel *tertiaryLabel;
}

@property (nonatomic, retain) UILabel *primaryLabel;
@property (nonatomic, retain) UILabel *secondaryLabel;
@property (nonatomic, retain) UILabel *tertiaryLabel;

@end

#import <UIKit/UIKit.h>

@interface MyCustomCell : UITableViewCell{

UILabel *primaryLabel;

UILabel *secondaryLabel;

UILabel *tertiaryLabel;

}

@property (nonatomic, retain) UILabel *primaryLabel;

@property (nonatomic, retain) UILabel *secondaryLabel;

@property (nonatomic, retain) UILabel *tertiaryLabel;

@end

Now I need to define their properties in my implementation:

#import "MyCustomCell.h"

@implementation MyCustomCell

@synthesize primaryLabel,secondaryLabel,tertiaryLabel;

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        primaryLabel = [[UILabel alloc]init];
        primaryLabel.textAlignment = UITextAlignmentLeft;
        primaryLabel.font = [UIFont boldSystemFontOfSize:16];
        primaryLabel.backgroundColor = [UIColor clearColor];

        secondaryLabel = [[UILabel alloc]init];
        secondaryLabel.textAlignment = UITextAlignmentLeft;
        secondaryLabel.font = [UIFont systemFontOfSize:12];
        secondaryLabel.backgroundColor = [UIColor clearColor];
        secondaryLabel.textColor = [UIColor grayColor];
        
        tertiaryLabel = [[UILabel alloc]init];
        tertiaryLabel.textAlignment = UITextAlignmentLeft;
        tertiaryLabel.font = [UIFont boldSystemFontOfSize:16];
        tertiaryLabel.backgroundColor = [UIColor clearColor];
        tertiaryLabel.textColor = [UIColor blueColor];
        
        [self.contentView addSubview:primaryLabel];
        [self.contentView addSubview:secondaryLabel];
        [self.contentView addSubview:tertiaryLabel];
    }
    return self;
}

#import "MyCustomCell.h"

@implementation MyCustomCell

@synthesize primaryLabel,secondaryLabel,tertiaryLabel;

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier

{

self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];

if (self) {

primaryLabel = [[UILabel alloc]init];

primaryLabel.textAlignment = UITextAlignmentLeft;

primaryLabel.font = [UIFont boldSystemFontOfSize:16];

primaryLabel.backgroundColor = [UIColor clearColor];

secondaryLabel = [[UILabel alloc]init];

secondaryLabel.textAlignment = UITextAlignmentLeft;

secondaryLabel.font = [UIFont systemFontOfSize:12];

secondaryLabel.backgroundColor = [UIColor clearColor];

secondaryLabel.textColor = [UIColor grayColor];

tertiaryLabel = [[UILabel alloc]init];

tertiaryLabel.textAlignment = UITextAlignmentLeft;

tertiaryLabel.font = [UIFont boldSystemFontOfSize:16];

tertiaryLabel.backgroundColor = [UIColor clearColor];

tertiaryLabel.textColor = [UIColor blueColor];

[self.contentView addSubview:primaryLabel];

[self.contentView addSubview:secondaryLabel];

[self.contentView addSubview:tertiaryLabel];

}

return self;

}

You can define any label properties at this stage, but don’t touch positioning just yet, we’ll modify that through another method.
You can adjust the text colour, background color, font, font weight and font alignment etc. Anything that affects the label itself.

We need to create a method now to handle the positioning of the labels:

- (void)layoutSubviews {
    [super layoutSubviews];
    CGRect contentRect = self.contentView.bounds;
    CGFloat boundsX = contentRect.origin.x;
    CGRect frame;
    
    frame= CGRectMake(boundsX+10 ,0, 500, 25);
    primaryLabel.frame = frame;
    
    frame= CGRectMake(boundsX+10 ,20, 100, 20);
    secondaryLabel.frame = frame;
    
    frame= CGRectMake(boundsX+550 ,8, 125, 25);
    tertiaryLabel.frame = frame;
}

- (void)layoutSubviews {

[super layoutSubviews];

CGRect contentRect = self.contentView.bounds;

CGFloat boundsX = contentRect.origin.x;

CGRect frame;

frame= CGRectMake(boundsX+10 ,0, 500, 25);

primaryLabel.frame = frame;

frame= CGRectMake(boundsX+10 ,20, 100, 20);

secondaryLabel.frame = frame;

frame= CGRectMake(boundsX+550 ,8, 125, 25);

tertiaryLabel.frame = frame;

}

As you can see we create a frame with CGRectMake and then apply it to each of the labels, adjusting as necessary.

Your custom cell is created and ready to be shown to the world!

Adding to a TableView

Firstly, I need to import the class to where I would like to use it. I had an existing tableView set up.
All the adjustments you need to make will be in the cellForRowAtIndexPath method on your tableView:

Firstly, I need to adjust my cell definition, to ensure it reads from my subclass as opposed to the default:

MyCustomCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
    cell = [[[MyCustomCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier] autorelease];
}

MyCustomCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

if (cell == nil) {

cell = [[[MyCustomCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier] autorelease];

}

Now that’s done, I’ll have access to set my labels:

cell.primaryLabel.text = [NSString stringWithFormat:@"Test Product"];
cell.secondaryLabel.text = [NSString stringWithFormat:@"Test Quantity"];
cell.tertiaryLabel.text = [NSString stringWithFormat:@"Test Price"];

cell.primaryLabel.text = [NSString stringWithFormat:@"Test Product"];

cell.secondaryLabel.text = [NSString stringWithFormat:@"Test Quantity"];

cell.tertiaryLabel.text = [NSString stringWithFormat:@"Test Price"];

Here’s the full method.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    static NSString *CellIdentifier = @"Cell";
    
    MyCustomCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[MyCustomCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier] autorelease];
    }
    
    // Configure the cell

    cell.primaryLabel.text = [NSString stringWithFormat:@"Test Product"];
    cell.secondaryLabel.text = [NSString stringWithFormat:@"Test Quantity"];
    cell.tertiaryLabel.text = [NSString stringWithFormat:@"Test Price"];

    cell.accessoryType = UITableViewCellAccessoryNone;    
    return cell;   
}

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

static NSString *CellIdentifier = @"Cell";

MyCustomCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

if (cell == nil) {

cell = [[[MyCustomCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier] autorelease];

}

// Configure the cell

cell.primaryLabel.text = [NSString stringWithFormat:@"Test Product"];

cell.secondaryLabel.text = [NSString stringWithFormat:@"Test Quantity"];

cell.tertiaryLabel.text = [NSString stringWithFormat:@"Test Price"];

cell.accessoryType = UITableViewCellAccessoryNone;

return cell;

}

That’s it.

Create a subclass, define it’s parts, position it’s parts and switch the cell type.

I feel immediately more confident to experiment with this concept now.

Comments

comments