TL;DR? Code for part 1

Architecture

Before jumping into the code, let’s think about how we are going to structure our views and controllers to make this happen. In this guide, I am going to use 3 view controllers. They are:

  • MenuViewController : This will be a subclass of UITableViewController. Its job is to display the available menu options.

  • MainViewController : This will be a normal UIViewController that will be switched in/out depending on what is selected on the menu. I am going to also embed this view controller inside UINavigationController.

  • ContainerViewController : This will be the controller that holds both MenuViewController and MainViewController

The ContainerViewController will be the one handling the swipe left and right gesture. It will have 2 IBAction functions that will animate the menu view.

Let’s start coding. Open XCode and create a Single View Application project.

ContainerViewController

Our entry point for this app is going to be the ContainerViewController. This view controller will hold references to the menu and the currently displayed view controller. When user swipes left/right, this view controller will animate the displaying and hiding of the menu.

In viewDidLoad, take a look at how MenuViewController and the navigation controller of MainViewController get loaded and assigned to leftViewController and rightViewController respectively.

Take not of the @IBAction functions. We will need to attach them in the storyboard later.

import UIKit

class ContainerViewController: UIViewController {
    var leftViewController: UIViewController? {
        willSet{
            if self.leftViewController != nil {
                if self.leftViewController!.view != nil {
                    self.leftViewController!.view!.removeFromSuperview()
                }
                self.leftViewController!.removeFromParentViewController()
            }
        }
        
        didSet{
            
            self.view!.addSubview(self.leftViewController!.view)
            self.addChildViewController(self.leftViewController!)
        }
    }
    
    var rightViewController: UIViewController? {
        willSet {
            if self.rightViewController != nil {
                if self.rightViewController!.view != nil {
                    self.rightViewController!.view!.removeFromSuperview()
                }
                self.rightViewController!.removeFromParentViewController()
            }
        }
        
        didSet{
            
            self.view!.addSubview(self.rightViewController!.view)
            self.addChildViewController(self.rightViewController!)
        }
    }
    
    var menuShown: Bool = false
    
    @IBAction func swipeRight(sender: UISwipeGestureRecognizer) {
        showMenu()
        
    }
    @IBAction func swipeLeft(sender: UISwipeGestureRecognizer) {
        hideMenu()
    }
    
    func showMenu() {
        UIView.animateWithDuration(0.3, animations: {
            self.rightViewController!.view.frame = CGRect(x: self.view.frame.origin.x + 235, y: self.view.frame.origin.y, width: self.view.frame.width, height: self.view.frame.height)
            }, completion: { (Bool) -> Void in
                self.menuShown = true
        })
    }
    
    func hideMenu() {
        UIView.animateWithDuration(0.3, animations: {
            self.rightViewController!.view.frame = CGRect(x: 0, y: self.view.frame.origin.y, width: self.view.frame.width, height: self.view.frame.height)
            }, completion: { (Bool) -> Void in
                self.menuShown = false
        })
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let storyboard = UIStoryboard(name: "Main", bundle: nil)
        let mainNavigationController: UINavigationController = storyboard.instantiateViewControllerWithIdentifier("MainNavigationController") as! UINavigationController
        let menuViewController: MenuViewController = storyboard.instantiateViewControllerWithIdentifier("MenuViewController")as! MenuViewController
        
        self.leftViewController = menuViewController
        self.rightViewController = mainNavigationController
    }
}

Storyboarding

ContainerViewController

The ContainerViewController will just be an empty UIViewController. Drag UIViewController in Main.storyboard.

For hiding and showing menu, add Swipe Gesture Recognizer for each left and right swipe (you can change the direction in the Attribute Inspector) and set the sent action to the appropriate @IBAction in ContainerViewController.

img

Under Identity Inspector, set the Custom Class of this view controller to ContainerViewController.

img

Our menu will just be a custom UITableViewController with a finite number of rows. You can achieve this by setting the table view’s content as Static Cells. You can find this setting under the Table View’s Attributes Inspector.

img

For this guide, I am going to have 3 menu items. To do this, select Table View Section under Table View and, under its Attributes Inspector, set the Rows value to 3. Once you have done this, you can add UILabel inside the cell’s content view.

img

Set the Custom Class and Storyboard ID of this view controller to MenuViewController. We have to set the Storyboard ID because we want to be able to load a reference to this view controller from storyboard (look at ContainerViewController’s viewDidLoad).

img

MainViewController

For this, just drag and drop a new View Controller and set its Custom Class and Storyboard ID to MainViewController

Part 1 Done

That’s it. You now should be able to build and run the app. The menu should slide in/out when you swipe. You can checkout the code for part 1 here.

Go To Part 2

Simple Slide Out Navigation Menu in iOS with Swift (Part 2)

Continuing from part 1, we are going to see how to switch the displayed view controller when one of the menu selections is tapped Continue reading

Subdomain with NGINX on Linode

Published on January 14, 2015

Uh-oh. Where Is On Ready In Ember?

Published on January 05, 2015