How to simulate default iOS7 UITableView line separator style?

Question

I have a custom UITableViewCell in which I want to draw a vertical separator similar to the horizontal ones by default in iOS7. I am currently using this code when setting up a cell:

UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(cell.contentView.bounds.size.width - rightButtonWidth, 0, 1, cell.contentView.bounds.size.height)]; lineView.backgroundColor = [UIColor lightGrayColor]; lineView.autoresizingMask = 0x3f; [cell.contentView addSubview:lineView]; 

As you can see in the image, the default separator is displayed with a height of 1 pixel, while mine has a width of two pixels. I tried to set the width instead of 0.5, but then the line is not displayed at all.

Also the color is off, obviously not lightGrayColor . Is there a color constant in UIColor that matches? Edit: RGB color 207,207,210, which does not seem to be specified in UIColor.h .

Answer 1

Your problem is that the view will have a retina width of 2px if the width is set to 1px. I would suggest creating a subclass of UIView by calling it CustomDivider , and in -layoutSubviews you will do something like this:

 -(void)layoutSubviews { [super layoutSubviews]; if([self.constraints count] == 0) { CGFloat width = self.frame.size.width; CGFloat height = self.frame.size.height; if(width == 1) { width = width / [UIScreen mainScreen].scale; } if (height == 0) { height = 1 / [UIScreen mainScreen].scale; } if(height == 1) { height = height / [UIScreen mainScreen].scale; } self.frame = CGRectMake(self.frame.origin.x, self.frame.origin.y, width, height); } else { for(NSLayoutConstraint *constraint in self.constraints) { if((constraint.firstAttribute == NSLayoutAttributeWidth || constraint.firstAttribute == NSLayoutAttributeHeight) && constraint.constant == 1) { constraint.constant /=[UIScreen mainScreen].scale; } } } } 

The code snippet above will indicate which size (width or height) is less than or equal to 1, and it will change its size depending on the screen resolution. Also, this code will work with autorun (verified).

This approach will work from IB and from code.

Answer 2

Like @danypata, the subclass works fine, but my situation was to fix existing code quickly and easily. As an alternative,

 - (CGFloat)defaultOnePixelConversion { return 1.f / [UIScreen mainScreen].scale; } 

and then directly apply to the line view.

 UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, /*1*/[self defaultOnePixelConversion], height); 

the result is not as strong as UITableView's default delimiter.

Answer 3

If you use custom UITableViewCells, you can do this through your .xib. Just add a UIView with the desired color, make it one pixel and place it where you want. There is no need to do this programmatically.

In your code snippet you should add this line:

 lineView.clipsToBounds = YES;