How to create a custom navigation bar in Swift Xcode? - ios

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)
}