How to edit the default navigationBar?

Question

This is the UI image, I want to create the searchBar like this:

But, however, in storyboard, I can not get this.

To achieve the effect I want, how can I do it?

I want to change my default navigation bar to the upper, which have a search bar on it.

Update

If I in inspect choose the Top Bar to None, I get this below navigationBar with a transparent bar.(ignore the its below red view, I add that.)

Possible duplicate of [How to change Navigation Bar color in iOS 7?](http://stackoverflow.com/questions/18929864/how-to-change-navigation-bar-color-in-ios-7) — Nicolas Miari, Apr 18 '17 at 02:59

Brandon A · Accepted Answer · 2017-04-18T03:21:50.100

1

You can't achieve what you are looking for from storyboard. You must programmatically add the search bar to the UINavigationBar's navigationItem. Like so,

let searchBar = UISearchBar() // Your Search bar
self.navigationController.navigationItem.titleView = searchBar

The only other thing you might consider is that this shouldnt be a UINavigationBar but instead a UIView with a UISearchBar subview. That you could put together in storyboard.

EDIT (answer for comment)

"and the cancel button how can I add it?"

This you can easily add. Something like this:

let cancelButton = UIBarButtonItem(title: "Cancel", style: .done, target: self, action: #selector(cancelButtonTapped))
self.navigationController.navigationItem.rightBarButtonItem = cancelButton

"can I hide my navigationBar in storyboard?"

Yes. Select the view controller in which you'd like to hide the UINavigationBar, select the inspector pane, and for "Top Bar" choose "None".

edited Apr 18 '17 at 03:21

answered Apr 18 '17 at 03:02

Brandon A

8,153
3
42
77

and the cancel button how can I add it? – three-blocks Apr 18 '17 at 03:04
can I hide my navigationBar in storyboard? – three-blocks Apr 18 '17 at 03:12
Yes you can hide navigation bar. – dahiya_boy Apr 18 '17 at 03:14
@three-blocks I updated my answer once again to answer you comment. – Brandon A Apr 18 '17 at 03:22
@BrandonA See my update question, bro, if I set none, there is a issue. – three-blocks Apr 18 '17 at 03:31
@three-blocks I see your updated answer but not sure what your issue is. Are you saying that there is still a transparent UINavigationBar? It must have been a subview programmatically. Can you paste the code where you are adding this? – Brandon A Apr 18 '17 at 03:39

score 0 · Answer 2 · answered Apr 18 '17 at 03:19

Answer is already given by Brandon, now if you don't want to do code work you can create your own navigation bar from storyboard. Do below steps

Hide the native navigation bar on the navigation controller.
Now take a view with leading, trailing, top 0 space and constant height 64.
Add search bar button title whatever you want and give constraints as per your requirement and take outlets and do what you want.

For more query you can ask.

How to edit the default navigationBar?

2 Answers2