Setting Up SWRevealViewController
SWRevealViewController is a very well written iOS library by John Lluch.
It is a UI component popularly known as the hamburger menu that slides in the sidebar.
This post is all about my encounter with SWRevealViewController.
Using Hamburger Menu
I was once very against the use of the Hamburger Menu.
The hamburger is commonly placed on the top left corner, and that is where the thumb can’t reach on an iPhone.
But overtime, I felt the UI pattern can be used, if a swipe right gesture is provided.
One of the most well implemented app is Slack.
You can easily swipe right to show the channels, or swipe left to open a side menu.
How to setup SWRevealViewController
The github has some information on using the API, and a sample app.
But there ain’t good steps.
If you are integrating to your project, this is my step-by-step guide.
pod 'SWRevealViewController', '~> 2.3'to your pods
Create a View Controller (VC) in your storyboard, and set the class to
SWRevealViewController. This VC will be empty.
Front VCand a
Rear VCin your storyboard.
A “Front VC” is usually the content view controller, and you usually will have multiple of them, with one as the initial one.
A “Rear VC” is usually a sidebar on the left of the “Front VC” when slided in.
There is also a “Right VC”, which is sort of a “Rear VC” but on the right. We will omit this, but every API for Rear has one for Right.
Create a segue from
Front VC, when prompted set to “reveal view controller set segue”, then set the segue identifier to
Create a segue from
Rear VC, when prompted set to “reveal view controller set segue”, then set the segue identifier to
Add a button to Front VC with the name
The code for Front VC:
1 2 3 4 5 6 7 8 9
That’s all! You can try running and tap on the button to reveal the side bar, or swipe!
Add the code similarly for Rear VC, for the menu item to reveal back to (another) Front VC.
More customization explained
1 2 3 4 5 6 7 8 9 10 11 12 13 14
There are more, but above is what I find useful for customizing my UI.
SWRevealViewController.h for more.