Adding the Side Menu to a View
Send Feedback

Glossary Item Box

Topic Overview

Purpose

This topic explains, with a code example how to create a basic instance of the IGSideMenuView™ control and display it on a view.

Required background

The following table lists the prerequisite topics required to understanding this topic.

Topic

Purpose

Adding the IG Framework File

This topic explains how to add the IG framework file to a project.


In this topic


Displaying the IGSideMenuView – Code Example

Description

This code example illustrates creating an IGSideMenuView that uses the IGGridView as the right menu.

Preview

Code

To start, create an instance of the IGSideMenuView and add the subview.

In Objective-C:

_sideMenuView = [[IGSideMenuView alloc] initWithFrame:self.view.bounds];
_sideMenuView.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight;
[self.view addSubview:_sideMenuView];

In C#:

_sideMenuView = new IGSideMenuView ();
_sideMenuView.Frame = this.View.Bounds;
_sideMenuView.AutoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight;
this.View.AddSubview (_sideMenuView);

Next, create an instance of a label to add to the contentView of the IGSideMenuView.

In Objective-C:

_contentLabel = [[UILabel alloc] initWithFrame:_sideMenuView.contentView.bounds];
_contentLabel.autoresizingMask = UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleWidth;
_contentLabel.textAlignment = NSTextAlignmentCenter;
_contentLabel.text = @"Content Area - Swipe or drag to the left to view the menu.";
[_sideMenuView.contentView addSubview:_contentLabel];

In C#:

_contentLabel = new UILabel (_sideMenuView.ContentView.Bounds);
_contentLabel.AutoresizingMask = UIViewAutoresizing.FlexibleHeight | UIViewAutoresizing.FlexibleWidth;
_contentLabel.TextAlignment = UITextAlignment.Center;
_contentLabel.Text = "Content Area - Swipe or drag to the left to view the menu.";
_sideMenuView.ContentView.AddSubview (_contentLabel);

Next, create an instance of the IGGridViewDataSourceHelper for the menu options.

In Objective-C:

_dsh = [[IGGridViewDataSourceHelper alloc] init];
_dsh.data = @[@"Option 1", @"Option 2", @"Option 3", @"Option 4"];

In C#:

_dsh = new IGGridViewDataSourceHelper ();
_dsh.Data = new NSObject[] { new NSString("Option 1"), new NSString("Option 2"), 
      new NSString("Option 3"), new NSString("Option 4") };

Then, create the IGGridView instance and initialize its dataSource with the IGGridViewDataSourceHelper from the last step.

In Objective-C:

    _gridMenu = [[IGGridView alloc] initWithFrame:CGRectMake(0, 0, 250, 1) style:IGGridViewStyleDefault];
    _gridMenu.headerHeight = 0;
    _gridMenu.emptyRows = NO;
    _gridMenu.theme = _theme = [[IGGridViewDarkTheme alloc] init];
    _gridMenu.backgroundColor = [UIColor colorWithWhite:0.15 alpha:1.0];
    _gridMenu.dataSource = _dsh;
    _gridMenu.delegate = self;

In C#:

_gridMenu = new IGGridView (new RectangleF (0, 0, 250, 1), IGGridViewStyle.IGGridViewStyleDefault);
_gridMenu.HeaderHeight = 0;
_gridMenu.EmptyRows = false;
_gridMenu.Theme = _theme = new IGGridViewDarkTheme ();
_gridMenu.BackgroundColor = new UIColor (0.15f, 0.15f, 0.15f, 1.0f);
_gridMenu.DataSource = _dsh;
_gridMenu.Delegate = _gridDelegate = new GridDelegate() { SideMenu = _sideMenuView };

Lastly, assign the IGGridView instance as the right side menu on the IGSideMenuView.

In Objective-C:

_sideMenuView.rightMenuView = _gridMenu;

In C#:

_sideMenuView.RightMenuView = _gridMenu;

Code: Complete listing

In Objective-C:

