UIView with curved edges (not corner radius)

Question

I am trying to shape a UIView with its bottom edge curve inwards like shown in the image.

I was trying to accomplish it with something simple like a corner radius with negative value, but obviously that is not working. Seems like need to work with bezier curve ? What is the easiest way to get this done?

Answer 1

You could use a CAShapeLayer as either a sublayer or Backing Layer of the UIView . CAShapeLayer allows you to set a path, stroke, fill, etc.

Answer 2

// To draw an arc path

func drawCircle(view: UIView, startingAngle: CGFloat, endAngle: CGFloat) -> CAShapeLayer {
    let path = UIBezierPath(arcCenter: CGPoint(x:arcViewOutlet.frame.size.width/2,y:400), radius: CGFloat((400)), startAngle: startingAngle, endAngle:endAngle, clockwise: true)

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

    shapeLayer.strokeColor = UIColor.clear.cgColor
    shapeLayer.fillColor = UIColor.white.cgColor
    shapeLayer.lineCap = kCALineCapRound

    view.layer.addSublayer(shapeLayer)

    return shapeLayer
}

I have used radius to be 400 as per my requirement.

Give arcCentres as following.

CGPoint(x:arcViewOutlet.frame.size.width/2,y:400) //for top edge curve 
CGPoint(x:arcViewOutlet.frame.size.width/2,y:-400) //for bottom edge curve 
CGPoint(x:400,y:arcViewOutlet.frame.size.height/2) //for left edge curve 
CGPoint(x:-400,y:arcViewOutlet.frame.size.height/2) //for right edge curve