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.)

Answer 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".

Answer 2

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

1. Hide the native navigation bar on the navigation controller.
2. Now take a view with leading, trailing, top 0 space and constant height 64.
3. 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.