The practical application of iOS Development Notes | Bessel curve in the project description: Three

The practical application of iOS Development Notes | Bessel curve in the project description: Three
IU

Story background:

This is a custom cell, cell background, view is a gray border, as follows:

The practical application of iOS Development Notes | Bessel curve in the project description: Three

The results of
test paper sister say ugly, because the left border of an eyesore, need to get rid of. This border is made directly by setting the view of the background view.layer.borderColor. If you remove it, the 4 edges are removed. Then I wanted to move the picture directly to the left, and then turn off the view of the background clipsToBounds, but the tag tab in the upper right corner is a rotating label, and after the view of the background clipsToBounds closes, it goes out again…
so in the end, I decided not to set the border of the background view. I would like to add the view to the upper right and lower three to accomplish this requirement.

The practical application of iOS Development Notes | Bessel curve in the project description: Three
finally smiled,.Gif

Do what you like

But I vaguely remember adding too many controls in cell, so I decided to throw away the idea.
finally decided to draw a picture.

thinking

Combining CAShapeLayer and Bessel curves to draw lines.

The practical application of iOS Development Notes | Bessel curve in the project description: Three
, thank you

CAShapeLayer and Bessel curves

The Bessel curve is a curve, but I use it to draw straight lines…
and CAShapeLayer that it is a subclass of CALayer, it is a CALayer shape, meaning that it is with the shape property to layer, and the shape takes the Bessel curve with play. Anyway, that’s what I understand.

DIY

First, you have to have a shapeLayer

CAShapeLayer *borderLayer = [CAShapeLayer layer]; / / position size borderLayer.frame = bgView.bounds; / / borderLayer.lineWidth / / width = 1; borderLayer.strokeColor = [UIColor colorWithHexString:@ color dcdcdc].CGColor; / / not filled with borderLayer.fillColor = nil; / / add to the specified layer [bgView.layer addSublayer:borderLayer];

Two. Then you have to have a curve

1. create curves
Create a path object UIBezierPath *borderPath / / [UIBezierPath = bezierPath];
2. mark the line
Set the starting point [borderPath moveToPoint: path / {124,0}] (CGPoint); / / set the turning point [borderPath addLineToPoint: in {bgView.width, 0}] (CGPoint); [borderPath addLineToPoint: (CGPoint) {bgView.width, bgView.height}]; [borderPath addLineToPoint: (CGPoint) {124, bgView.height}];

Three. Finally combine shapeLayer and curve perfectly

Finally, the path / / layer path assigned to borderLayer.path = borderPath.CGPath;

The end result is this

The practical application of iOS Development Notes | Bessel curve in the project description: Three

really looks better after removing the left border, and I have to say that the test paper sister’s vision is ok.