Custom Navigation Bar: Swift 4.2

Overview

Hello iOS Developer, we all want our custom module which helps us dynamically and in easy of implementing with our purpose. Here image, show what we going to learn in this tutorial.

Custom Navigation Bar: Swift 4.2

As you can see over here there are two labels and one image view with the image of the drop-down arrow. Here two labels are stack in the vertical stack view and image view and vertical stack view will be stack in horizontal stack view. At last, we are going to add a target to handle tap event on title view.

I'm assuming that you are familiar with project setup. Open Storyboard, an embed navigation controller to view controller. Create a new swift named it "NavigationTitleViewDropdown". Now here we are going to create a class with the same name as a swift file, a superclass will be UIButton because we required tap event handling.

Now we are going to create some variables. First one is label title a compute variable here we are going to change some property values as per our need.
The translatesAutoresizingMaskIntoConstraints we need to make false because further, we are going to give runtime constraints and going to change some property too.

Thus the same goes for label subtitle with some minor modification.
Those both variable are to going to subviews in vertical stack view, so now creating vertical stack view. In here make sure "isUserInteractionEnabled" should be false, by default is stated as true and some minor property modification.
Creating a new extension of this class. This extension use for UI Related Methods. Here we going to create a method call prepare UIView.
This method will be going to call from override init method below the super init initialize with a frame.
Therefore we need to add two above label as subviews in vertical stack-view and adding vertical stack-view in a class subview and giving constraint according to it.

For adding subviews we are going to create the method of it. In this gone add all subview.
Same goes for the constraint related, creating a new method of it and giving center, height and width constraint runtime to vertical stack-view.
Thus call both methods in preparing UIView.
After that creating configuration method which will set title and subtitle.
Now jump to the ViewController class. Create a variable of NavigationTitleViewDropdown with initialization.
Therefore we need to prepare a navigation bar, going to create a separate method for it. In this adding target method where we can handle tap event of navigation bar title view. For this tutorial purpose, I'm going to print just "Navigation bar title view pressed". Configuring the title and sub-title and adding our custom navigation title-view to navigation item title-view.

Run the application, go and press title-view. It will print statement in the console. Only a couple of thing is left to do over here. Adding drop-down arrow image and high-lighting title-view.

For adding the image drop-down we need to create a variable of it.
This variable will be going to adding into horizontal stack-view.

Before running the application we need to add vertical stack-view and image-view into horizontal stack-view, also adding horizontal stack-view into class sub-view.
At last just the constraint to horizontal stack-view from vertical stack-view.

Run the application, we added image drop-down successfully also we with handling the tap event of title-view. Full Code with highlighting navigation bar tap.

Full Video:

Feel free to comment and sharing.