How to set up table separator on iPhone

Question

By default, uitableview has a single line separator.

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

Is it possible? How?

Answer 1

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

• create a custom UITableViewCell that includes your custom separator inside them
• create an alternate UITableViewCell that includes your custom separator

For example, if your table currently displays 5 rows, you can update it to display 9 rows, and rows with index 1, 3, 5, 7 will be separator cells.

See the UITableViewCell Subclass in Table Programming Guide for more information on how to create custom UITableViewCell s.

Answer 2

The best solution is to use the width and height of the cell current. Something like that:

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 3

If you need different seperator colors for different lines or you want the separator to remain visible when the line is highlighted by a tap, try the following:

 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 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 that the background color of your cell is transparent.

---

The above solution came out of some extensive experiments. Here are some notes on my findings that I’m sure will help people:

In the normal "unselected" state

• ContentView (which in your XIB, unless you encoded it otherwise) is usually drawn
• SelectedBackgroundView HIDDEN
• The background view is visible (provided that your content view is transparent, you see a backgroundView or (if you have not defined a backgroundView, you will see the background color of the UITableView itself)

A cell is selected, any animation immediately happens with-OUT:

• All views / subheadings in the contentView have their own backgroundColor, cleared (or set to transparency), color change for label text, etc. with their chosen color.
• The selected BackgroundView becomes visible (this view is always the full size of the cell (the user frame is ignored if you need to use it), also note that the backgroundColor of the sub-windows is not displayed for any reason, maybe re set transparently like the contentView). If you have not defined selectedBackgroundView, then Cocoa will create / paste a blue (or gray) gradient background and display it for you)
• The background screen does not change

When the cell is canceled, the animation to remove the highlight starts:

• The selected alphaBackgroundView property animates from 1.0 (fully opaque) to 0.0 (fully transparent).
• The background screen has not changed again (so the animation looks like a crossfade between the selected BackgroundView and backgroundView)
• Only after the animation is completed, the ContentView will be redrawn in the “not selected” state, and its subview backgroundColor will become visible again (this can lead to your animation looking awful, so it is advisable that you do not use the UIView. BackgroundColor in your contentView)

Answer 4

These answers lead to the fact that the rect highlighting will be overwritten by the separator that you add to your cell (on iOS 6 with my testing, at least). You need to set separatorColor to [UIColor clearColor] so that the cells are still split by 1px, then you can select the separator in between:

 - (void)viewDidLoad { self.tableView.separatorColor = [UIColor clearColor]; } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { // snip CALayer *separator = [CALayer layer]; separator.backgroundColor = [UIColor redColor].CGColor; separator.frame = CGRectMake(0, 43, self.view.frame.size.width, 1); [cell.layer addSublayer:separator]; return cell; } 

Answer 5

You add the following code to the cellForRowAtIndexPath delegate of the View table to create a custom representation of an image of 1px height and 200px width for each Cell

 UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(0, 200, self.view.bounds.size.width, 1)]; lineView.backgroundColor = [UIColor blackColor]; [cell.contentView addSubview:lineView]; 

Note : I do not know how much this is related to performance.

Answer 6

I do not know if this can be done "automatically" with some settings. But there would be a suggestion to set the line separator as no one, and in the borders of your cells actually draw a highlighted line separator.

Answer 7

If you use custom cells in Swift: an alternative approach is to extend the UITableViewCell with a function that can draw a line at the top of that cell.

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

}

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

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

This solution is nice because it does not ruin your storyboards and limits your extra code to 1 line.

Answer 8

On the retina screen, even drawing a line with 0.5 units will result in a two-pixel line due to anti-aliasing. To display it as one pixel on both displays, move it one quarter 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 9

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. UITableView seems to move the delimiters into cells in some configurations, which will make this code broken if you don't go down to all of the UITableViewCells.

Answer 10

Below the cell is a subclass of UITableViewCell, where each cell can have its own w / many styles separator (currently only .None and .Default are supported). It is written in Swift and involves the use of Autolayout.

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

How to use the class:

• set the UITableView object separator style to UITableViewCellSeparatorStyle.None

   tableView.separatorStyle = .None 

• Subclass MPSTableViewCell

• Somewhere inside awakeFromNib() set the cell separator style

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

  class FASWorkoutCell: FASTableViewCell { required init(coder aDecoder: NSCoder) { super.init(coder: aDecoder) } override func awakeFromNib() { super.awakeFromNib() separatorType = .Default } // ... } 

Answer 11

If you are using a custom UITableViewCell, you can simply add a UIView at the bottom of UItableViewCell.xib and put the background color in the desired color.

For example, on xib, I add a UIView at the bottom and set the height to 1. Using autostart, I set the left limit to 12, the lower limit to 0, the right limit to 0 and the height to 1.

Answer 12

Quick version:

 private let kSeparatorTag = 123 private let kSeparatorHeight: CGFloat = 1.5 func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) { if cell.viewWithTag(kSeparatorTag) == nil //add separator only once { let separatorView = UIView(frame: CGRectMake(0, cell.frame.height - kSeparatorHeight, cell.frame.width, kSeparatorHeight)) separatorView.tag = kSeparatorId separatorView.backgroundColor = UIColor.redColor() separatorView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight] cell.addSubview(separatorView) } }