How to customize tableView separator in iPhone

Question

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?

Answer 1

The cell in gist below is a UITableViewCell's subclass where each cell could have its own separator w/ many styles (currently only .None and .Default are supported). It is written in Swift and assumes Autolayout usage.

https://gist.github.com/evgeniyd/fa36b6f586a5850bca3f

How to use the class:

1. set UITableView object's separator style to UITableViewCellSeparatorStyle.None

   tableView.separatorStyle = .None
   

2. Create a subclass of MPSTableViewCell

3. Somewhere inside awakeFromNib() set cell's separator style

Note: the code below assumes cell is loaded from xib/storyboard

    class FASWorkoutCell: FASTableViewCell {

    required init(coder aDecoder: NSCoder) {
         super.init(coder: aDecoder)
     }

     override func awakeFromNib() {
         super.awakeFromNib()

         separatorType = .Default
     }

     // ...

     }

Answer 2

If you are using Custom Cells in Swift: An alternative approach is to extend UITableViewCell with a function that can draw a line at the top of that cell.

import UIKit

extension UITableViewCell {
    func addSeparatorLineToTop(){
        let lineFrame = CGRectMake(0, 0, bounds.size.width, 1)
        let line = UIView(frame: lineFrame)
        line.backgroundColor = UIColor.myGray_300()
        addSubview(line)
    }
}

Then you can add this line to any custom cell, for example in the awakeFromNib

override func awakeFromNib() {
    super.awakeFromNib()
    addSeparatorLineToTop()
}

This solution is nice because it does not mess up your storyboard and limits your extra code to 1 line.

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

Answer 4

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];

Answer 5

On a retina display, even drawing a 0.5 unit line will result in a two-pixel line, due to anti-aliasing. To render it as a single pixel on both displays, shift it up one quarter of a unit:

UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(0, self.contentView.frame.size.height - (1.0 - 0.25), self.contentView.frame.size.wi
lineView.backgroundColor = [UIColor colorWithRed:(230.0/255.0f) green:(233/255.0f) blue:(237.0/255.0f) alpha:1.0f];
[self.contentView addSubview:lineView];

Answer 6

Tested on iOS 7 (GM):

@implementation MyTableViewController

- (void)viewDidLayoutSubviews {
    for (UIView *view in self.view.subviews) {
        if ([view isKindOfClass:NSClassFromString(@"_UITableViewCellSeparatorView")])
            view.backgroundColor = [UIColor redColor];
    }
}

@end

NOTE: it appears the UITableView moves separators to the cells in some configurations, which would make this code not work unless you descend into all UITableViewCells as well.