Left side menu (Navigation Drawer) example with Swift

In this video I am going to show you how to create a left side navigation menu which is also some times called “Navigation Drawer”. Navigation drawer is a very popular design pattern used in modern mobile apps and I am sure you have come across so many times.

Navigation drawer is a panel that transitions in from the left edge of the screen and displays the app’s main navigation options. User can bring in left side navigation menu by tapping on the menu button in the left top corner or by swiping from the left edge of the screen.

I am a big fan of code re-use and I like to collect into by developer toolbox, good open source projects which I can quickly re-use in my work to speed up the development process. One of such ready to use open source projects is “MMDrawerController” which can be easily integrated into your iOS app and let you have left & right side navigation menu literally in few minutes.

Let me show you how to do it.

VIDEO #1

Source code I typed in this video:

var window: UIWindow?
var centerContainer: MMDrawerController?func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
// Override point for customization after application launch.var rootViewController = self.window!.rootViewControllerlet mainStoryboard: UIStoryboard = UIStoryboard(name: "Main", bundle: nil)

var centerViewController = mainStoryboard.instantiateViewControllerWithIdentifier("ViewController") as ViewController

var leftViewController = mainStoryboard.instantiateViewControllerWithIdentifier("LeftSideViewController") as LeftSideViewController

var rightViewController = mainStoryboard.instantiateViewControllerWithIdentifier("RightSideViewController") as RightSideViewController

var leftSideNav = UINavigationController(rootViewController: leftViewController)
var centerNav = UINavigationController(rootViewController: centerViewController)
var rightNav = UINavigationController(rootViewController: rightViewController)

centerContainer = MMDrawerController(centerViewController: centerNav, leftDrawerViewController: leftSideNav,rightDrawerViewController:rightNav)

centerContainer!.openDrawerGestureModeMask = MMOpenDrawerGestureMode.PanningCenterView;
centerContainer!.closeDrawerGestureModeMask = MMCloseDrawerGestureMode.PanningCenterView;

window!.rootViewController = centerContainer
window!.makeKeyAndVisible()

return true
}

 

VIDEO #2

Source code I typed in this video:

import UIKit

class LeftSideViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

var menuItems:[String] = ["Main","About"];

    override func viewWillAppear(animated: Bool) {
        super.viewWillAppear(true)
        self.navigationController?.view.layoutSubviews()
    }

override func viewDidLoad() {
super.viewDidLoad()

// Do any additional setup after loading the view.
}

override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}

func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int
{
return menuItems.count;

}

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell

{
var mycell = tableView.dequeueReusableCellWithIdentifier("MyCell", forIndexPath: indexPath) as MyCustomTableViewCell

mycell.menuItemLabel.text = menuItems[indexPath.row]

return mycell;

}

func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath)
{

switch(indexPath.row)
{

case 0:

var centerViewController = self.storyboard?.instantiateViewControllerWithIdentifier("ViewController") as ViewController

var centerNavController = UINavigationController(rootViewController: centerViewController)

var appDelegate:AppDelegate = UIApplication.sharedApplication().delegate as AppDelegate

appDelegate.centerContainer!.centerViewController = centerNavController
appDelegate.centerContainer!.toggleDrawerSide(MMDrawerSide.Left, animated: true, completion: nil)

break;

case 1:

var aboutViewController = self.storyboard?.instantiateViewControllerWithIdentifier("AboutViewController") as AboutViewController

var aboutNavController = UINavigationController(rootViewController: aboutViewController)

var appDelegate:AppDelegate = UIApplication.sharedApplication().delegate as AppDelegate

appDelegate.centerContainer!.centerViewController = aboutNavController
appDelegate.centerContainer!.toggleDrawerSide(MMDrawerSide.Left, animated: true, completion: nil)

break;

default:

println("\(menuItems[indexPath.row]) is selected");

}

}

}

 


Learn iOS Development with these Video Courses

The Complete iOS 11 & Swift Developer Course - Build 20 Apps

Use Xcode 9 & Swift 4 to make real apps like Uber and Instagram, with CoreML & ARKit. Includes AWS Credit and much more. Preview this video course. icon

How to Make a Freaking iPhone App - iOS 11 and Swift 4

iPhone App Development from scratch. Learn how to make iOS apps using Xcode 9. The Basics Include Pokemon Go & Snapchat. Learn to build iOS Apps with Xcode 9 and Swift 4. How to Make a Freaking iPhone App - iOS 11 and Swift 4 icon

iOS 11 and Xcode 9 - Complete Swift 4 & Objective-C Course

A Complete iOS 11 and Xcode 9 Course with Swift 4 & Objective-C. Preview this video course. iOS 11 and Xcode 9 - Complete Swift 4 & Objective-C Course icon