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");

}

}

}

 

[raw_html_snippet id=”cookbookpagecoursesheader”]

Unit Testing Swift Mobile App

Apply Test-Driven Development(TDD) process to iOS mobile app development in Swift Preview this video course.