Slide-Out Side Bar Menu/ Hamburger Menu
One of the useful implementations of menu views has been the slide out side bar often known as basement,side drawer or side menu it is vastly used & is popular in Facebook app and Path.When the user taps the Hamburger icon to open the menu, the main screen slides to the right (or left in some implementations) to reveal another screen below.
Here is the Step By Step Tutorial for creating Hamburger Menu/Slide-Out Side Bar Menu
1.Study a bit about SWRevealViewController
2.Setup SWRevealViewController
- Add 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.
- Now make two new ViewControllers name them as Front VC,Rear VC respectively in your storyboard.
- The Front ViewController is basically the content view controller, and you will usually have many of them,with one as the initial one & Rear ViewController is usually a sidebar i.e basically the bar on the left of the Front ViewController when slided in.
There is also a Right VC, which is sort of a Rear ViewController but on the right.We will omit this,but every API for Rear has one for Right.
- Create a segue from SWRevealViewController to Front VC, when prompted set to reveal view controller set segue, then set the segue identifier to sw_front.
- Create a segue from SWRevealViewController to Front VC, when prompted set to reveal view controller set segue, then set the segue identifier to sw_front.
- Repeat the previos step for Rear VC.
- Add a button to Front VC with the name sidebarButton in your storyboard.
- SideBar image is also provided.
- Now import SWRevealViewController.h as-
#import <swrevealviewcontroller.h>
- Create a function & name it as customSetup or watever suits u.
- Now add the following block of code in -(void)customSetup
-(void)customSetup{
SWRevealViewController *revealViewController = self.revealViewController;
if (revealViewController) {
[self.sidebarButton addTarget:self.revealViewController action:@selector( revealToggle: ) forControlEvents:UIControlEventTouchUpInside];
[self.view addGestureRecognizer: self.revealViewController.panGestureRecognizer];
}
}
Add the following more line of code ahead of the previous function
#pragma mark state preservation/restoration
(void)encodeRestorableStateWithCoder:(NSCoder *)coder
{
NSLog(@"%s", __PRETTY_FUNCTION__);
// Save what you need here
[super encodeRestorableStateWithCoder:coder];
}
(void)decodeRestorableStateWithCoder:(NSCoder *)coder
{
NSLog(@"%s", __PRETTY_FUNCTION__);
// Restore what you need here
[super decodeRestorableStateWithCoder:coder];
}
(void)applicationFinishedRestoringState
{
NSLog(@"%s", __PRETTY_FUNCTION__);
// Call whatever function you need to visually restore
[self customSetup];
}
- Now paste [self customSetup]; just after [super viewDidLoad]; in your code & enjoy your Hamburger Menu.
0 Comment(s)