How to add wave border to uiview?

Question

I'm trying to add a bottom border like below programmatically. I believe I would need to use Beizer path, but not sure how should I go about the path points? Result image

private func setupBorder() {
    let shapeLayer = CAShapeLayer()
    let path = UIBezierPath(rect: frame)

    shapeLayer.path = path.cgPath
    layer.insertSublayer(shapeLayer, at: 0)
}

You'll have to draw `UIBezierPath` yourself, refer to [CAShapeLayer in Depth, Part I](https://www.calayer.com/core-animation/2016/05/22/cashapelayer-in-depth.html) and [CAShapeLayer in Depth, Part II](https://www.calayer.com/core-animation/2017/12/25/cashapelayer-in-depth-part-ii.html) articles. You can also have a look at [this](https://stackoverflow.com/a/34659468/7890303) answer on how to draw custom shapes. — esesmuedgars, Mar 27 '20 at 13:16

score 0 · Answer 1 · answered Mar 27 '20 at 15:54

This way you can add wavy border:

func addDownwardCurve(to path: UIBezierPath?, to point: CGPoint, withAmplitude amplitude: CGFloat) {
let mid = (point.x + (path?.currentPoint.x ?? 0.0)) / 2
path?.addQuadCurve(to: point, controlPoint: CGPoint(x: mid, y: point.y + amplitude))
}

How to add wave border to uiview?

1 Answers1