user1899840 user1899840 - 5 months ago 30
iOS Question

How to add a custom separator to UITableViewCell?

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
UITableViewCell
s 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
tableViewCell
s 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 ,
tableViewCell
s 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

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 :)

Comments