Skip to content

Instantly share code, notes, and snippets.

@TonnyXu
Created May 10, 2012 13:21
Show Gist options
  • Star 12 You must be signed in to star a gist
  • Fork 9 You must be signed in to fork a gist
  • Save TonnyXu/2652939 to your computer and use it in GitHub Desktop.
Save TonnyXu/2652939 to your computer and use it in GitHub Desktop.
set UITableView.separatorLine to 2px and with different colors each pixel
//...
- (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.

@ayon115
Copy link

ayon115 commented Dec 16, 2014

What to do if I don't need this drawing for some specific cells ?

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