How to customize tableView separator in iPhone

By default there is a single line separator in uitableview.

But I want to put my customized line as a separator.

Is it possible? How?

Solution 1:

If you want to do more than change the color of the separator using the separatorColor property of the UITableView then you could set the separatorStyle property to UITableViewCellSeparatorStyleNone and then either:

• create custom UITableViewCells that include your custom seperator within them
• create alternate [UITableViewCell][6]s that include your custom separator

For example, if your table currently displays 5 rows you could update it to display 9 rows and the rows at index 1, 3, 5, 7 would be separator cells.

Solution 2:

A better solution is to use the cell's current width and height. Something like this:

UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(0, cell.contentView.frame.size.height - 1.0, cell.contentView.frame.size.width, 1)];

lineView.backgroundColor = [UIColor darkGrayColor];
[cell.contentView addSubview:lineView];

Solution 3:

If you need different seperator colors for different rows OR you want the seperator to remain visible when the row is highlighted on tap then try this:

self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;

// We have to use the borderColor/Width as opposed to just setting the 
// backgroundColor else the view becomes transparent and disappears during 
// the cell's selected/highlighted animation
UIView *separatorView = [[UIView alloc] initWithFrame:CGRectMake(0, 43, 1024, 1)];
separatorView.layer.borderColor = [UIColor redColor].CGColor;
separatorView.layer.borderWidth = 1.0;
[cell.contentView addSubview:separatorView];

This assumes your cell's background color is transparent.

The above solution came out of some extensive experimentation. Here's some notes on my findings that I'm sure will help people:

In the normal “not selected” state

• The contentView (whats in your XIB unless you coded it otherwise) is drawn normally
• The selectedBackgroundView is HIDDEN
• The backgroundView is visible (so provided your contentView is transparent you see the backgroundView or (if you have not defined a backgroundView you'll see the background colour of the UITableView itself)

A cell is selected, the following occurs immediately with-OUT any animation:

• All views/subviews within the contentView have their backgroundColor cleared (or set to transparent), label etc text color's change to their selected colour
• The selectedBackgroundView becomes visible (this view is always the full size of the cell (a custom frame is ignored, use a subview if you need to). Also note the backgroundColor of subViews are not displayed for some reason, perhaps they're set transparent like the contentView). If you didn't define a selectedBackgroundView then Cocoa will create/insert the blue (or gray) gradient background and display this for you)
• The backgroundView is unchanged

When the cell is deselected, an animation to remove the highlighting starts:

• The selectedBackgroundView alpha property is animated from 1.0 (fully opaque) to 0.0 (fully transparent).
• The backgroundView is again unchanged (so the animation looks like a crossfade between selectedBackgroundView and backgroundView)
• Only once the animation has finished does the contentView get redrawn in the "not-selected" state and its subview backgroundColor's become visible again (this can cause your animation to look horrible so it is advisable that you don't use UIView.backgroundColor in your contentView)