Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save m1entus/5967718 to your computer and use it in GitHub Desktop.
Save m1entus/5967718 to your computer and use it in GitHub Desktop.
//...
- (void)drawRect:(CGRect)rect{
CGContextRef context = UIGraphicsGetCurrentContext();
[[UIColor colorWithHexString:@"FEFFFE"] setStroke];
CGContextSetLineWidth(context, 1);
CGContextBeginPath(context);
CGContextMoveToPoint(context, 0, 0.5);
CGContextAddLineToPoint(context, CGRectGetMaxX(rect), 0.5);
CGContextStrokePath(context);
}
//...
//...
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = @"CellIdentifier";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
// Configure the cell...
// do whatever you need to do.
if (indexPath.row == [self.dataArray count] - 1) {
// last cell
cell.layer.masksToBounds = NO;
cell.layer.shadowOpacity = 1.0;
cell.layer.shadowOffset = CGSizeMake(0, 1);
cell.layer.shadowColor = [UIColor colorWithHexString:@"FEFFFE"].CGColor;
cell.layer.shadowRadius = 0;
}else {
cell.layer.masksToBounds = YES;
}
return cell;
}
//...

Question

How to implement a UITableView with a separator line like this:

doubly separator line

Usually, you can only set the separatorLine property of a UITableView with to single line or single line etched. Sometimes, it is not enough. So, how to implement a separator line like this?

Answer

First of all, we must know a doubly separator line is what we want our user to see. It doesn't matter if the line is composed with a single separator line and a fake line within the cell below. So this is the solution.

Solution

  1. Set the separator line to single line and color to the dark color #D6D6CE
  2. Add a white line to the cell at the top(see tableCellView.m)
  3. Add a shadow to the tableview to make the last line looks like a doubly line (see tableViewController.m)

Let's take a look at the source code.

A very important NOTE

Take a look at the - drawRect: method, we added 0.5 to the drawing position. I don't why but if do not added this, the line will look like blurred. But the shadow is fine.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment