Setting CAShapeLayer lineWidth Less Than 1 - ios

Question

In the above screen shot, there are two lines:
Solid line is just a UIView with 1px height
Dashed line is created using this code
- (void)viewDidAppear:(BOOL)animated {
CAShapeLayer *line = [CAShapeLayer layer];
UIBezierPath *linePath=[UIBezierPath bezierPath];
[linePath moveToPoint:CGPointMake(0, 107)];
[linePath addLineToPoint:CGPointMake(self.view.frame.size.width, 107)];
line.lineWidth = 0.5;
line.path=linePath.CGPath;
line.fillColor = [[UIColor blackColor] CGColor];
line.strokeColor = [[UIColor blackColor] CGColor];
[line setLineJoin:kCALineJoinRound];
[line setLineDashPattern: [NSArray arrayWithObjects:[NSNumber numberWithInt:10], [NSNumber numberWithInt:5],nil]];
[[self.view layer] addSublayer:line];
}
Why is a UIView of 1-pixel (1.0) height less than a dashed line of 0.5 height?
I want the dashed line to be as slim as solid line.

Answer 1

When you say the UIView has a 1px height, do you actually mean 1px?
Sizes in UIKit (the lineWidth and frame of the CAShapeLayer and UIView respectively) are measured in points, not pixels. A single point is equivalent to 1 pixel on a 1x display, 2 pixels on a 2x display and 3 pixels on a 3x display.*
Therefore if you want the size of a single pixel in points - you'll want
1.0/[UIScreen mainScreen].scale
The problem that you seem to be having in your image is that you're confusing the frame origin of your UIView with the line of your UIBezierPath. These aren't the same. The frame origin represents the top of your UIView — whereas the line represents the centre of your path.
You will therefore want to offset your line position down by half of its width - which will align it to the centre of the pixel, allowing the stroke to be rendered on a single pixel.**
Something like this should achieve your desired result:
CGFloat pixelWidth = 1.0/[UIScreen mainScreen].scale;
UIView* v = [[UIView alloc] initWithFrame:(CGRect){0, 50, self.view.frame.size.width, pixelWidth}];
v.backgroundColor = [UIColor redColor];
[self.view addSubview:v];
UIBezierPath* p = [UIBezierPath bezierPath];
[p moveToPoint:(CGPoint){0, 50+(pixelWidth*0.5)}];
[p addLineToPoint:(CGPoint){self.view.frame.size.width, 50+(pixelWidth*0.5)}];
CAShapeLayer* s = [CAShapeLayer layer];
s.contentsScale = [UIScreen mainScreen].scale; // ensures the CAShapeLayer renders its contents at the logical scale of the screen
s.frame = self.view.bounds;
s.path = p.CGPath;
s.fillColor = [UIColor clearColor].CGColor;
s.strokeColor = [UIColor greenColor].CGColor;
s.lineWidth = pixelWidth;
s.lineDashPattern = #[#10, #10];
[self.view.layer addSublayer:s];
Generates the following (on an iPhone 6):
*The iPhone 6 Plus behaves a little differently - its physical display's scale (~2.6x) doesn't match the logical scale (3x).
Therefore any drawing you do in it can result in pixel bleeding, as it gets scaled down to be displayed. You can get around this, but it involves delving into Open GL or Metal to do your drawing.
See also here for a nice overview on how each iPhone renders their content.
**On a 2x display, you'll may also need to offset the position of your line by an extra 0.25 points in order to prevent pixel bleeding (as your line will lie on a pixel boundary), as Andrea says.

Answer 2

0.5 point will translate in:
1.5px on #3x retina display
1px on #2x retina display
0.5 on normal display
0.5 is not a physical measure in pixel coordinate system (half pixel doesn't exist), thus the rendering system usually creates an antialiasing around everything that presents a decimal.
This happens also placing UIView's probably you've already seen unwanted blur around them, this happens when the frame has decimal points, usually it can be fixed by passing the frame in the CGRectIntegral function.
To draw one pixel line I quote Apple indications about it:
On a high-resolution display (with a scale factor of 2.0), a line that
is one point wide is not antialiased at all because it occupies two
full pixels (from -0.5 to +0.5). To draw a line that covers only a
single physical pixel, you would need to make it 0.5 points in
thickness and offset its position by 0.25 points