Slide Sidebar Menu IOS 8 Swift [closed]

I believe you can start form UISplitViewController which was drastically updated in iOS8. Watch sessions View Controller Advancements in iOS8 and Building Adaptive Apps with UIKit for details. They provide code example from second session (but not form first one :/). At this point it feels natural for me to make this kind of UI based on split view controller in iOS8.

Update: It looks like not all API they talking about are landed yet. In current beta4 mentioned in video condensesBarsOnSwipe is not presented, for example.


Update: Please consider using my updated answer rather than this one. There's a lot of edge cases with the Scrollview/Container View approach that can be avoided by using Custom View Controller Transitions instead.

I looked all over the place for a Swift menu solution that didn't require a library. Ended up creating a tutorial of my own, which is fairly similar to Fengson's approach:

enter image description here

Here are some of the main points:

  • Create a scrollview which will handle the menu sliding motion, along with the pan gesture
  • Put two container views side by side, inside the scrollview. Containers allow you to embed top level controllers.
  • On the scrollview, set paging enabled but disable bounces. This will coerce the slideout into an open or closed state
  • embed a UITableViewController in the left container
  • embed a UITabBarController in the right container
  • On the right container, add a runtime attribute layer.shadowOpacity of 0.8. This gives you a free shadow separator without any code.
  • Add a menu button. You can use NSNotificationCenter to communicate with the scrollview
  • For the secret ingredient: use scrollView.setContentOffset.x to take care of the actual opening and closing of the menu

Here's a working example project of a tab bar application with a left slideout menu, including screenshots and instructions.

https://github.com/ThornTechPublic/LeftSlideoutMenu

Along with a more generic explanation of how it works:

http://www.thorntech.com/2015/06/want-to-implement-a-slideout-menu-in-your-swift-app-heres-how/


I think using Custom View Controller Transitions is a solid approach for making slideout menus:

  • You can customize the animation.
  • The transition is interactive, so you can drag to progress forward and backward. The transition always finishes or rolls back, and never gets stuck in-between states.
  • You use Pan Gestures and Screen Edge Pan Gestures to drive the interaction. This means you can place them strategically to minimize conflict with horizontally gestured content.
  • You don't have to resort to Container Views. This means your app architecture is flatter, and you can use protocol-delegate instead of NSNotifications.
  • There's only one ViewController active at a time. Snapshots are used to give the illusion that there's a second VC on the screen.

interactive slide out animated GIF

Custom View Controller Transitions are difficult to learn at first (they were for me, at least). I wrote a blog post on how to create an interactive slideout menu, and tried my best to make it as easy to understand as possible.

You can also jump straight into the code on GitHub.

At a very high level, this is how it works:

  1. You open the slideout menu as a modal.
  2. You create custom animations for the present and dismiss transitions using the UIViewControllerAnimatedTransitioning protocol. You use a snapshot to represent the main view controller during animations.
  3. You create Pan Gesture Recognizers to present/dismiss the modal interactively.
  4. You wire the Pan Gesture events to a UIPercentDrivenInteractiveTransition object to keep the transition in sync with the user's movements.
  5. The presenting controller adopts the UIViewControllerTransitioningDelegate protocol and wires up all the custom animations and interactive transitions.

I actually have a previous answer on this thread that uses a Scrollview / Container View. This approach is OK for a prototype, but runs into a lot of edge cases and bugs when making your app production ready. Spending every week responding to blog comments and fixing edge cases is what motivated me to write a second blog post on the subject.


Slide side bar menus for iOS7 and iOS8, Swift coded.

If you want it at NavigationController level (it means, for al View controllers behind it):

https://github.com/evnaz/ENSwiftSideMenu

If you want it just in one ViewController:

Video: https://www.youtube.com/watch?v=qaLiZgUK2T0

Source-code: http://goo.gl/ULWxJh

In this case, for iOS7 compatibility, just add this "if" condition where the "Add blur view" comment is placed, like this:

if (NSClassFromString("UIVisualEffectView") != nil) {        
    // Add blur view
    let blurView:UIVisualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: UIBlurEffectStyle.Light))
    blurView.frame = sideBarContainerView.bounds
    sideBarContainerView.addSubview(blurView)
}