CODEWITHSUNDEEP
iphoneuitableview
CodingWithoutComments
CodingWithoutComments

Reputation: 36118

Is there a way to remove the separator line from a single cell in UITableView?

I know I can change the UITableView property separatorStyle to UITableViewCellSeparatorStyleNone or UITableViewCellSeparatorStyleSingleLine to change all the cells in the TableView one way or the other.

I'm interested having some cells with a SingleLine Separator and some cells without. Is this possible?

Upvotes: 14

Views: 16814

Answers (7)

Kostas Tsoleridis
Kostas Tsoleridis

Reputation: 934

For people with the same question who use swift and want to hide the separation line for only a specific type of cell, a way to do it is the following one:

 override func layoutSubviews() {
    super.layoutSubviews()
    subviews.forEach { (view) in
        if view.dynamicType.description() == "_UITableViewCellSeparatorView" {
            view.hidden = true
        }
    }
}

Upvotes: 1

Trianna Brannon
Trianna Brannon

Reputation: 1254

I was able to hide the separator line for multiple different cells by making the left inset the size of the entire cell bounds width. Replace the "indexPath.row == 0" with the row number that you need to remove the separator line.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell" forIndexPath:indexPath];


if (indexPath.row == 0 || indexPath.row == 2 || indexPath.row == 3 || indexPath.row == 8 || indexPath.row == 9) {
    cell.separatorInset = UIEdgeInsetsMake(0, cell.bounds.size.width, 0, 0);
}
else {
    cell.separatorInset = UIEdgeInsetsMake(0, 24, 0, 0);
}


return cell;
}

Upvotes: 3

Zorayr
Zorayr

Reputation: 24874

The best way to achieve this is to turn off default line separators, subclass UITableViewCell and add a custom line separator as a subview of the contentView - see below a custom cell that is used to present an object of type SNStock that has two string properties, ticker and name: 

import UIKit

private let kSNStockCellCellHeight: CGFloat = 65.0
private let kSNStockCellCellLineSeparatorHorizontalPaddingRatio: CGFloat = 0.03
private let kSNStockCellCellLineSeparatorBackgroundColorAlpha: CGFloat = 0.3
private let kSNStockCellCellLineSeparatorHeight: CGFloat = 1

class SNStockCell: UITableViewCell {

  private let primaryTextColor: UIColor
  private let secondaryTextColor: UIColor

  private let customLineSeparatorView: UIView

  var showsCustomLineSeparator: Bool {
    get {
      return !customLineSeparatorView.hidden
    }
    set(showsCustomLineSeparator) {
      customLineSeparatorView.hidden = !showsCustomLineSeparator
    }
  }

  var customLineSeparatorColor: UIColor? {
   get {
     return customLineSeparatorView.backgroundColor
   }
   set(customLineSeparatorColor) {
     customLineSeparatorView.backgroundColor = customLineSeparatorColor?.colorWithAlphaComponent(kSNStockCellCellLineSeparatorBackgroundColorAlpha)
    }
  }

  required init(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
  }

  init(reuseIdentifier: String, primaryTextColor: UIColor, secondaryTextColor: UIColor) {
    self.primaryTextColor = primaryTextColor
    self.secondaryTextColor = secondaryTextColor
    self.customLineSeparatorView = UIView(frame:CGRectZero)
    super.init(style: UITableViewCellStyle.Subtitle, reuseIdentifier:reuseIdentifier)
    selectionStyle = UITableViewCellSelectionStyle.None
    backgroundColor = UIColor.clearColor()

    contentView.addSubview(customLineSeparatorView)
    customLineSeparatorView.hidden = true
  }

  override func prepareForReuse() {
    super.prepareForReuse()
    self.showsCustomLineSeparator = false
  }

  // MARK: Layout

  override func layoutSubviews() {
    super.layoutSubviews()
    layoutCustomLineSeparator()
  }

  private func layoutCustomLineSeparator() {
    let horizontalPadding: CGFloat = bounds.width * kSNStockCellCellLineSeparatorHorizontalPaddingRatio
    let lineSeparatorWidth: CGFloat = bounds.width - horizontalPadding * 2;
    customLineSeparatorView.frame = CGRectMake(horizontalPadding,
      kSNStockCellCellHeight - kSNStockCellCellLineSeparatorHeight,
      lineSeparatorWidth,
      kSNStockCellCellLineSeparatorHeight)
  }

  // MARK: Public Class API

  class func cellHeight() -> CGFloat {
    return kSNStockCellCellHeight
  }

  // MARK: Public API

  func configureWithStock(stock: SNStock) {
    textLabel!.text = stock.ticker as String
    textLabel!.textColor = primaryTextColor
    detailTextLabel!.text = stock.name as String
    detailTextLabel!.textColor = secondaryTextColor
    setNeedsLayout()
  } 
}

To disable the default line separator use, tableView.separatorStyle = UITableViewCellSeparatorStyle.None;. The consumer side is relatively simple, see example below:

private func stockCell(tableView: UITableView, indexPath:NSIndexPath) -> UITableViewCell {
  var cell : SNStockCell? = tableView.dequeueReusableCellWithIdentifier(stockCellReuseIdentifier) as? SNStockCell
  if (cell == nil) {
    cell = SNStockCell(reuseIdentifier:stockCellReuseIdentifier, primaryTextColor:primaryTextColor, secondaryTextColor:secondaryTextColor)
  }
  cell!.configureWithStock(stockAtIndexPath(indexPath))
  cell!.showsCustomLineSeparator = true
  cell!.customLineSeparatorColor = tintColor
  return cell!
}

Upvotes: 0

Ash R
Ash R

Reputation: 205

self.separatorInset = UIEdgeInsetsMake(0, CGRectGetWidth(self.frame)/2, 0, CGRectGetWidth(self.frame)/2);

Upvotes: 6

marshy101
marshy101

Reputation: 594

This works for me nicely.

 cell.separatorInset = UIEdgeInsetsMake(0, 160, 0, 160);

All is does it pushes the insets for the left and right of the line to the dead center, which is 160, which makes it invisible.

Then you can control the which cells to apply it by the indexPath.row;

Upvotes: 6

Mike McMaster
Mike McMaster

Reputation: 7591

Your best bet is probably to set the table's separatorStyle to UITableViewCellSeparatorStyleNone and manually adding/drawing a line (perhaps in tableView:cellForRowAtIndexPath:) when you want it.

Upvotes: 17

hanleyp
hanleyp

Reputation: 811

Following Mike's advice, here is what I did.

In tableView:cellForRowAtIndexPath:

...
if (cell == nil) {
    cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier] autorelease];

    // Drawing our own separatorLine here because I need to turn it off for the
    // last row. I can only do that on the tableView and on on specific cells.
    // The y position below has to be 1 less than the cell height to keep it from
    // disappearing when the tableView is scrolled.
    UIImageView *separatorLine = [[UIImageView alloc] initWithFrame:CGRectMake(0.0f, cell.frame.size.height - 1.0f, cell.frame.size.width, 1.0f)];
    separatorLine.image = [[UIImage imageNamed:@"grayDot"] stretchableImageWithLeftCapWidth:1 topCapHeight:0];
    separatorLine.tag = 4;

    [cell.contentView addSubview:separatorLine];

    [separatorLine release];
}

// Setup default cell setttings.
...
UIImageView *separatorLine = (UIImageView *)[cell viewWithTag:4];
separatorLine.hidden = NO;
...
// In the cell I want to hide the line, I just hide it.
seperatorLine.hidden = YES;
...

In viewDidLoad:

self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;

Upvotes: 9

Related Questions