How to Implement a Side Menu Step-by-Step in Swift 5
Using an open-source SideMenu framework
Since a side menu has become one of the most popular UI elements in iOS apps, now the problem was to find the least time-consuming method of implementation.
Luckily, GitHub has a perfect option that can fulfill all the needs of developers. I would like to introduce SideMenu framework that makes it very easy to add this UI element in your own apps.
Installation
Basically, there are two ways of installing SideMenu:
For this tutorial we will do it using CocoaPods:
- Open the Terminal and navigate to your project’s root directory.
- Run
pod initcommand in the Terminal. - Open the generated Podfile in the Xcode:
open Podfile -a Xcode - Add the following line under
# Pods for ‘YOUR PROJECT NAME’:
pod ‘SideMenu’
5. Run pod install command in the Terminal.
From now, you should open an .xcworkspace file instead of .xcodeproj . That’s it! Now you are ready to start!
Usage
Storyboard implementation
Create a UINavigationController for a side menu. Go to Xcode’s Editor mode where you will find Embed In -> Navigation Controller :
2. Set the class as SideMenuNavigationController :
3. In Simulated Metrics module set Left Side to On if you want it to appear from the left side of the screen. In the Off/Default case it will appear from the right side. In addition, assign Menu Width to whatever size you want your appearing SideMenu would be. By default, it covers the 0.7 of the screen.
By the way, all manipulations with SideMenu could be found in Simulated Metrics module. Play around to find the best option for you.
4. Add a UIButton or UIBarButton to the view controller that you want to display the menu from. Set that button’s Triggered Segues action to modally present the Navigation Controller from Step 2
Code implementation
First, import SideMenu
SideMenuNavigationController is a subclass of UINavigationController, therefore, all configurational manipulations should be written in the button.
Second, assign the menu in the button:
let menu = SideMenuNavigationController(rootViewController: YourViewController)present(menu, animated: true, completion: nil)
In case with storyboards, we will need to use the following:
let menu = storyboard!.instantiateViewController(withIdentifier: "RightMenu") as! SideMenuNavigationControllerThird, dismiss the defined menu:
dismiss(animated: true, completion: nil)Customization
SideMenuManager
To use gestures we have to use the SideMenuManager. Gestures are written in the AppDelegate.swift
Defining the menu
Setup gestures: the left and/or right menus must be set up for these to work.
SideMenuNavigationController
SideMenuNavigationController supports the following:
Wrapping Up
This is all you should know about Side Menu. I hope you found it interesting!
If you want to learn more, check out the framework’s GitHub repo.
Interested in other relative topics? Feel free to visit my other relevant articles:
If you have any criticisms, questions, or suggestions, feel free to post them in the comments section below!
Thanks for reading.
