CustomView with squiggle(wavy) top.(Swift) - ios

Question

I am trying to create a custom view a squiggle top and add an image view in the middle.
Something like this:
But I am not so used to UIBezierPath, so I am pretty confused.
This is what I have done so far.
class DemoView: UIView {
var path: UIBezierPath!
override init(frame: CGRect) {
super.init(frame: frame)
self.backgroundColor = UIColor.darkGray
complexShape()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
complexShape()
}
func complexShape() {
path = UIBezierPath()
path.move(to: CGPoint(x: 0.0, y: 0.0))
path.addLine(to: CGPoint(x: self.frame.size.width/2 - 50.0, y: 0.0))
path.addLine(to: CGPoint(x: self.frame.size.width/2, y: 0.0))
path.addCurve(to: CGPoint(x: self.frame.size.width, y: 50.0),
controlPoint1: CGPoint(x: self.frame.size.width + 50.0, y: 25.0),
controlPoint2: CGPoint(x: self.frame.size.width - 150.0, y: 50.0))
path.addLine(to: CGPoint(x: self.frame.size.width, y: self.frame.size.height))
path.addLine(to: CGPoint(x: 0.0, y: self.frame.size.height))
path.close()
let shapeLayer = CAShapeLayer()
shapeLayer.path = path.cgPath
self.layer.mask = shapeLayer
}
}
extension CGFloat {
func toRadians() -> CGFloat {
return self * .pi / 180.0
}
}

Answer 1

The method below will let you add the background wave effect to another view. All you then need to do for the foreground square is add another view. Play with the constants to change the wave shape/height.
func addWaveBackground(to view: UIView){
let leftDrop:CGFloat = 0.4
let rightDrop: CGFloat = 0.3
let leftInflexionX: CGFloat = 0.4
let leftInflexionY: CGFloat = 0.47
let rightInflexionX: CGFloat = 0.6
let rightInflexionY: CGFloat = 0.22
let backView = UIView(frame: view.frame)
backView.backgroundColor = .gray
view.addSubview(backView)
let backLayer = CAShapeLayer()
let path = UIBezierPath()
path.move(to: CGPoint(x: 0, y: 0))
path.addLine(to: CGPoint(x:0, y: view.frame.height * leftDrop))
path.addCurve(to: CGPoint(x:view.frame.width, y: view.frame.height * rightDrop),
controlPoint1: CGPoint(x: view.frame.width * leftInflexionX, y: view.frame.height * leftInflexionY),
controlPoint2: CGPoint(x: view.frame.width * rightInflexionX, y: view.frame.height * rightInflexionY))
path.addLine(to: CGPoint(x:view.frame.width, y: 0))
path.close()
backLayer.fillColor = UIColor.blue.cgColor
backLayer.path = path.cgPath
backView.layer.addSublayer(backLayer)
}
Pass in the view you want to add the wave effect to (this will usually be the VC's main view).