How to create a custom navigation bar in Swift Xcode?

Question

I am working on a chat app for my graduation project in iOS. I designed the following navigation bar:

Now I am trying to develop above graphic in my Xcode project, but I don't know if this is the correct way to achieve this and doesn't get it like the graphic.

I am using a xib file, that I load in my ViewController.swift using an instance of it. Than add it as the titleView of the navigationItem :

let helperView = HelperView()
navigationItem.titleView = helperView

This is the result of above code snippet:

The problem of this result is that it is overlapping the left bar button item and another problem, that I still doesn't figured out is, if the message bubble can have a dynamic height, when it have multiple lines (max is 3 lines).

Does anyone have experience with this kind of design within Xcode and is this the correct way to do this, or is there a better way to achieve this. Maybe a custom UINavigationController class?

Answer 1

Try create the whole navigation view that you desire, that mean the width is equal to the view, then try use this code to add it

    navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
    navigationController?.navigationBar.shadowImage = UIImage()
    navigationController?.navigationBar.backgroundColor = .clear

    navigationController?.view.insertSubview(subview, belowSubview: navigationController?.navigationBar)

It will makes your navigation bar become invisible but still showing the bar button

Update , by dimpiax

But better to override your UINavigationController class, and setup view in viewDidLoad

navigationBar.shadowImage = UIImage()
navigationBar.setBackgroundImage(UIImage(), for: .default)
navigationBar.backgroundColor = .clear

And on dependent viewController's view – show specific view.

Answer 2

// --------------------------------------------------------
// MARK:- Navigation SetUp
// --------------------------------------------------------

private func _navigationBarSetUp(){
    
    ///# Navigatoin bar and title #///
    
    navigationController?.navigationBar.isHidden = false
    navigationItem.title = vEditScreenName
    navigationController?.navigationBar.titleTextAttributes = [NSAttributedString.Key.foregroundColor : ColorTheme.white, NSAttributedString.Key.font: UIFont(descriptor: UIFontDescriptor(name: "Poppins-Regular", size: 20), size: 20)]
    self.view.backgroundColor = ColorTheme.vidBoomBrandPurple
    
    ///# Navigation bar back button #///
    
    let btnBack = UIButton(frame: CGRect(x: 0, y: 0, width: 25, height: 25))
    btnBack.setImage(UIImage(named: "icon_back_arrow"), for: .normal)
    btnBack.addTarget(self, action: #selector(_handlebtnBackTapped), for: .touchUpInside)
    navigationItem.leftBarButtonItem = UIBarButtonItem(customView: btnBack)
    
    ///# Navigation bar explore button #///
    
    let btnExport = UIButton(frame: CGRect(x: 0, y: 0, width: 80, height: 25))
    btnExport.setTitle("Export", for: .normal)
    btnExport.backgroundColor = .orange
    btnExport.layer.cornerRadius = 18
    btnExport.addTarget(self, action: #selector(_handleBtnExportTapped), for: .touchUpInside)
    navigationItem.rightBarButtonItem = UIBarButtonItem(customView: btnExport)
}


// --------------------------------------------------------
// MARK:- UIBarButtonItem Action
// --------------------------------------------------------

@objc fileprivate func _handlebtnBackTapped() {
    self.player.stop()
    navigationController?.popViewController(animated: true)
    navigationController?.navigationBar.isHidden = true
}

@objc func _handleBtnExportTapped(){
    self.player.stop()
    let svc = ShareVideoVC(nibName: "ShareVideoVC", bundle: nil)
    svc.videoString = videoString
    saveFile()
    self.navigationController?.pushViewController(svc, animated: true)
}