CODEWITHSUNDEEP
iosuikituinavigationbar
Dannis Case
Dannis Case

Reputation: 777

UIKit: how can I round and clip the corners of a UINavigationBar?

I would like to round the two bottom corners of my navigation controllers's bar, so it looks like this:

enter image description here

I tried this:

final class RoundedNavigationController: UINavigationController {
    override func viewDidAppear(_ animated: Bool) {
        self.navigationBar.layer.cornerRadius = 20
        self.navigationBar.clipsToBounds = true
        self.navigationBar.layer.maskedCorners = [.layerMinXMaxYCorner,.layerMaxXMaxYCorner]
    }
}

But here is the result I'm getting:

enter image description here

Why does the safe area part get clipped too?

Thank you for your help

Upvotes: 1

Views: 261

Answers (1)

matt
matt

Reputation: 535925

Why does the safe area part get clipped too?

The bounds top of the navigation is at the bottom of the status bar. The drawing of the navigation bar is extended upward beyond its bounds into the "status bar" area (and on up to the top of the screen).

For this reason, you cannot set a navigation bar's clipsToBounds to true, as you will break the way it draws.

A better strategy might be to construct the navigation bar's background image to look the way you want it. So, for example, I was able to get this effect:

enter image description here

But not by rounding the layer corners and clipping.

Upvotes: 1

Related Questions