Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Side MenuBar in iOS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 685
    Comment on it

     

    Side MenuBar or menu list is used to provide a list to the user so that user can easily move to those pages according to the need. Here is an example of including menubar in the application with the help of a superclass REFrostedViewCotroller. For making this class as superclass we need to install pod file in the project so first all of we will install pod file in th project with the help of terminal. Below are some lines which we need to write for pod installation:-

     

    Step 1:-
    elcaptain1s-iMac:~ elcaptain1$ cd /Users/elcaptain1/Desktop/SideMenuBar     (path of project)
    elcaptain1s-iMac:MenuBar elcaptain1$ pod init                           (command to create pod file)

     

     

    Step 2:-

    After this open pod file with Xcode by right click on the podfile and then in pod file include following lines:-

    platform :ios, ‘9.0’
    pod 'REFrostedViewController', '~> 2.4'

     

     

     

    Step 3:-

    After writing these two lines in pod file again go to the terminal and now install pod file

    elcaptain1s-iMac:MenuBar elcaptain1$ pod install                         (command to install pod file)
    It will take some time to install pod.Message you will get after installation will be in this way

    Pod installation complete! There is 1 dependency from the Podfile and 1 total pod installed.

     

     

     

    After completion of these three steps pods will get installed in your project and in finder you will get this kind of structure as given below:-

     

     

     

    Suppose name of project is SideMenuBar Now open SideMenuBar.xcworkspace for further working. Now we will create a file as RootViewController and its superclass will be REFrostedViewController and to use this class as super class we have to import one file i.e

    #import "REFrostedViewController.h"

    Now we will take navigation bar before RootViewController as we want to take a button in navigation bar and on button click we want to show menu bar. Take button from object gallery and create an action on button click. Below is the code of RootViewController where button action includes hide or show of menu and simultaneously we will write what page will be the content page and menu page. Here I will provide you some snapshots of storyboard so that you will get to know how to set storyboard id.

     

     

     

    Now how to set the storyboard Id of a particular controller.Suppose I want to set the storyboard id of ContentViewController .So the snapshot is given below :-

     

     

    Now below is the coding of each controller used in the project for further processing .

     

    #import <UIKit/UIKit.h>
    #import "REFrostedViewController.h"
    @interface RootViewController : REFrostedViewController
    - (IBAction)btnMenuClick:(id)sender;
    
    @end
    
    
    #import "RootViewController.h"
    
    @interface RootViewController ()
    
    @end
    
    @implementation RootViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        // Do any additional setup after loading the view.
    }
    
    - (void)didReceiveMemoryWarning {
        [super didReceiveMemoryWarning];
        // Dispose of any resources that can be recreated.
    }
    
    - (void)awakeFromNib
    {
        self.contentViewController = [self.storyboard instantiateViewControllerWithIdentifier:NSStringFromClass([ContentViewController class])]; //provide same name as of class to the storyboard id to use the NSStringFromClass
        self.menuViewController = [self.storyboard instantiateViewControllerWithIdentifier:NSStringFromClass([MenuViewController class])];
        self.direction = REFrostedViewControllerDirectionRight; //this will make the slide direction from right side
        self.limitMenuViewSize  = YES;
        self.menuViewSize       = CGSizeMake(210.0, [UIScreen mainScreen].bounds.size.height); //here we can provide the size of menu which will increase or decrease according to the need
    
        UIPanGestureRecognizer *panRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(move:)];
        [self.view addGestureRecognizer:panRecognizer]; //we are using this to slide the menu bar on cursor move also without button click.
    }
    
    - (void)move:(UIPanGestureRecognizer *)sender
    {
        [self panGestureRecognized:sender];
        [self presentMenuViewController];
    }
    
    - (IBAction)btnMenuClick:(UIButton *)sender {
        if (sender.selected) {
            [self hideMenuViewController]; //hide the menu view controller
            
            sender.selected=NO;
            
        }else{
            [self presentMenuViewController];// show the menu view controller
            
            sender.selected=YES;
        }
    }
    @end


    Now we will include four new controllers in main storyboard first for menu, second for content, third for menu list first option and fourth for menu list second option.

    In menu view controller we will take a table view from object gallery as we need to show a list of items in menu.take table view cell inside table view as item will be placed inside cell of table view. Now for table view cell create a file as we need label outlet to show list. Now make new class of cell as super class and set identifier of cell. Outlet is created in tableViewCell class in following way

     

    #import <UIKit/UIKit.h>
    
    @interface MenuListTableViewCell : UITableViewCell
    @property (weak, nonatomic) IBOutlet NSLayoutConstraint *lblListItem;
    
    @end
    


    set delegate and datasource of table view only than data will be display in list. Now we came back to the MenuViewController and implement necessary methods of table View
     

    MenuListTableViewCell.h
    
    #import <UIKit/UIKit.h>
    
    @interface MenuListTableViewCell : UITableViewCell
    @property (weak, nonatomic) IBOutlet UILabel *lblListItem;
    
    @end
    
    MenuViewController.h
    
    #import <UIKit/UIKit.h>
    #import "MenuListTableViewCell.h"
    #import "RootViewController.h"
    #import "ProfileViewController.h"
    #import "ContactViewController.h"
    @interface MenuViewController : UIViewController
    
    @end
    
    
    MenuViewController.m
    
    
    #import "MenuViewController.h"
    
    @interface MenuViewController ()
    {
        NSArray *arrOfList;
    }
    @end
    
    @implementation MenuViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        // Do any additional setup after loading the view.
    }
    
    - (void)didReceiveMemoryWarning {
        [super didReceiveMemoryWarning];
        // Dispose of any resources that can be recreated.
    }
    -(void)viewWillAppear:(BOOL)animated{
        
        
        arrOfList=[[NSArray alloc]initWithObjects:@"Profile",@"Contact Us", nil];
        
    }
    
    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
        
        return arrOfList.count;
    }
    
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
        
        tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
        NSString *cellIdentifier = @"cell";
        MenuListTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];
        [cell.lblListItem setText:[arrOfList objectAtIndex:indexPath.row]];
        return cell;
    }
    
    - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
    
        if(indexPath.row==0)
    {
        ProfileViewController *comments =  [self.storyboard instantiateViewControllerWithIdentifier:NSStringFromClass([ProfileViewController class])];//ProfileViewController is the class of controller which will appear on first menu list option click.
        [self.frostedViewController setContentViewController:comments];
        [self.frostedViewController hideMenuViewController];
    }
    else if(indexPath.row==1)
    {
        ContactViewController *comments1 =  [self.storyboard instantiateViewControllerWithIdentifier:NSStringFromClass([ContactViewController class])];//ContactViewController is the class of controller which will appear on second menu list option click.
        [self.frostedViewController setContentViewController:comments1];
        [self.frostedViewController hideMenuViewController];
    }
    
    }
    
    @end

     

    In this way we can create a menu bar which includes a list of options and according to options we can change the pages in content view.

    Output:-

    Home screen will be like this as given below which includes a menu button at navigation bar.

     

     

    On menu button click we will get the side bar which is given below:-

     

     

    So from right side of the controller now we are getting the menu list. Now according to your need you can provide controller on click of list items.

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: