How to increase UITableView separator height?

Question

I need more space (10 pixels) between each cell . How can i do this?

And I added this code

 tableView.separatorStyle = UITableViewCellSeparatorStyleNone; 

Answer 1

I do not think this is possible using the standard API. I think you need to subclass UITableViewCell and add a view that mimics the separator at the bottom of the cell.

You can check this question, it seems related and contains sample code: iPhone + UITableView + place image for separator

Answer 2

The best way for me is to simply add this to cellForRowAtIndexPath or to willDisplayCell

 CGRect sizeRect = [UIScreen mainScreen].applicationFrame; NSInteger separatorHeight = 3; UIView * additionalSeparator = [[UIView alloc] initWithFrame:CGRectMake(0,cell.frame.size.height-separatorHeight,sizeRect.size.width,separatorHeight)]; additionalSeparator.backgroundColor = [UIColor grayColor]; [cell addSubview:additionalSeparator]; 

For Swift 3.0:

 let screenSize = UIScreen.main.bounds let separatorHeight = CGFloat(3.0) let additionalSeparator = UIView.init(frame: CGRect(x: 0, y: self.frame.size.height-separatorHeight, width: screenSize.width, height: separatorHeight)) additionalSeparator.backgroundColor = UIColor.gray self.addSubview(additionalSeparator) 

You must add this to the awakeFromNib () cell method to avoid re-creating.

Answer 3

I saw a lot of awkward solutions, such as subclasses of UITableView with hidden cells and other less optimal ones, including. in this thread.

When initializing a UITableView set the rowHeight property to UITableView equal to = cell height + desired separator / space height.

Do not use the standard UITableViewCell class, but instead subclass the UITableViewCell class and override its layoutSubviews method. There, calling super (do not forget about it), set the height of the cell itself to the desired height.

UPDATE BONUS 18 / OCT / 2015:

You may be a little smarter about this. The solution above basically places the “separator” at the bottom of the cell. What really happens is the row height is controlled by the TableViewController, but the cell is resized to be slightly lower. This causes the delimiter / empty space to be at the bottom. But you can also center all the sub-points vertically so that you leave the same space above and below. For example, 1pt and 1pt.

You can also create convenience isFirst, isLast properties in your cell subclass. You must set them to yes in cellForRowAtIndexPath. This way you can handle the boundary cases for the upper and lower delimiters inside the layoutSubviews method, as this will have access to these properties. Thus, you can handle the boundary cabinets from above or below - because sometimes the design department needs N + 1 dividers, and the number of cells only N. Therefore, you have to either deal with the top or boot method in a special way, but it’s best to do this inside cells instead of tableViewHeader or TableViewFooter.

Answer 4

In swift

The easiest and shortest way for me was to add the snippet below to cellForRowAtIndexPath or to willDisplayCell :

 override func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) { let additionalSeparatorThickness = CGFloat(3) let additionalSeparator = UIView(frame: CGRectMake(0, cell.frame.size.height - additionalSeparatorThickness, cell.frame.size.width, additionalSeparatorThickness)) additionalSeparator.backgroundColor = UIColor.redColor() cell.addSubview(additionalSeparator) } 

Answer 5

You can do this completely in a storyboard. Here's how:

• go to the storyboard and select tableview
• Show the size inspector and from there set the line height to say 140.
• then show the Attributes inspector and from there set the separator to Single Line and Style Plain and select a color
• then in the storyboard (or in the document structure) select the cell
• and again, in the Size Inspector, under the table view, set a custom row height to say 120.

That's all. Your separator will be 20 units.

Answer 6

It is pretty old. Nevertheless, I will post my approach.

Just slightly increase the height of the cell and assign a mask layer to the cell, for example:

 func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "...", for: indexPath) // Configure the cell... let maskLayer = CAShapeLayer() let bounds = cell.bounds maskLayer.path = UIBezierPath(roundedRect: CGRect(x: 2, y: 2, width: bounds.width-4, height: bounds.height-4), cornerRadius: 5).cgPath cell.layer.mask = maskLayer return cell } 

So, in this example, the height of my seperator will be 4.

Good luck

Answer 7

It seems like an old thread, but since I found only hacker solutions in this thread, here is the solution that helped me the most (without an additional UIView in each cell)

Swift 3:

 override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { //configure your cell... cell.layer.shadowColor = UIColor.red.cgColor cell.layer.shadowOffset = CGSize(width: 0, height: 1) cell.layer.shadowOpacity = 1 cell.layer.shadowRadius = 0 cell.layer.masksToBounds = false return cell } 

EDIT: Unfortunately, this does not work if you scroll up in the table. In any case, I leave the answer here, as this may be a solution if the content of your table is limited.

See Shadow on a UITableViewCell disappears when scrolling for more information.

Answer 8

For a table cell with a height of 50 and a space of 5 pixels between rows. Width 320.

Define the background of the cells:

 - (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath { cell.backgroundColor = [UIColor clearColor]; } 

Set the cell height, this is the size of the PLUS row for the separator:

 -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{ return 55; } 

And define in cellForRowAtIndexPath a field with a row size (MINUS delimiter) to draw a background color:

 UILabel *headerBackgroundLabel = [[UILabel alloc] initWithFrame:CGRectMake(0,0,320,50)]; backgroundBox.backgroundColor = [UIColor grayColor]; [cell addSubview:backgroundBox]; 

Answer 9

I make it much easier and more flexible. Some may call this a hack. I call it pragmatic.

I hide the standard UITableViewSeparator. Then I add subview to my cell using auto layout. Correct the height that I want. Attach it to the edges with an edge on both sides. Change the background color. I have a simple delimiter with the desired height.

You may wonder how efficiently this has another UIView in the cell hierarchy. Will it really make a noticeable difference? Probably not - you still deduced the standard delimiter from the table hierarchy.

Answer 10

Swift 4

It is not possible to make the default delimiter higher. Instead, you need to add a subview that will look like a separator for each cell (and, optionally, make the cell higher). You can do this, for example, in cellForRowAtIndexPath or in a subclass of UITableViewCell .

If you allow to select a cell, you also need to add a subview for the selected state, otherwise the separator will disappear when you select a cell. This is why selectedBackgroundView also configured.

Add this to your subclass of UITableViewController :

 override func viewDidLoad() { super.viewDidLoad() tableView.separatorStyle = .none } override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) cell.backgroundView = UIView(backgroundColor: .white) cell.backgroundView?.addSeparator() cell.selectedBackgroundView = UIView(backgroundColor: .blue) cell.selectedBackgroundView?.addSeparator() // configure the cell return cell } 

Add these extensions to the same file below:

 private extension UIView { convenience init(backgroundColor: UIColor) { self.init() self.backgroundColor = backgroundColor } func addSeparator() { let separatorHeight: CGFloat = 2 let frame = CGRect(x: 0, y: bounds.height - separatorHeight, width: bounds.width, height: separatorHeight) let separator = UIView(frame: frame) separator.backgroundColor = .gray separator.autoresizingMask = [.flexibleTopMargin, .flexibleWidth] addSubview(separator) } } 

Answer 11

Here is an option that may work for some people.

 cell.layer.borderColor = UIColor.white.cgColor cell.layer.borderWidth = 4.0 cell.layer.masksToBounds = true 

Answer 12

The easiest and safest solution to this problem is to disable the table separator and use the UITableViewCell as a variable height separator. Of course, you will have to do some mathematical task to figure out where the objects are, but in fact it is odd / even.

It will not break, and you will benefit from the utilized cells (without prying eyes for cleaning).

Answer 13

This is the simplest solution I have found:

 override func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? { " " } 

then just set the height to what you want:

 tableView.sectionHeaderHeight = 30.0 

Answer 14

For Swift 4

Implemented King-Wizard solution for Swift 4:

 public func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) { let additionalSeparatorThickness = CGFloat(4) let additionalSeparator = UIView(frame: CGRect(x: 0, y: cell.frame.size.height - additionalSeparatorThickness, width: cell.frame.size.width, height: additionalSeparatorThickness)) additionalSeparator.backgroundColor = UIColor.groupTableViewBackground cell.addSubview(additionalSeparator) } 

Answer 15

I came across something that allowed me to effectively change the gap between cells.

In the interface builder, I set the line height to 46.

In the cellForRowAtIndexPath method of my TableView delegate, I set the cell frame to a smaller value.

 cell.frame=CGRectMake(44,0,tableView.bounds.size.width,44) 

This gives me a cell with a height of 44 that matches the width of the View table, but the space provided for the row will be 46, as defined in IB.

I still populated the cell programmatically, so I really liked it.

Answer 16

You have to implement

 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath 

delegate method. and return 100.0.