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?

Solution

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.

Comments

[Caspert]

So if I understand it correctly. I should create the avatar and message bubble correctly in my Xib file, than add above code in the viewDidAppear function? What should subview be?

[Tj3n]

The subview is the view you want to add, in this case its your helperView. You can add the above code in viewDidLoad, but keep the pointer variable to your helperView to resize the frame in viewDidLayoutSubview

[Caspert]

Okay, and what do you mean with the last part about the pointer variable? Do you mean that it's frame should be resizable to it's content?

[Tj3n]

What i meant is that if you add this code in viewDidAppear it might have a flickering appear, add in viewDidLoad then it might have wrong frame, thats why you might want to declare the headerView in your view controller scope to change its frame in viewDidLayoutSubview

[Caspert]

So the best way to add above code is in de viewdidLayoutSubview function? Sorry if I understand it wrong.

[Tj3n]

Add it in viewDidLoad, but change the frame of headerView in viewDidLayoutSubview

[Cristik]

Can you add some details on how to use this code? Where should those methods be placed, do we need to manually call them from a certain location/place?

[Zeel Patel]

Add this code into ViewController class but out of viewdidload and call the function in viewdidload.