Overview
The BBSlideoutMenu was designed to make it extremely simple to have beautiful menus that could be customized for every project. The goal was to create a one-size-fits-all solution to slide out menus while avoiding the complexity of segue based solutions.
- Connector.Connector.
Beautiful
A clean, professional look that doesn’t get in the way. With enough customization to fit any project
- Connector.Connector.
Simple
Simple to implement with a single line of code. Oh, and no pesky segues either.
- Connector.Connector.
Fast
Smooth and snappy animation to keep up with your users
Xcode 7 required!
Installation
BBSlideoutMenu is available through CocoaPods, to install simply add the following line to your Podfile.
Don’t have CocoaPods installed? Click here
|
1 |
pod 'BBSlideoutMenu' |
If you don’t use CocoaPods you can download the project using the link on the right. Import the BBSlideoutMenu.swift class found at /BBSlideoutMenu-master/Pod/Classes
Get the Source Code
Includes the sample project!
Setup
They are Videos!
Tap to play!BBSlideoutMenu leverages the scene dock to make it easy to get up and running without the need for a lot of setup. This is a new feature in Xcode 7 and quite a good one at that.
Drag a UIView to the SceneDockSimply drag a new UIView into the Scene Dock of the view controller you want the menu to show up in.
Need to use the same menu in multiple places?
You can create your menu view as a xib instead!Simply change the custom class of the new UIView to BBSlideoutMenu. This will do all the heavy lifting for you, and all you had to do was type in the name!
Change the UIView class to BBSlideoutMenu
A pretty simple, but important, step
Code time!
Import the class; Connect the UIView
Import the BBSlideoutMenu class and connect an outlet for the UIView to your view controller. In this example my view controller is call MyViewController.
Here’s the hard part so I hope you are paying attention! To setup the slideout menu you have to call the view’s function setupEdgePan. And… that’s pretty much it.
Call setupEdgePan()
Crash Alert!
Be sure to call setupEdgePan() in, or after, viewDidAppear!See it in action
Run the project and swipe left starting from the right edge of the screen. I changed the background color of the slide out menu so we can see what’s happening. For the small amount of work we did we have a pretty solid effect. This is the out-of-the-box configuration but it doesn’t stop there. Next we will explore adding your own content to the menu and the ways you can customize it.
MyViewController
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import UIKit import BBSlideoutMenu class MyViewController: UIViewController { @IBOutlet var slideoutMenu: BBSlideoutMenu! override func viewDidAppear(animated: Bool) { super.viewDidAppear(animated); slideoutMenu.setupEdgePan() } } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
#import "MyViewController.h" @import BBSlideoutMenu; @interface MyViewController () @property (strong, nonatomic) IBOutlet BBSlideoutMenu *slideoutMenu; @end @implementation MyViewController - (void)viewDidAppear:(BOOL)animated { [super viewDidAppear:animated]; [self.slideoutMenu setupEdgePan]; } @end |
The Next Steps
Adding Functionality
Because the view lives in MyViewController’s Scene Dock, you can connect any outlets directly to MyViewController
Add an element
Connect IBAction / Outlet
Write code
More coming soon
API
Properties
Direction Enum:
.Left
.Right
Minimum 0.1
Functions
|
1 |
presentSlideMenu(animate: Bool?, didPresentMenu: (() -> Void)?) |
A manual call to present the slide out menu
– animate: A Bool that specifies whether to animate the transition
– didPresentMenu: Calls when the animation is completed, Pass nil to ignore callback
|
1 |
dismissSlideMenu(animated animated: Bool, time: Double?) |
Manually dismiss the slide menu
– animated: A Bool that specifies whether to animate the transition
– time: Time in seconds the animation will take. Pass nil to use default value setup in storyboard