How to Create iOS Slide Out Menu Navigation Just Like The Facebook

0
Shares
How to Create iOS Slide Out Menu Navigation Just Like The Facebook
1.9 (37.14%) 7 votes

Since the Facebook first introduced iOS Slide out menu design in their iPhone app, it became a standard for mobile apps to integrate the same navigation sidebar. This slide-out navigation sidebar allows developers to add a permanent navigation menubar in their iOS app without taking the screen real estate.

Generally, the iOS slide out menu is hidden behind the front view, but the users can reveal this iOS slide out menu at any time, while still watching the their current context. The sidebar navigation menu can be triggered in two ways. One by tapping on the list button in the upper corner and the other is by simply swiping right on the content area.

You can also read our article on Building A Sliding Drawer Menu Just Like Facebook Using Navigation Drawer Android.

In this iOS app tutorial, we’re going to show how to build the navigation sidebar menu from ground up.

Let’s Get Started

Create a new project under file menu and select “Single View Application”.

slidemenu1

in the next tab, fill the textfields and click on finish.

slidemenu2

now add a MenuVC.swift (UIViewController) and add ViewController in Main.Storyboard.

Set Segue “Present Modally” from ViewController to MenuVC and set identifier “OpenMenu”

slidemenu3

Add a animation class “Animation.swift” which contain UIViewControllerAnimatedTransitioning which perform the animation transition between UIViewController.

class Animation: NSObject, UIViewControllerAnimatedTransitioning {

 

let isPresenting :Bool

let duration :NSTimeInterval = 0.5

 

let menuWidth : CGFloat = 0.76

let percentThreshold:CGFloat = 0.35

let viewTag = 007

 

init(isPresenting: Bool) {

self.isPresenting = isPresenting

super.init()

}

 

 

// ---- UIViewControllerAnimatedTransitioning methods

 

func transitionDuration(transitionContext: UIViewControllerContextTransitioning?) -> NSTimeInterval {

return self.duration

}

 

func animateTransition(transitionContext: UIViewControllerContextTransitioning)  {

if isPresenting {

animatePresentationWithTransitionContext(transitionContext)

}

else {

animateDismissalWithTransitionContext(transitionContext)

}

}

 

 

// ---- Helper methods

 

func animatePresentationWithTransitionContext(transitionContext: UIViewControllerContextTransitioning) {

guard

let fromVC = transitionContext.viewControllerForKey(UITransitionContextFromViewControllerKey),

let toVC = transitionContext.viewControllerForKey(UITransitionContextToViewControllerKey),

let containerView = transitionContext.containerView()

else {

return

}

containerView.insertSubview(toVC.view, belowSubview: fromVC.view)

 

// replace main view with snapshot

let snapshot = fromVC.view.snapshotViewAfterScreenUpdates(false)

snapshot.tag = viewTag

snapshot.userInteractionEnabled = false

snapshot.layer.shadowOpacity = 1.0

containerView.insertSubview(snapshot, aboveSubview: toVC.view)

fromVC.view.hidden = true

 

UIView.animateWithDuration(

transitionDuration(transitionContext),

animations: {

snapshot.center.x += UIScreen.mainScreen().bounds.width * self.menuWidth

},

completion: { _ in

fromVC.view.hidden = false

transitionContext.completeTransition(!transitionContext.transitionWasCancelled())

}

)

}

 

func animateDismissalWithTransitionContext(transitionContext: UIViewControllerContextTransitioning) {

guard

let fromVC = transitionContext.viewControllerForKey(UITransitionContextFromViewControllerKey),

let toVC = transitionContext.viewControllerForKey(UITransitionContextToViewControllerKey),

let containerView = transitionContext.containerView()

else {

return

}

let snapshot = containerView.viewWithTag(viewTag)

 

UIView.animateWithDuration(

transitionDuration(transitionContext),

animations: {

snapshot?.frame = CGRect(origin: CGPoint.zero, size: UIScreen.mainScreen().bounds.size)

},

completion: { _ in

let didTransitionComplete = !transitionContext.transitionWasCancelled()

if didTransitionComplete {

containerView.insertSubview(toVC.view, aboveSubview: fromVC.view)

snapshot?.removeFromSuperview()

}

transitionContext.completeTransition(didTransitionComplete)

}

)

}

}

Now we’ll load the menu options in MenuVC.swift in UITableView

func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {

return 44

}

 

//MARK: UITableViewDataSource

 

func numberOfSectionsInTableView(tableView: UITableView) -> Int {

return 1

}

 

func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

return 3

}

 

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

let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath)

cell.textLabel?.text = "Index \(indexPath.row)"

return cell

}

Next, create Delegate to call Segue in MenuVC.swift

protocol MenuDelegate {

func openSegue(segueName: String, sender: AnyObject?)

func openMenu()

}

 

extension MenuVC : MenuDelegate {

func openSegue(segueName: String, sender: AnyObject?) {

dismissViewControllerAnimated(true){

 

}

}

func openMenu(){

performSegueWithIdentifier("openMenu", sender: nil)

}

}

Now in “ViewController.swift” set IBAction of “Menu” button

@IBAction func actionMenu(sender: AnyObject) {

performSegueWithIdentifier("openMenu", sender: nil)

}

Set delegate of UIViewControllerTransitioning

extension ViewController: UIViewControllerTransitioningDelegate {
    func animationControllerForPresentedController(presented: UIViewController, presentingController presenting: UIViewController, sourceController source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
        return Animation(isPresenting: true)
    }
    
    func animationControllerForDismissedController(dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
        return Animation(isPresenting: false)
    }
    
    func interactionControllerForDismissal(animator: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning? {
        return nil
    }
    
    func interactionControllerForPresentation(animator: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning? {
        return nil
    }
}

Now when you click on “Menu” button then Menu will be open with options like below:

Now if followed all the above steps exactly, you can run your app to check the iOS slide out menu. And if you face any problem, you can contact our developers for help.

There is also another way to create a slide out menu which can be achieved with a pre-built library. But if you prefer the DIY solution, then it is recommended to hire iPhone app developer from us to help you implement this feature in your mobile app.

Grab a free copy of Sidebar navigation menu demo from Github.

 
0
Shares
 

Want to Develop Customized iOS App? Contact Us Now