Swift Tabbar with a custom shape in the middle

i want to make this shape in swift . As you can see, the tabbar has a raised center button. However, this is not the only thing as there should be a real hole in the tabbar so that it is transparent there.

How can I create such a hole inside a tabbar? And then put a raised, round button in that hole?

I would gladly appreciate any help regarding my question.

i am trying but cannot achieve the above result.

import Foundation
import UIKit
@IBDesignable
class AppTabBar: UITabBar {

private var shapeLayer: CALayer?

override func draw(_ rect: CGRect) {
    self.addShape()
}

private func addShape() {
    let shapeLayer = CAShapeLayer()
    shapeLayer.path = createPath()
    shapeLayer.strokeColor = UIColor.lightGray.cgColor
    shapeLayer.fillColor = #colorLiteral(red: 0.9782002568, green: 0.9782230258, blue: 0.9782107472, alpha: 1)
    shapeLayer.lineWidth = 0.5

//       The below 4 lines are for shadow above the bar. you can skip them if you do not want a shadow
    shapeLayer.shadowOffset = CGSize(width:0, height:0)
    shapeLayer.shadowRadius = 10
    shapeLayer.shadowColor = UIColor.gray.cgColor
    shapeLayer.shadowOpacity = 0.3

    if let oldShapeLayer = self.shapeLayer {
        self.layer.replaceSublayer(oldShapeLayer, with: shapeLayer)
    } else {
        self.layer.insertSublayer(shapeLayer, at: 0)
    }
    self.shapeLayer = shapeLayer
}



func createPath() -> CGPath {
    let height2: CGFloat = self.frame.height

    let height: CGFloat = 86.0

    let path = UIBezierPath()
    let centerWidth = self.frame.width / 2
    let startXpoint = centerWidth - height + 57
    let endXpoint = (centerWidth + height - 45)

    path.move(to: CGPoint(x: 0, y: 0))
    path.addLine(to: CGPoint(x: startXpoint , y: 0))
  //        path.addCurve(to: CGPoint(x: centerWidth, y: height - 40),
 //                      controlPoint1: CGPoint(x: (centerWidth - 30), y: 0), controlPoint2: CGPoint(x: centerWidth - 35, y: height - 40))
    path.addCurve(to: CGPoint(x: centerWidth, y: height / 1.6),
                  controlPoint1: CGPoint(x: startXpoint - 5, y: height2 / 3), controlPoint2: CGPoint(x: (centerWidth - 10), y: height2 / 1.6))

    path.addCurve(to: CGPoint(x: (centerWidth + height / 2.9 ), y: 0),
                  controlPoint1: CGPoint(x: centerWidth + 35, y: height - 40), controlPoint2: CGPoint(x: (centerWidth + 30), y: 0))

    path.addLine(to: CGPoint(x: self.frame.width, y: 0))
    path.addLine(to: CGPoint(x: self.frame.width, y: self.frame.height))
    path.addLine(to: CGPoint(x: 0, y: self.frame.height))
    path.close()
    return path.cgPath
}

override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
    guard !clipsToBounds && !isHidden && alpha > 0 else { return nil }
    for member in subviews.reversed() {
        let subPoint = member.convert(point, from: self)
        guard let result = member.hitTest(subPoint, with: event) else { continue }
        return result
    }
    return nil
}
}

extension UITabBar {
override open func sizeThatFits(_ size: CGSize) -> CGSize {
    var sizeThatFits = super.sizeThatFits(size)
    sizeThatFits.height = 74
    return sizeThatFits
}
}