@interface igViewController () <IGGridViewDelegate>
{
    IGSideMenuView *_sideMenuView;
    IGGridView *_gridMenu;
    IGGridViewDataSourceHelper *_dsh;
    IGGridViewDarkTheme *_theme;
    UILabel *_contentLabel;
}
@end
@implementation igViewController
- (void)viewDidLoad
{
    [super viewDidLoad];
    _sideMenuView = [[IGSideMenuView alloc] initWithFrame:self.view.bounds];
    _sideMenuView.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight;
    [self.view addSubview:_sideMenuView];
    _contentLabel = [[UILabel alloc] initWithFrame:_sideMenuView.contentView.bounds];
    _contentLabel.autoresizingMask = UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleWidth;
    _contentLabel.textAlignment = NSTextAlignmentCenter;
    _contentLabel.text = @"Content Area - Swipe or drag to the left to view the menu.";
    [_sideMenuView.contentView addSubview:_contentLabel];
    _dsh = [[IGGridViewDataSourceHelper alloc] init];
    _dsh.data = @[@"Option 1", @"Option 2", @"Option 3", @"Option 4"];
    _gridMenu = [[IGGridView alloc] initWithFrame:CGRectMake(0, 0, 250, 1) style:IGGridViewStyleDefault];
    _gridMenu.headerHeight = 0;
    _gridMenu.emptyRows = NO;
    _gridMenu.theme = _theme = [[IGGridViewDarkTheme alloc] init];
    _gridMenu.backgroundColor = [UIColor colorWithWhite:0.15 alpha:1.0];
    _gridMenu.dataSource = _dsh;
    _gridMenu.delegate = self;
    _sideMenuView.rightMenuView = _gridMenu;
}
- (void)gridView:(IGGridView *)gridView didSelectRowAtPath:(IGRowPath *)path
{
    [self performSelector:@selector(deselectCell) withObject:nil afterDelay:0.75];
}
- (void)deselectCell
{
    [_sideMenuView closeSideMenu];
    [_gridMenu deselectAll];
}
@end

In C#:

public class GridDelegate : IGGridViewDelegate
{
      [Export("SideMenu")]
      public IGSideMenuView SideMenu { get; set; }
      public override void DidSelectRow (IGGridView gridView, IGRowPath path)
      {
            NSTimer.CreateScheduledTimer (0.75f, () => {
                  SideMenu.CloseSideMenu();
                  gridView.DeselectAll();
            });
      }
}
public partial class SideMenuGettingStarted_CSViewController : UIViewController
{
      IGSideMenuView _sideMenuView;
      IGGridView _gridMenu;
      IGGridViewDataSourceHelper _dsh;
      IGGridViewDarkTheme _theme;
      GridDelegate _gridDelegate;
      UILabel _contentLabel;
      public SideMenuGettingStarted_CSViewController ()
      {
      }
      public override void ViewDidLoad ()
      {
            base.ViewDidLoad ();
            
            _sideMenuView = new IGSideMenuView ();
            _sideMenuView.Frame = this.View.Bounds;
            _sideMenuView.AutoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight;
            this.View.AddSubview (_sideMenuView);
            _contentLabel = new UILabel (_sideMenuView.ContentView.Bounds);
            _contentLabel.AutoresizingMask = UIViewAutoresizing.FlexibleHeight | UIViewAutoresizing.FlexibleWidth;
            _contentLabel.TextAlignment = UITextAlignment.Center;
            _contentLabel.Text = "Content Area - Swipe or drag to the left to view the menu.";
            _sideMenuView.ContentView.AddSubview (_contentLabel);
            _dsh = new IGGridViewDataSourceHelper ();
            _dsh.Data = new NSObject[] { new NSString("Option 1"), new NSString("Option 2"), 
                  new NSString("Option 3"), new NSString("Option 4") };
            _gridMenu = new IGGridView (new RectangleF (0, 0, 250, 1), IGGridViewStyle.IGGridViewStyleDefault);
            _gridMenu.HeaderHeight = 0;
            _gridMenu.EmptyRows = false;
            _gridMenu.Theme = _theme = new IGGridViewDarkTheme ();
            _gridMenu.BackgroundColor = new UIColor (0.15f, 0.15f, 0.15f, 1.0f);
            _gridMenu.DataSource = _dsh;
            _gridMenu.Delegate = _gridDelegate = new GridDelegate() { SideMenu = _sideMenuView };
            _sideMenuView.RightMenuView = _gridMenu;
      }
}

Related Content

Topics

The following topic provides additional information related to this topic.

Topic

Purpose

This topic provides a conceptual overview of the IGSideMenuView control and its key features.