1

I am trying to achieve the following navigation bar with two titles and an image:

Large title variant:

large

Small title variant:

small

I tried subclassing UINavigationBar and adding subviews to it, but they did not render at all. I tried setting a titleView in storyboard, however it seemed like the titleView is constrained in its height.

What is the proper way to achieve this custom navigation bar?

I also tried this (and setting the viewController in Storyboard to that class): 

class NavViewController: UINavigationController {

    var titleView = UIView()

    override func viewDidLoad() {
        super.viewDidLoad()
        self.navigationBar.topItem?.titleView?.backgroundColor = .gray
        titleView.frame = CGRect(x: 0, y: 0, width: 100, height: 300)
        self.navigationBar.topItem?.titleView = titleView
    }
}

Storyboard

WalterBeiter
  • 2,021
  • 3
  • 23
  • 48
  • have you tried larageNavigationBar property, will give feature for make navigation bar in both sizes as large and small? Also instead of adding it on titleView add it on navigationbar because titleView have fixed size which is not changes as per content – Pravin Tate Oct 14 '19 at 09:45

2 Answers2

2

Inside the ViewControllerin viewDidLoad, add self.navigationController?.navigationBar.addSubview(imageView). (no need for subclassing) There is even support for AutoLayout inside UINavigationbar, which is great for animation.

WalterBeiter
  • 2,021
  • 3
  • 23
  • 48
0

Design your custom view seprately in a xib file, then set that xib as the titleview for your navigationbar

self.navBar.topItem?.titleView = logoImage

Do this for large title, for the smaller one only populate an image in the titleView.

Zeeshan Ahmed
  • 834
  • 8
  • 13
  • I tried that using a simple UIView() with a background color. In the NavigationController class, I set the frame of that view and set that as the titleView, but nothing will be rendered. I update the question, so that you can better see, that I did. – WalterBeiter Oct 14 '19 at 12:29