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.

	/// Variable Declaration(s)
	var lblTitle: UILabel = {
	var lbl: UILabel = UILabel()
	lbl.translatesAutoresizingMaskIntoConstraints = false
	lbl.backgroundColor = .clear
	lbl.textAlignment = .center
	lbl.adjustsFontSizeToFitWidth = true
	lbl.minimumScaleFactor = 0.75
	lbl.textColor = .darkText
	lbl.font = .boldSystemFont(ofSize: UIFont.systemFontSize)
	return lbl
	}()

view raw Label Title hosted with ❤ by GitHub

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.

	var lblSubTitle: UILabel = {
	var lbl: UILabel = UILabel()
	lbl.translatesAutoresizingMaskIntoConstraints = false
	lbl.backgroundColor = .clear
	lbl.textAlignment = .center
	lbl.adjustsFontSizeToFitWidth = true
	lbl.minimumScaleFactor = 0.75
	lbl.textColor = .darkGray
	lbl.font = .systemFont(ofSize: UIFont.smallSystemFontSize)
	return lbl
	}()

view raw Label SubTitle hosted with ❤ by GitHub

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.

	fileprivate var verticalStackView: UIStackView = {
	let stackView: UIStackView = UIStackView()
	stackView.translatesAutoresizingMaskIntoConstraints = false
	stackView.isUserInteractionEnabled = false
	stackView.alignment = .center
	stackView.axis = .vertical
	stackView.distribution = .equalCentering
	return stackView
	}()

view raw Vertical StackView hosted with ❤ by GitHub

Creating a new extension of this class. This extension use for UI Related Methods. Here we going to create a method call prepare UIView.

	// MARK: - UI Related Method(s)
	extension NavigationTitleDropDownButton {
	fileprivate func prepareUIView() {
	}
	}

view raw UI Related Method(s) hosted with ❤ by GitHub

This method will be going to call from override init method below the super init initialize with a frame.

	override init(frame: CGRect) {
	super.init(frame: frame)
	/// Preparing UIView
	prepareUIView()
	}

view raw Override Init hosted with ❤ by GitHub

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.

	fileprivate func addSubView() {
	verticalStackView.addArrangedSubview(lblTitle)
	verticalStackView.addArrangedSubview(lblSubTitle)
	addSubview(verticalStackView)
	}

view raw Add SubView hosted with ❤ by GitHub

Same goes for the constraint related, creating a new method of it and giving center, height and width constraint runtime to vertical stack-view.

	fileprivate func prepareConstraintForHorizontalStackView() {
	verticalStackView.centerXAnchor.constraint(equalTo: centerXAnchor).isActive = true
	verticalStackView.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
	verticalStackView.widthAnchor.constraint(equalTo: widthAnchor, multiplier: 1).isActive = true
	verticalStackView.heightAnchor.constraint(equalTo: heightAnchor, multiplier: 1).isActive = true
	}

view raw Prepare Constraint For Horizontal StackView hosted with ❤ by GitHub

Thus call both methods in preparing UIView.

	fileprivate func prepareUIView() {
	/// Adding SubView(s)
	addSubView()
	/// Preparing constraint(s)
	prepareConstraintForHorizontalStackView()
	}

view raw Preparing UIView hosted with ❤ by GitHub

After that creating configuration method which will set title and subtitle.

	// MARK: - Configuartion Related Method(s)
	extension NavigationTitleDropDownButton {
	func configure(_ title: String, subTitle: String? = nil) {
	lblTitle.text = title
	lblSubTitle.text = subTitle
	lblSubTitle.isHidden = (subTitle?.isEmpty == true)
	}
	}

view raw Configuration Method hosted with ❤ by GitHub

Now jump to the ViewController class. Create a variable of NavigationTitleViewDropdown with initialization.

	/// Variable Declaration(s)
	var navigationButtonView: NavigationTitleDropDownButton = NavigationTitleDropDownButton()

view raw NavigationTitleDropDownButton Variable Declaration hosted with ❤ by GitHub

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.

	func prepareNavigationBar() {
	navigationButtonView.addTarget(self, action: #selector(handleNavigationTitleSelection(_:)), for: .touchUpInside)
	navigationButtonView.configure("Kevin Shah", subTitle: "iOS Developer")
	navigationItem.titleView = navigationButtonView
	}

view raw PrepareNavigationBar hosted with ❤ by GitHub

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.

	var imgVDropDown: UIImageView = {
	var imgV: UIImageView = UIImageView(image: UIImage(named: "ic_dropDown")?.withRenderingMode(.alwaysTemplate))
	imgV.tintColor = .blue
	return imgV
	}()

view raw ImageView DropDown hosted with ❤ by GitHub

This variable will be going to adding into horizontal stack-view.

	fileprivate var horizontalStackView: UIStackView = {
	let stackView: UIStackView = UIStackView()
	stackView.translatesAutoresizingMaskIntoConstraints = false
	stackView.isUserInteractionEnabled = false
	stackView.alignment = .center
	stackView.axis = .horizontal
	stackView.distribution = .equalCentering
	stackView.spacing = 4
	return stackView
	}()

view raw Horizontal StackView hosted with ❤ by GitHub

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.

	fileprivate func addSubView() {
	verticalStackView.addArrangedSubview(lblTitle)
	verticalStackView.addArrangedSubview(lblSubTitle)
	horizontalStackView.addArrangedSubview(verticalStackView)
	horizontalStackView.addArrangedSubview(imgVDropDown)
	addSubview(horizontalStackView)
	}

view raw AddSubView hosted with ❤ by GitHub

At last just the constraint to horizontal stack-view from vertical stack-view.

	fileprivate func addSubView() {
	verticalStackView.addArrangedSubview(lblTitle)
	verticalStackView.addArrangedSubview(lblSubTitle)
	horizontalStackView.addArrangedSubview(verticalStackView)
	horizontalStackView.addArrangedSubview(imgVDropDown)
	addSubview(horizontalStackView)
	}

view raw AddSubView hosted with ❤ by GitHub

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.