A customizable, interactive, auto expanding and collapsing side menu for iOS written in Swift.
Here are some of the ways Interactive Side Menu can be customized:
You can find more details into CONTRIBUTING file.
To install using CocoaPods, add the following line to your Podfile:
pod 'InteractiveSideMenu'
Please, don't forget to run pod update
command to update your local specs repository during migration from one version to another.
To install using Carthage, add the following line to your Cartfile:
github "handsomecode/InteractiveSideMenu"
To implement your side menu you should subclasses the following view controllers: MenuContainerViewController
and MenuViewController
MenuContainerViewController
is the main container that hosts the side menu and content controllerMenuViewController
is the container controller for the side menuTo add a new menu item, your view controller needs to conform to the SideMenuItemContent
protocol.
Setting up the side menu can be done in three steps:
MenuContainerViewController
subclass and Menu = MenuViewController
subclassmenuViewController
property of HostcontentViewControllers
array with an array of SideMenuItemContent
controllersselectContentViewController(_ selectedContentVC: MenuItemContentViewController)
from Hostimport InteractiveSideMenu
class HostViewController: MenuContainerViewController {
override func viewDidLoad() {
super.viewDidLoad()
menuViewController = self.storyboard!.instantiateViewController(withIdentifier: "NavigationMenu") as! MenuViewController
contentViewControllers = contentControllers()
selectContentViewController(contentViewControllers.first!)
}
private func contentControllers() -> [MenuItemContentViewController] {
var contentList = [MenuItemContentViewController]()
contentList.append(self.storyboard?.instantiateViewController(withIdentifier: "First") as! MenuItemContentViewController)
contentList.append(self.storyboard?.instantiateViewController(withIdentifier: "Second") as! MenuItemContentViewController)
return contentList
}
}
To show menu, call showSideMenu()
from any SideMenuItemContent
controller.
import InteractiveSideMenu
class KittyViewController: UIViewController, SideMenuItemContent {
@IBAction func openMenu(_ sender: UIButton) {
showSideMenu()
}
}
To change the currently visible controller, pass the desired controller to your MenuContainerViewController
:
let index = 2 // Second menu item
guard let menuContainerViewController = self.menuContainerViewController else { return }
let contentController = menuContainerViewController.contentViewControllers[index]
menuContainerViewController.selectContentViewController(contentController)
menuContainerViewController.hideSideMenu()
To use menu with TabBar or NavigationController, ensure that you indicate UITabBarController or UINavigationController as item content directly, not any corresponding ViewControllers.
class NavigationViewController: UINavigationController, SideMenuItemContent {
}
class InnerViewController: UIViewController {
@IBAction func openMenu(_ sender: Any) {
if let navigationViewController = self.navigationController as? SideMenuItemContent {
navigationViewController.showSideMenu()
}
}
}
Please, find UITabBarController implementation details in Sample.
To customize the open and close animations, update the transitionOptions
property on your MenuContainerViewColtroller
subclass. The sample project does this in viewDidLoad()
override func viewDidLoad() {
super.viewDidLoad()
let screenSize: CGRect = UIScreen.main.bounds
self.transitionOptions = TransitionOptions(duration: 0.4, visibleContentWidth: screenSize.width / 6)
...
}
To customize transition options for different orientations, override viewWillTransition(to:with:)
and update the transitionOptions
. This can also be done with trait collections using traitCollectionDidChange(_:)
override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
super.viewWillTransition(to: size, with: coordinator)
var options = TransitionOptions()
options.duration = size.width < size.height ? 0.4 : 0.6
options.visibleContentWidth = size.width / 6
self.transitionOptions = options
}
Check out the Sample project for more details and usage examples.
There is an issue associated with the content controller's view not properly having the safeAreaInsets
set. This causes the view's layout to shift when the side menu is closed. The issue appears to be tied to the transition options contentScale
setting. Choosing a value in the range 0.87 - 0.91 causes the safeAreaInsets.top
to be set to 0.0
. The default value of the library is no longer within this range but be mindful if changing that value for your own application.
InteractiveSideMenu is available under the Apache License, Version 2.0. See the LICENSE file for more info.