Photo by Fab Lentz on Unsplash

Custom navigation bar in iOS

In the previous article we saw how we can customize navigation bar.

Sometimes you will get into situation where navigation bar can not be customized according to your needs. Then the best option is to create a custom navigation bar manually using custom views.

View objects encapsulate logic to display information on the screen and respond to user events. UIKit comes with a catalog of views that can be used to build many kinds of user interfaces. However, you can also define your own custom view classes. Custom views are common and a very good technique to create rich and effective User Interface.

In order to define custom view, we need to understand how views are defined and created. Each view is an instance of some subclass of UIView. The class is responsible for defining the behavior of the view. It may also be responsible for the layout and visual appearance of the view.

However, the layout and visual appearance of the view may be described in a separate file created with Interface Builder (a .xib file). xibs decoratively define the layout and configuration of objects in your application — most of the time you’ll use them to configure views.

Custom UIView with .xib file is a very common practice in iOS development. Custom UIView classes don’t contain .xib files when you create them. That’s why we have to make sure that we connect the .xib file the right way.

Steps for creating a custom view

• Create a .xib and a class named NavigationBar (used the same name for convenience and readability)

• In the .xib change the “File’s Owner” class to NavigationBar (in the identity inspector)

• Create a UIView outlet in NavigationBar.swift, linking it to the top level view in the .xib file (named it “view” for convenience). Then add other outlets to other controls in the .xib file as needed.

• Loading .xib files

// first: load the view hierarchy to get proper outlets
Bundle.main.loadNibNamed(“NavigationBar”, owner: self, options: nil)
view.translatesAutoresizingMaskIntoConstraints = false
// next: append the container to our view
addSubview(view)
NSLayoutConstraint.activate(
   [
      view.topAnchor.constraint(equalTo: topAnchor),
      view.leadingAnchor.constraint(equalTo: leadingAnchor),
      view.bottomAnchor.constraint(equalTo: bottomAnchor),
      view.trailingAnchor.constraint(equalTo: trailingAnchor),
   ]
 )

• Now we can add custom properties, style our custom view, add much more. For example we need to hide/enable buttons in some cases. Let’s expose those properties

var isLeftButtonHidden: Bool {
  set {
     leftButton.isHidden = newValue
  }
  get {
     return leftButton.isHidden
  }
}
 
var isRightFirstButtonEnabled: Bool {
  set {
     rightFirstButton.isEnabled = newValue
  }
  get {
     return rightFirstButton.isEnabled
  }
}

• When we are finished with customization the last thing we should do to make custom navigation bar visible is to inject it on the proper screen. Let’s add new view, set it’s class to NavigationBar and adapt constraints to “glue” custom view to top of screen

• We can run this now and see what we accomplished

TL;DR

Jump straight to the source code.