How to add a custom separator to UITableViewCell?

Question

Please spare sometime as this is a long explanation

I have a UIViewController which consists of a UIButton and a UITableView which loads different types of UITableViewCells with Identifier Cell1 and Cell2, on event touchUpInside of the button. I m using storyboard.

The separator for both cells are customized.

Cell1 has a separator that occupies the entire width of cell and 1 pixel height at the bottom of the cell.

Whereas Cell2 has a separator which has offset of 5 pixels from the cell, both left and right.

Each time the button outside the tableView is clicked the tableViewCells are swapped, based on the cell identifier.

Initially the tableView occupies the complete width of viewController and consists of Cell1, but the the button is tapped , tableViewCells are changed to Cell2 and the frame of the tableView is Changed, The width is reduced by 10 and x-origin is increased by 5.

But when this happens, the separator of Cell2 is 5 pixels away from the cell on right but on the left it is away by 5 pixel. This happens for all Cell2 which is loaded with data, and the cells which has no data the frame is changed appropriately.

But the cell after that has the width of Cell1 (larger width)

-(void)setSeperatorStyleForTableView :(UITableViewCell *)cell //this is called in cellForRowAtIndex 
{
   //cell- type of cell(Cell1 or Cell2)

     CGRect seperatorFrame;
    UIImageView *seperatorImage;

    seperatorFrame = [self setSeperatorFrame:cell];

    if(firstCellToBeLoaded)//BOOL used to change the button text and load appropriate cells
    {
        seperatorImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"table_row         
                                                                            2.png"]];
    }
    else
    {

        seperatorImage = [[UIImageView alloc] initWithImage:[UIImage   
                                                  imageNamed:@"table_row.png"]];
    }
    seperatorImage.frame = seperatorFrame;
    seperatorImage.autoresizingMask = YES;
    [cell.contentView addSubview:seperatorImage];

}

//set the customized separator frame

-(CGRect)setSeperatorFrame :(UITableViewCell *)cell
{

    CGRect seperatorFrame;
    seperatorFrame.size.height = 1.0;
    seperatorFrame.origin.y = cell.frame.origin.y + (cell.frame.size.height - 1.0);

    if(firstCellToBeLoaded)
    {
        seperatorFrame.origin.x = cell.frame.origin.x ;
        seperatorFrame.size.width = cell.frame.size.width;
    }
    else
    {
        seperatorFrame.origin.x = cell.frame.origin.x + 5.0;
        seperatorFrame.size.width = cell.frame.size.width -10.0;

    }

    return seperatorFrame;
}

Answer 1

You can add tableView's standard separator line, and add your custom line at the top of each cell.

In following code Change hight/width/color/image of UIView for set your separatorLine.

The easiest way to add custom separator is to add simple UIView of 1px height:

UIView* separatorLineView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 1)];/// change size as you need.
separatorLineView.backgroundColor = [UIColor grayColor];// you can also put image here
[cell.contentView addSubview:separatorLineView];

This code might solve your problem :)

Answer 2

Right way to do this would be to have the separator with in the cell class, subclass UITableViewCell if you haven't add a separator image variable there and on each cell creation you can just change the image and the frame rather than adding that on each redraw. If you require a code for this i can supply that as well. Currently when the cell is redrawn it already has the image u added last time and you just adding that again, either you remove that in -prepareForReuse method or just do as i explained above.

***** Custom Cell *****
//
//  CustomCell.m
//  Custom
//
//  Created by Syed Arsalan Pervez on 2/8/13.
//  Copyright (c) 2013 SAPLogix. All rights reserved.
//

#import "CustomCell.h"

@implementation CustomCell

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        // Initialization code
        _separatorImage = [[UIImageView alloc] initWithFrame:CGRectZero];
        [[self contentView] addSubview:_separatorImage];
    }
    return self;
}

- (void)prepareForReuse
{
    _separatorImage.image = nil;
}

- (void)dealloc
{
    [_separatorImage release];
    [super dealloc];
}

@end

Using the above cell in the view controller.

***** Test View Controller *****
//
//  TestViewController.m
//  Custom
//
//  Created by Syed Arsalan Pervez on 2/8/13.
//  Copyright (c) 2013 SAPLogix. All rights reserved.
//

#import "TestViewController.h"
#import "CustomCell.h"

@interface TestViewController ()

@end

@implementation TestViewController

- (void)viewDidLoad
{
    [self.tableView setSeparatorStyle:UITableViewCellSeparatorStyleNone];

#warning TODO: set the image name here
    _separatorImage1 = [[UIImage imageNamed:@""] retain];
    _separatorImage2 = [[UIImage imageNamed:@""] retain];
}

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 2;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *_identifier = @"CustomCell";
    CustomCell *cell = [tableView dequeueReusableCellWithIdentifier:_identifier];
    if (!cell)
    {
        cell = [[[CustomCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:_identifier] autorelease];
    }

    //Set Separator Image Here
    //Preload the image so it doesn't effect the scrolling performance
    CGRect frame = cell.contentView.frame;
    switch (indexPath.row)
    {
        case 0:
            cell.separatorImage.image = _separatorImage1;
            cell.separatorImage.frame = CGRectMake(0, CGRectGetMaxY(frame)-1, frame.size.width, 1);
            break;
        case 1:
            cell.separatorImage.image = _separatorImage2;
            cell.separatorImage.frame = CGRectMake(frame.origin.x+5, CGRectGetMaxY(frame)-1, frame.size.width-10, 1);
            break;
    }

    return cell;
}

- (void)dealloc
{
    [_separatorImage1 release];
    [_separatorImage2 release];

    [super dealloc];
}

@end