Tab Bar corner radius not showing transparent corners

Question

I'm trying to add a corner radius to my Tab Bar in the top left and top right corners.

Here is my code:

import UIKit

class TabBarController: UITabBarController, UITabBarControllerDelegate {

    override func viewDidLoad() {
        super.viewDidLoad()

        self.tabBar.layer.cornerRadius = 32
        self.tabBar.layer.masksToBounds = true
        self.tabBar.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]
    }

}

And here is my Interface Builder for the Tab Bar:

But my Tab Bar comes out looking like this:

As you can see, if you look at the corners, they're not transparent, they're white. It should show the image behind it. So it looks like something is going wrong with masking, but I'm not sure what.

What am I doing wrong?

Here is my other IBDesignable class that might be affecting this:

import UIKit

@IBDesignable
class DesignableView: UIView {

}

@IBDesignable
class DesignableButton: UIButton {

}

@IBDesignable
class DesignableLabel: UILabel {

}

@IBDesignable
class DesignableTextField: UITextField {

}

extension UIView {

    @IBInspectable
    var cornerRadius: CGFloat {
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
            layer.masksToBounds = newValue > 0
        }
    }

    @IBInspectable
    var shadowOffset: CGSize {
        get {
            return layer.shadowOffset
        }
        set {
            layer.shadowOffset = newValue
        }
    }

    @IBInspectable
    var shadowColor: UIColor {
        get {
            return UIColor(cgColor: layer.shadowColor!)
        }
        set {
            layer.shadowColor = newValue.cgColor
        }
    }

    @IBInspectable
    var shadowRadius: CGFloat {
        get {
            return layer.shadowRadius
        }
        set {
            layer.shadowRadius = newValue
        }
    }

    @IBInspectable
    var shadowOpacity: Float {
        get {
            return layer.shadowOpacity
        }
        set {
            layer.shadowOpacity = newValue
        }
    }

    @IBInspectable
    var borderWidth: CGFloat {
        get {
            return layer.borderWidth
        }
        set {
            layer.borderWidth = newValue
        }
    }

    @IBInspectable
    var borderColor: UIColor {
        get {
            return UIColor(cgColor: layer.borderColor!)
        }
        set {
            layer.borderColor = newValue.cgColor
        }
    }

}

Update:

I've found that if I change the background color of the View Controller behind the tabs, the corners of the tab bar match that color:

If I debug the view, you can actually see the little red corners in one of the views:

What does this mean?

@matt What values for clipsToBounds and masksToBounds should I be setting for the corners to work? — user2343632
It might be the background image constraint issue. Set bg color to view and check the result — RJ168

Felix Marianayagam Felix Marianayagam · Accepted Answer · 2020-03-15T06:27:18

I created a project with just the TabBarController. In that, I used your code and set the corner radius, border width and border color.

In the first ViewController, I did the following:

Checked to see if "Under Bottom Bars" is checked in the ViewController.
Added an image and extended it to go under the bottom bar.

It all seemed to work as expected. See image below. May be you can double check your code to see if any of the above steps help.

Tab Bar corner radius not showing transparent corners

1 Answers