How to Implement a Left Side Menu Navigation Using Third Party Libraries?

Let’s imagine I am building an iOS app that contains four features located at the bottom of the screen.  For the base navigation, I start with the native iOS UITabBarController:

However, as I decide to add more functionality, I quickly realize that adding additional tabs to the navigation bar at the bottom will hide their names and make them harder to access.  

As a result, I need a different navigation approach that will give me access to a larger number of tabs while still maintaining a familiar and intuitive user interface.   My first idea is to use a navigational structure based on the old-fashioned left-side menu with the “hamburger” icon.   

However, in the native iOS UI library ( UIKit ), this option doesn’t exist.  I am faced with the dilemma of either implementing the functionality myself or finding another solution.   My preference is usually to create the functionality myself, but in this case, I don’t want to spend time implementing features that are not part of the app’s main functionality.  So I decide to search for a well-made library that could fit my needs.

My first step is to list my requirements:

1. 1. A menu should appear on the left side of the screen once the user taps on the “hamburger” button at the top left of the screen.
   2. I should be able to customize this menu as well as the “hamburger” button.
   3. The menu should work similarly to our TabBarController.
   4. The menu should be accessible from any place in the app by swiping right.
   5. The integration of this menu should not take too much time, nor cause the whole project to be refactored.

Now that I’ve defined my requirements for the third party library, I can search for it.  But where should I start?  And how will I be able to integrate it into my project?

Several years ago, I discovered that downloading a library could cause a number of problems:

1. 1. • The downloaded library could require additional libraries, called dependencies, which must also be downloaded and then manually added to the project.
      • Keeping track of the library version and its dependencies was difficult at times.
      • No centrally located list of all available libraries existed, so I had to search Github and the Web for hours to find what I needed.

Now, however, I can use CocoaPods: A dependency manager for Swift and Objective-C Cocoa projects.  It solves all these common problems by handling the library’s dependencies, downloading them, and maintaining the project’s structure. Since its release in 2011, CocoaPods has become one the most powerful dependency managers for iOS programing.  It currently contains over 19,000 libraries that can be easily searched on its website.  

So, let’s go back to building our iOS app. After 30 minutes of searching, I find a pod called “HamburgerMenu” that fits my requirements perfectly:

1. 1. • A left-side menu is implemented as a subclass of UITabBarController.  By default, this will behave as a Tab Bar Controller in any way I wish.
      • This pod allows us to use our custom view with its .xib interface file. The only requirement is that it should subclass MenuView class from this pod.
      • This pod provides action “toggle” that opens and hides the menu no matter where it was triggered. I can easily connect this action to a swipe gesture. However, this pod doesn’t allow the menu to be opened anywhere by using a swipe move.  

After I install CocoaPods, I simply create a file named “Podfile” in my project folder and then add the following text to it:

source ‘https://github.com/CocoaPods/Specs.git’

use_frameworks!

pod “HamburgerMenu”

When I perform the run command “pod install” in terminal, it automatically fetches all the pod’s dependencies, creates a “Pods” project, and connects it to the base one in my “projectname.xcworkspace” file. From this moment, .xcworkspace becomes my main project file, and all contents of added pods become available to import into my project.

Once the pod is successfully added to my project, I can use it instead of my UITabBarController. I can simply select the Tab Bar Controller in the storyboard file and then set its custom class in the identity inspector to “MenuController.”

Voila! I now have my “hamburger left menu” instead of the standard Tab Bar Controller as my base navigation.

I can now continue to customize it to suit my needs.  For example, I can create a UIViewController subclass “BaseViewController” with the following code:

import UIKit
import HamburgerMenu

class BaseViewController: UIViewController {

  override func viewDidLoad() {
      super.viewDidLoad()
      let swipe = UISwipeGestureRecognizer(target: self, action: #selector(BaseViewController.showMenu))
      swipe.direction = .Right
      self.view.addGestureRecognizer(swipe)
  }

  func showMenu() {
      if let menuController = self.tabBarController as? HamburgerMenu.MenuController {
          menuController.menu.toggle(true)
      }
  }

}

Next, I can set this subclass as the base class for all our view controllers in order to enable opening the left menu with a swipe move from any place in the app.

Lastly, I can create a custom view with the .xib interface file and set it as the main menu view in our MenuController right in its attributes inspector in the storyboard file.

The entire process of finding a suitable pod using Cocoapods.org took me about 40 minutes. I spent an additional 90 minutes integrating and customizing it into my project.  The end result is a fully functional, good-looking left side menu that took less time than attempting to implement it on my own.