Creating Sliding Menu with iOS SlidingMenu Component


Introduction

This a component which is a menu has several buttons coming from the right and left side of the screen with an animation. Here is a small video that will give you the idea:

Click here for non HTML5 Video supported browsers

Integrating SlidingMenu

First you have to import SlidingMenu.h in your view controller “h” file.
You have to create an array which will hold buttons in your sliding menu. Like these:

#import “SlidingMenu.h”

@interface ViewController : UIViewController
{
    SlidingMenu *menu;
}
– (IBAction)openOrCloseMenu:(UIButton *)sender;
@property (strong, nonatomic) NSMutableArray *buttons;

@end

In your viewdidLoad method make these:

– (void)viewDidLoad
{
    [super viewDidLoad];
    
    self.title = @”Sliding Menu”;
    
    _buttons = [NSMutableArray array];
    [self createButtonsWithQuantity:7];
    menu = [[SlidingMenu alloc]init];
    [menu setButtonsArray:_buttons];

    
    // Do any additional setup after loading the view, typically from a nib.
}

This will create buttons that will  be in sliding menu. You can modify:

-(void)createButtonsWithQuantity:(NSInteger)quantity{
    for (int i = 0; i<quantity; i++) {
        UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
        button.tag = i;
        [button addTarget:self action:@selector(menuButonAction:) forControlEvents:UIControlEventTouchUpInside];
        [button setBackgroundImage:[UIImage imageNamed:@"button-blue"] forState:UIControlStateNormal];
        [button setBackgroundImage:[UIImage imageNamed:@"button-blue-pressed"] forState:UIControlStateSelected];
        [button setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
        [button setTitle:[NSString stringWithFormat:@"Button %i",button.tag] forState:UIControlStateNormal];
        button.layer.cornerRadius = 5.0;
        [self.view addSubview:button];
        [_buttons addObject:button];
    }
}

And the action method of the buttons of course:

– (void)menuButonAction:(UIButton *)sender {
    NSLog(@”%i. button clicked”,sender.tag);
    [self performSegueWithIdentifier:@”detail” sender:sender];
}

And decide when your sliding menu comes to the screen. I will do it in viewDidAppear method:

-(void)viewDidAppear:(BOOL)animated{
    [super viewDidAppear:animated];
    for (UIButton *button in _buttons) {
        if (button != nil) {
            [self.view addSubview:button];
        }
    }
    [menu openOrCloseButtonsMenu];
}

If you use this in viewDidAppear method. Make sure you use this in viewDidDisappear method:

-(void)viewDidDisappear:(BOOL)animated{
    [super viewDidDisappear:animated];
    [menu closeButtonsMenu];
    for (UIButton *button in _buttons) {
        [button removeFromSuperview];
    }
}

Customizing SlidingMenu

You can customize SlidingMenu with these properties:

Setting SlidingMenu Origins:

menu.buttonMenuOriginYOffset = 120;
menu.buttonMenuOriginXOffset = 10;

Setting Space between buttons:

menu.spaceBetweenButtons = 20;

Setting buttons size:

menu.buttonSize = CGSizeMake(73, 36);

Download Source Files from Git

 

 

 
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a free website or blog at WordPress.com.

Up ↑

%d bloggers like this: