How Do i create UIView like in the image?

Question

i want to add curve in my UIView as shown in image. How can i create such uiview?

Answer 1

You can use UIBezierPath and use addCurve method to create your view.

//1. Create this new Class 
class ComplexView: UIView {

    var path: UIBezierPath!

    override init(frame: CGRect) {
        super.init(frame: frame)

        self.alpha = 0.3
        complexShape()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    override func draw(_ rect: CGRect) {
        // Specify the fill color and apply it to the path.
        UIColor.blue.setFill()
        path.fill()

        // Specify a border (stroke) color.
        UIColor.magenta.setStroke()
        path.stroke()
    }


    func complexShape() {
        path = UIBezierPath()
        path.move(to: CGPoint(x: 0.0, y: 0.0))

        path.addCurve(to: CGPoint(x: 0, y: self.frame.size.height),
                      controlPoint1: CGPoint(x: 50.0, y: 25.0),
                      controlPoint2: CGPoint(x: 50.0, y: self.frame.size.height - 25.0))

        path.close()

        let shapeLayer = CAShapeLayer()
        shapeLayer.path = path.cgPath

        self.backgroundColor = UIColor.orange
        self.layer.mask = shapeLayer
    }
}

In your ViewController call this View and add this view to your main view.

//2. In you Viewcontoller add ComplexView
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)

        let width: CGFloat = 100.0
        let height: CGFloat = 500.0

        let complexView = ComplexView(frame: CGRect(x: 0,
                                              y: self.view.frame.size.height/2 - height/2,
                                              width: width,
                                              height: height))

        self.view.addSubview(complexView)
    }

You need to play around addCurve method to get your desired shape.