How to draw a curve like this in UIBezierPath Swift?

Question

I am trying to develop a screen whose background looks like this:

Here I am trying to develop the gray curved background and it fills the lower part of the screen as well. I'm very new to UIBezierPath and I've tried this:

class CurvedView: UIView {

//MARK:- Data Types

//MARK:- View Setup

override func draw(_ rect: CGRect) {
    
    let fillColor: UIColor = .blue
    let path = UIBezierPath()
    let y:CGFloat = 0
    
    print(rect.height)
    print(rect.width)
    
    path.move(to: CGPoint(x: .zero, y: 100))
    path.addLine(to: CGPoint(x: 60, y: 100))
    path.addCurve(to: .init(x: 100, y: 0), controlPoint1: .init(x: 125, y: 80), controlPoint2: .init(x: 50, y: 80))
    
    path.close()
    fillColor.setFill()
    path.fill()
    
}

override init(frame: CGRect) {
    super.init(frame: frame)
    self.backgroundColor = .init(hex: "#dfe1e3")
}

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    self.backgroundColor = .init(hex: "#dfe1e3")
    
}
}

This code gave me this:

I followed a lot of tutorials but I didn't get the exact understanding. I understood that for this curve I have to move to (0,100) and then add a line and then add a curve and ten extend the line add a curve then straight line lower curve and then straight line and close. But, when I started as you can see the blue line didn't cover the upper part. Can any one please help me?

aiwiguna · Answer 1 · 2020-07-17T08:45:35.033

2

Here some example that I create, you can change the value to make it more similar to what you want

Here a guide how control point in a curve work

Note: I called this code in viewDidload

let path = UIBezierPath()
        let fillColor = UIColor.blue
        
        let y: CGFloat = UIScreen.main.bounds.size.height
        let x: CGFloat = UIScreen.main.bounds.size.width
        let height: CGFloat = 200
        
        path.move(to: CGPoint(x: 0, y: y)) // bottom left
        path.addLine(to: CGPoint(x: 0, y: y - 20)) // top left
        path.addCurve(to: CGPoint(x: x, y: y - height), controlPoint1: CGPoint(x: x * 2 / 3, y: y), controlPoint2: CGPoint(x: x * 5 / 6, y: y - height * 6 / 5)) // curve to top right
        path.addLine(to: CGPoint(x: x, y: y)) // bottom right
        path.close() // close the path from bottom right to bottom left

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

    view.layer.addSublayer(shapeLayer)

edited Jul 17 '20 at 08:45

answered Jul 17 '20 at 08:12

aiwiguna

2,852
2
15
26

Hey thanks for your answer. Where do I need to add it in `draw(_ rect: ) function and keep other things exactly the same? – Rob Jul 17 '20 at 08:26
you need to change your draw function – aiwiguna Jul 17 '20 at 08:27
you already have the function in your question, just change code inside the function and change the x,y,height number to what you want – aiwiguna Jul 17 '20 at 08:37
Yes, I have added your code to `draw` function but it doesn't work. – Rob Jul 17 '20 at 08:37
change the x,y,height too, because it draw at bottom of the screen right now, your view may not have that size – aiwiguna Jul 17 '20 at 08:38
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/218018/discussion-between-rob-and-aiwiguna). – Rob Jul 17 '20 at 09:11
Can you please add the code for the same in Android – Priyanka Singhal Sep 16 '21 at 08:31
@PriyankaSinghal https://stackoverflow.com/a/3616831/3021161 – aiwiguna Sep 16 '21 at 10:16
Is it exactly the same as above one in iOS. Also i want to add it as background in imageview. Will it work? – Priyanka Singhal Sep 16 '21 at 10:30
@PriyankaSinghal i think you can use framelayout and set the view with drawing as background for imageview – aiwiguna Sep 16 '21 at 11:31
It is not showing the same layout, but a rectangle view – Priyanka Singhal Sep 16 '21 at 11:51
@PriyankaSinghal i think its better for you to post a new questions and share what the issue – aiwiguna Sep 16 '21 at 19:50
I need android code for the same bezier curve as asked in question – Priyanka Singhal Sep 20 '21 at 06:44
@PriyankaSinghal yes, you better to post a new question, what you already try, etc, so people can help you – aiwiguna Sep 20 '21 at 07:51
My account is not allowing me to add new question – Priyanka Singhal Sep 21 '21 at 07:02

score 0 · Answer 2 · answered Jul 17 '20 at 09:51

in reference to @aiwiguna

class CurvedView: UIView {

//MARK:- Data Types

//MARK:- View Setup

override func draw(_ rect: CGRect) {
    
  
    let path = UIBezierPath()
  
    
    let fillColor = UIColor.blue
            
            let y: CGFloat = UIScreen.main.bounds.size.height
            let x: CGFloat = UIScreen.main.bounds.size.width
            let height: CGFloat = 200
            
            path.move(to: CGPoint(x: 0, y: y)) // bottom left
            path.addLine(to: CGPoint(x: 0, y: y - 20)) // top left
            path.addCurve(to: CGPoint(x: x, y: y - height), controlPoint1: CGPoint(x: x * 2 / 3, y: y), controlPoint2: CGPoint(x: x * 5 / 6, y: y - height * 6 / 5)) // curve to top right
            path.addLine(to: CGPoint(x: x, y: y)) // bottom right
            path.close() // close the path from bottom right to bottom left

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

    
    path.close()
    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
    
}
}

Yeah, I already did that. He has used it in `viewDidLoad`. – Rob Jul 17 '20 at 09:54 — Rob, Jul 17 '20 at 09:54

How to draw a curve like this in UIBezierPath Swift?

2 Answers2