Curved Header View in Swift

Creating your own custom header in Swift can be easy. For the example above we simply used a custom UIBezierPath which we apply to a CAShapeLayer and then add to our custom UIView.

//
//  CurvedHeaderView.swift
//  CurvedHeaderExamples
//
//  Created by Jean-Marc Boullianne on 8/30/19.
//  Copyright © 2019 Jean-Marc Boullianne. All rights reserved.
//

import UIKit

@IBDesignable class CurvedHeaderView: UIView {

    @IBInspectable var curveHeight:CGFloat = 50.0
    
    var curvedLayer = CAShapeLayer()
    
    override func draw(_ rect: CGRect) {        
        
        let path = UIBezierPath()
        path.move(to: CGPoint(x: 0, y: 0))
        path.addLine(to: CGPoint(x: rect.width, y: 0))
        path.addLine(to: CGPoint(x: rect.width, y: rect.height))
        path.addArc(withCenter: CGPoint(x: CGFloat(rect.width) - curveHeight, y: rect.height), radius: curveHeight, startAngle: 0, endAngle: 1.5 * CGFloat.pi, clockwise: false)
        path.addLine(to: CGPoint(x: curveHeight, y: rect.height - curveHeight))
        path.addArc(withCenter: CGPoint(x: curveHeight, y: rect.height - (curveHeight * 2.0)), radius: curveHeight, startAngle: 0, endAngle:  CGFloat.pi, clockwise: true)
        
        path.close()
        
        curvedLayer.path = path.cgPath
        curvedLayer.fillColor = UIColor(red: 8/255, green: 95/255, blue: 189/255, alpha: 1.0).cgColor
        curvedLayer.frame = rect
        
        self.layer.insertSublayer(curvedLayer, at: 0)
        
        self.layer.shadowColor = UIColor.black.cgColor
        self.layer.shadowRadius = 10.0
        self.layer.shadowOpacity = 0.7
    }
    
}