how can I create a rounded tab with swift?

Question

How can I create the following tab (see attached) in swift?

Answer 1

Based on this answer: https://stackoverflow.com/a/58941827/5753078

Subclass UITabBar like following. This solution takes into account the safeArealayout guides for devices with notch. I find 65 to be a sweet spot height for top rounded tabBar.

@IBDesignable class TabBarWithCorners: UITabBar {
    @IBInspectable var color: UIColor?
    @IBInspectable var radii: CGFloat = 15.0

    private var shapeLayer: CALayer?

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

    private func addShape() {
        let shapeLayer = CAShapeLayer()

        shapeLayer.path = createPath()
        shapeLayer.strokeColor = UIColor.gray.withAlphaComponent(0.1).cgColor
        shapeLayer.fillColor = color?.cgColor ?? UIColor.white.cgColor
        shapeLayer.lineWidth = 2
        shapeLayer.shadowColor = UIColor.black.cgColor
        shapeLayer.shadowOffset = CGSize(width: 0   , height: -3);
        shapeLayer.shadowOpacity = 0.2
        shapeLayer.shadowPath =  UIBezierPath(roundedRect: bounds, cornerRadius: radii).cgPath
        

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

        self.shapeLayer = shapeLayer
    }

    private func createPath() -> CGPath {
        let path = UIBezierPath(
            roundedRect: bounds,
            byRoundingCorners: [.topLeft, .topRight],
            cornerRadii: CGSize(width: radii, height: 0.0))

        return path.cgPath
    }
    override func layoutSubviews() {
        super.layoutSubviews()
        self.isTranslucent = true
        var tabFrame            = self.frame
        tabFrame.size.height    = 65 + (UIApplication.shared.keyWindow?.safeAreaInsets.bottom ?? CGFloat.zero)
        tabFrame.origin.y       = self.frame.origin.y +   ( self.frame.height - 65 - (UIApplication.shared.keyWindow?.safeAreaInsets.bottom ?? CGFloat.zero))
        self.layer.cornerRadius = 20
        self.frame            = tabFrame



        self.items?.forEach({ $0.titlePositionAdjustment = UIOffset(horizontal: 0.0, vertical: -5.0) })


    }

}

Result should look like this:

Answer 2

I am guessing this is UITabBar so you can either set rounded corners somewhere in code like this:

layer.cornerRadius = 30
layer.masksToBounds = true
layer.maskedCorners = [.layerMaxXMinYCorner, .layerMinXMinYCorner]

The first controls the rounding and the maskedCorners specifies to only round top left and top right corners.

Or create subclass and set those properties in init.

Answer 3

Pretty easy; you create your view like this:

let theView: UIView = {
   let v = UIView()
   v.translatesAutoresizingMaskIntoConstraints = false
   v.backgroundColor = .white
   v.layer.cornerRadius = 30
   v.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]
   return v
}()

You can change cornerRadius to whatever value you like. The code above gives your view rounded corners at the top, like in your picture.

Answer 4

The Best Way is to subclass UITabBar class and draw your classic tabBar there with shadows you want to add Here is a nice tutorial for Quick start

Another workaround if you don't need total control you can do it like this

tabBar.layer.masksToBounds = true 
tabBar.isTranslucent = true  
tabBar.layer.cornerRadius = 10 
self.tabBar.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]

Answer 5

Try this

override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()
    let path = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: view.frame.width, height: tabBar.frame.height), cornerRadius: 15)
    let mask = CAShapeLayer()
    mask.path = path.cgPath
    tabBar.layer.mask = mask

}