How do I create a custom UINavigationBar with the bottom two corners rounded?

Question

I've gotten the navigation bar to round only the bottom two corners but when I use clipsToBounds = true, it clips the top of the navigation bar as well. In the image below, I want the entire bar to be orange but only a portion of it is orange.

import UIKit

class MyNavBar: UINavigationBar {

override init(frame: CGRect) {
    super.init(frame: frame)
    setupNavBar()
}

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    setupNavBar()
}

func setupNavBar() {
    tintColor = .white
    barTintColor = .orange
    layer.cornerRadius = 20
    layer.maskedCorners = [.layerMinXMaxYCorner, .layerMaxXMaxYCorner]
    clipsToBounds = true
    }
}

Answer 1

You should not modify the UINavigationBar view hierarchy or alter layer properties. there is a dedicated method setBackgroundImage(_:for:barMetrics:) to customize UINavigationBar appearance. I'd suggest checking Customizing the Appearance of a Navigation Bar in Apple's UIKit Documentation here 👈.

To allow complete customization over the appearance of navigation bars, you can additionally provide custom background and shadow images. To provide a custom background image, use the setBackgroundImage(_:for:barMetrics:) method, providing a UIImage object for the appropriate bar position and metrics values.