How to curve the top of a UIViewController in Swift?

Question

I'm trying to figure out how to curve just the top of the UIViewController using Swift.

I want it curved like it shows in this photo.

Answer 1

You could draw the background with some bezier curves which shouldn't be too hard to do. You especially want to do this if you want to recreate something like into the bottom of that example as well.

Here's a custom view you can use. it just overrides the drawing and makes its background with a bezier path that has a rounded top

You can just adjust the height and curve with the static values I inserted.

class CurvedView: UIView {
    override func drawRect(rect: CGRect) {

        let y:CGFloat = 20
        let curveTo:CGFloat = 0

        let myBezier = UIBezierPath()
        myBezier.moveToPoint(CGPoint(x: 0, y: y))
        myBezier.addQuadCurveToPoint(CGPoint(x: rect.width, y: y), controlPoint: CGPoint(x: rect.width / 2, y: curveTo))
        myBezier.addLineToPoint(CGPoint(x: rect.width, y: rect.height))
        myBezier.addLineToPoint(CGPoint(x: 0, y: rect.height))
        myBezier.closePath()
        let context = UIGraphicsGetCurrentContext()
        CGContextSetLineWidth(context, 4.0)
        UIColor.whiteColor().setFill()
        myBezier.fill()
    }
}

Another way would be to just make a white view that is much bigger than the screen. I'm guessing 3 times the screen width. Then just set the corner radius to half of its width making it round.

Answer 2

To have rounded cornered edges of View:

In case of UIViewController's default view:

override func viewWillAppear(animated: Bool) {

    self.navigationController?.navigationBarHidden =  true

    //UIView Corner Radius
    self.view.layer.cornerRadius = 20.0;
    self.view.layer.masksToBounds = true

    //UIView Set up border
    self.view.layer.borderColor = UIColor.yellowColor().CGColor;
    self.view.layer.borderWidth = 3.0;        
}

In case of the top status bar:

Make a custom View as the top status bar.

func addStatusBar()
{
    let statusBarView = UIView(frame: CGRect(x: 0.0, y: 0.0, width: UIScreen.mainScreen().bounds.size.width, height: 20.0))

    statusBarView.backgroundColor = UIColor.greenColor()

    //UIView Corner Radius
    statusBarView.layer.cornerRadius = 5.0;
    statusBarView.layer.masksToBounds = true

    //UIView Set up border
    statusBarView.layer.borderColor = UIColor.yellowColor().CGColor;
    statusBarView.layer.borderWidth = 3.0;

    self.navigationController?.navigationBarHidden =  true
    self.view.addSubview(statusBarView)
}

Adding the custom status bar to view:

override func viewWillAppear(animated: Bool) {
    self.addStatusBar()
}

To make a view having rounded top:

extension UIView {

    func addTopRoundedCornerToView(targetView:UIView?, desiredCurve:CGFloat?)
    {
        let offset:CGFloat =  targetView!.frame.width/desiredCurve!
        let bounds: CGRect = targetView!.bounds

        let rectBounds: CGRect = CGRectMake(bounds.origin.x, bounds.origin.y+bounds.size.height / 2, bounds.size.width, bounds.size.height / 2)

        let rectPath: UIBezierPath = UIBezierPath(rect: rectBounds)
        let ovalBounds: CGRect = CGRectMake(bounds.origin.x - offset / 2, bounds.origin.y, bounds.size.width + offset, bounds.size.height)
        let ovalPath: UIBezierPath = UIBezierPath(ovalInRect: ovalBounds)
        rectPath.appendPath(ovalPath)

        // Create the shape layer and set its path
        let maskLayer: CAShapeLayer = CAShapeLayer()
        maskLayer.frame = bounds
        maskLayer.path = rectPath.CGPath

        // Set the newly created shape layer as the mask for the view's layer
        targetView!.layer.mask = maskLayer
    }
}

Usage:

override func viewWillAppear(animated: Bool) {
    self.navigationController?.navigationBarHidden =  true
    self.view.addTopRoundedCornerToView(self.view, desiredCurve: 0.6)
}