How to create Custom Navigation Bar like the following image in swift?

Question

I am working on a project where i need the exact same configuration in the navigation bar.Since the height of navigation bar is fixed I am not able to create one like in the given image.I am using a UITableViewController embedded inside a Navigation controller.

Does anyone know how to do this?

Thanks in advance

Answer 1

Hey i did a lot of google and finally found a solution to this problem. here is the snapshot from xcode 7 interface builder.

heres the link where apple had provided the sample code for extending the navbar, so i used it as per my requirement.Its in Objective C.

https://developer.apple.com/library/ios/samplecode/NavBar/Introduction/Intro.html

here is what i did :

1) User a viewcontroller embeded inside a navigation controller instead of a tableview controller.

2) Add a UIView from interface builder as per your required size under the navbar and add whatever you want inside the view (eg: Segmented Control)

3) Place the Tableview under the UIView and hook it up to the viewcontroller so that it becomes functioning

In order to make the hairline of the navbar go away and make the UIView as a part of the navabar we have to add some code to the viewDidLoad

The code is in Swift 2.0

self.navigationController?.navigationBar.translucent = true
self.navigationController?.navigationBar.clipsToBounds = true

and finally try to match the backgroundcolor of the UIView as close to the navbar and there we have a extended Custom Navigation Bar.