CODEWITHSUNDEEP
iosswiftuinavigationcontrolleruinavigationbar
Sonic Master
Sonic Master

Reputation: 1246

Add UIView in navigation bar

I want to create UINavigationBar with rounded corner. It will look like this rounded navigation bar

What I am thinking is I add UIView with rounded corner and insert it in navigation bar. So this is my code 

let roundView = UIView(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.size.width, height: 44))
roundView.backgroundColor = UIColor.whiteBackground
roundView.roundCorners(corners: [.topLeft, .topRight], radius: 20)
navigationController?.navigationBar.insertSubview(roundView, at: 0)
setTitleTextColor(color: UIColor.black)

By the UI, this works well. But then my UIBarButtonItem is missing, it covered up by my custom view and couldn't be clicked. So my question is, how to add subview in navigation bar?

Thank you!

Upvotes: 0

Views: 4065

Answers (3)

Cloud Music
Cloud Music

Reputation: 81

How about to make it as a normal UIView and hide the navBar and show it in the next VC, who will know which trick you have used. read this short article here

Upvotes: 0

dahiya_boy
dahiya_boy

Reputation: 9503

From Storyboard,

  1. You have ViewController with navigationController

enter image description here

  1. Select navigationController and deselect the below selected option i.e. Show Navigation Bar visibility.

enter image description here

  1. Take a UIView (purpleView) with constraints

    • top, leading trailing = 0 w.r.t. superview
    • height = 64

  2. Take another UIView (whiteView) in purpleView with constraints

    • top= 20 (for status bar)
    • leading trailing bottom= 0 w.r.t. purpleView

  3. Now add cancel and label to your whiteview

  4. Now your UI Hierarchy is like below

enter image description here

enter image description here

  1. Take outlet of whiteView and make corner radius

Thats it.

If you'r not using storyboard then you can do same with code also. In this case you have to set frame of purpleView and whiteView instead of constraints.

Hope now its clear to you.

Upvotes: 0

Totka
Totka

Reputation: 627

Just not use UINavigation bar and create all by scratch. Is the easiest way. Otherwise you can try with pattern image:

navigationController?.navigationBar.backgroundColor = UIColor(patternImage: UIImage(named: "background.png"))

Upvotes: 1

Related Questions