Easiest way to setup custom NavigationBar in Swift? - swift

Question

What is the easiest way to setup a custom NavigationBar in iOS/Swift?
I want to use a label above the navigation buttons (increased height). Is the only way to replace and hide the default NavigationBar and use an UIView?

Answer 1

(There's some missing things in your question, so this may not answer it.)
A UINavigationBar is simply a subclass of UIView, just as a UINavigationController is a subclass of a UIViewController. Where the former is just a "view" with a title and left/right bar buttons, the latter will have that and can also "control" a UIViewController stack.
Here's code for the former.
First, let's declare a label for the user name and a navigation bar with no title and a single left/right bar button. You can have an array of bar buttons on the left/right if you want. Also, I like to have SF Symbols with descriptive text, so I'll make UIButtons first.
let userName = UILabel()
let navBar = UINavigationBar()
let navItems = UINavigationItem(title: "")
var btnLeft:UIButton()
var btnRight:UIButton()
var barBtnLeft:UIBarButtonItem!
var barBtnRight:UIBarButtonItem!
Now let's populate things and set things up for auto layout. This all can be done during viewDidLoad, and change things (like user name) in other places.
// user name label
userName.translatesAutoresizingMaskIntoConstraints = false
userName.text = "User Name"
userName.textAlignment = .center
// create UIButtons with an SF Symbol and description
btnLeft.translatesAutoresizingMaskIntoConstraints = false
btnLeft.setImage(UIImage(systemName: "lessthan"), for: .normal)
btnLeft.setTitle(" left", for: .normal)
btnLeft.setTitleColor(.blue, for: .normal)
btnRight.translatesAutoresizingMaskIntoConstraints = false
btnRight.setImage(UIImage(systemName: "greaterthan"), for: .normal)
btnRight.setTitle(" right", for: .normal)
btnRight.setTitleColor(.blue, for: .normal)
// I like to "frame" these buttons, this is optional
btnLeft.layer.borderWidth = 1
btnLeft.layer.borderColor = UIColor.blue.cgColor
btnLeft.layer.cornerRadius = 5
btnRight.layer.borderWidth = 1
btnRight.layer.borderColor = UIColor.blue.cgColor
btnRight.layer.cornerRadius = 5
// now give the buttons a size
btnLeft.heightAnchor.constraint(equalToConstant: 44).isActive = true
btnLeft.widthAnchor.constraint(equalToConstant: 100).isActive = true
btnRight.heightAnchor.constraint(equalToConstant: 44).isActive = true
btnRight.widthAnchor.constraint(equalToConstant: 100).isActive = true
// don't forget to add targets!
btnLeft.addTarget(self, action: #selector(leftButtonSelector), for: .touchUpInside)
btnRight.addTarget(self, action: #selector(rightButtonSelector), for: .touchUpInside)
// make the result be a bar button
barBtnLeft = UIBarButtonItem(customView: btnLeft)
barBtnRight = UIBarButtonItem(customView: btnRight)
// add them to the navigation bar
navItems.leftBarButtonItems = [barBtnLeft]
navItems.rightBarButtonItems = [barBtnRight]
navBar.setItems([navItems], animated: false)
navBar.translatesAutoresizingMaskIntoConstraints = false
// add the label and navigation bar to your view
view.addSubview(userName)
view.addSubview(navBar)
// finally, lay the user name above the navigation bar
userName.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
userName.heightAnchor.constraint(equalToConstant: 44).isActive = true
userName.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor).isActive = true
userName.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor).isActive = true
navBar.topAnchor.constraint(equalTo: userName.bottomAnchor).isActive = true
navBar.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor).isActive = true
navBar.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor).isActive = true