How to draw a curve like this in Swift iOS?


I have a very basic knowledge of UIBezierPath() and Curve-related views. I have a custom class for this as I have a common footer view across the whole app.

This is what I want:

My expected result

This is what I have achieved:

Achieved

Below is my code:

import UIKit

class FooterView: UIView {

    @IBOutlet weak var footerImageView: UIImageView!

    override func draw(_ rect: CGRect) {
        let path = UIBezierPath()
        let fillColor = UIColor.blue

        let y: CGFloat = rect.size.height
        let x: CGFloat = rect.size.width
        let height: CGFloat = rect.height

        path.move(to: CGPoint(x: 0, y: height)) // top left
        path.addLine(to: CGPoint(x: x, y: height)) // top right
        path.addCurve(to: CGPoint(x: 0, y: 0), controlPoint1: CGPoint(x: x / 2, y: 0), controlPoint2: CGPoint(x: x / 2, y: height)) // curve to bottom left
        path.close() // close the path from bottom left to top left

        fillColor.setFill()
        path.fill()
    }


    override init(frame: CGRect) {
        super.init(frame: frame)
        self.backgroundColor = .red
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        self.backgroundColor = .yellow
    }

    private func commonInit(){

        Bundle.main.loadNibNamed("FooterView", owner: self, options: nil)
        // footerImageView.contentMode = .scaleAspectFill
        // addSubview(footerImageView)
    }

}

It would be great if someone could help me!
Thank You!

Latest articles

spot_imgspot_img

Related articles

Leave a reply

Please enter your comment!
Please enter your name here

spot_imgspot_img