Search code examples
iosswiftuiviewdrawuibezierpath

Swift draw an arc for view background


I'd like to draw an arc at the bottom of a view like this:

enter image description here

The background pattern is another matter, but I think this can be done with something like uibezierpath? I haven't had much experience with it, any starter points? Thanks


Solution

  • Assign this custom class to the view in IB

    class CurveView:UIView {
    
        var once = true
    
        override func layoutSubviews() {
            super.layoutSubviews()
    
            if once {
    
                let bb = UIBezierPath()
    
                bb.move(to: CGPoint(x: 0, y: self.frame.height))
    
                // the offset here is 40 you can play with it to increase / decrease the curve height
    
                bb.addQuadCurve(to: CGPoint(x: self.frame.width, y: self.frame.height), controlPoint: CGPoint(x: self.frame.width / 2 , y: self.frame.height + 40 ))
    
                bb.close()
    
                let l = CAShapeLayer()
    
                l.path = bb.cgPath
    
                l.fillColor =  self.backgroundColor!.cgColor
    
                self.layer.insertSublayer(l,at:0)
    
                once = false
            }
    
        }
    
    }
    

    //

    enter image description here