How to mimic UITableView iOS7 default line separator style?

Question

I have a custom UITableViewCell in which I want to draw a vertical separator, similar to the default horizontal ones in iOS7. Currently I use this code when I configure the 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 seen in the image, the default separator is rendered at 1 pixel height, whereas mine gets two pixels wide. I tried setting the width to .5 points instead, but then the line is not rendered at all.

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

Answer 1

Your problem is because the view will have a width on retina of 2px if the width is set to 1px. What I would suggest is to create a subclass of UIView, let's call 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 check which dimension (width or height) is less or equal to 1 and it will resize it depending on the screen resolution. Also this code will work with autolayout (tested).

This approach will work from IB and from code.

Answer 2

Like @danypata did subclass works fine but my situation was to fix exist code quick and simple. Alternatively,

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

then directly apply to the line view.

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

the result came out not much different than default UITableView's separator.