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:
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 thescrollview
. Containers allow you to embed top level controllers. - On the
scrollview
, setpaging enabled
but disablebounces
. This will coerce the slideout into an open or closed state -
embed
aUITableViewController
in the left container -
embed
aUITabBarController
in the right container - On the right
container
, add a runtime attributelayer.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 thescrollview
- 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.
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:
- You open the slideout menu as a modal.
- 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. - You create Pan Gesture Recognizers to present/dismiss the modal interactively.
- You wire the Pan Gesture events to a
UIPercentDrivenInteractiveTransition
object to keep the transition in sync with the user's movements. - 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)
}