Create a Side Menu using NucliOS

Side menus are a common UI pattern found in iOS apps. With the release of NucliOS 2014 Volume 2, we included a side menu control that makes it simple to add a side menu to any view. This post walks the basics of creating a side menu with this latest release of NucliOS.

The IGSideMenuView is a control that consists of a contentView that overlays a configured menu on the left or right side of the view. The contentView houses all the views that are intended to be visible to the user. When the user swipes or drags from left to right or right to left a menu is exposed.

As with any control, the first step in using IGSideMenuView is creating an instance and adding it to the main view.

Objective-C

- (void)viewDidLoad
{
    [super viewDidLoad];

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

    [self initializeTitle];
    [self initializeChart];
    [self initializeMenu];
}

C#

public override void ViewDidLoad ()
{
    base.ViewDidLoad ();

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

    InitializeTitle ();
    InitializeChart ();
    InitializeMenu ();
} 

The side menu is now ready for content views to be added. In this example a title label and bar chart are added to the contentView.

Objective-C

- (void)initializeTitle
{
    _titleLabel = [[IGLabel alloc] initWithFrame:CGRectMake(0, 0, _sideMenuView.contentView.bounds.size.width, 50)];
    _titleLabel.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleBottomMargin;
    [_sideMenuView.contentView addSubview:_titleLabel];

    _titleLabel.horizontalTextAlignment = IGTextAlignmentCenter;
    _titleLabel.backgroundColor = [UIColor blackColor];
    _titleLabel.textColor = [UIColor whiteColor];
    _titleLabel.font = [UIFont fontWithName:@"Helvetica-Bold" size:16];
    _titleLabel.text = @"Widget Item Summary";
}

- (void)initializeChart
{
    _chartView = [[IGChartView alloc] initWithFrame:CGRectMake(0, 50,
            _sideMenuView.contentView.bounds.size.width, _sideMenuView.contentView.bounds.size.height - 50)];
    _chartView.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleTopMargin;
    _chartView.theme = [IGChartDefaultThemes IGThemeDark];
    [_sideMenuView.contentView addSubview:_chartView];

    _amountOfData = 10;
    [self generateData:_amountOfData];
    _chartDataHelper = [[IGCategorySeriesDataSourceHelper alloc] initWithValues:_data];
    _series = (IGBarSeries *) [_chartView addSeriesForType:IGBarSeries.class usingKey:@"series" withDataSource:_chartDataHelper firstAxisKey:@"xAxis" secondAxisKey:@"yAxis"];
}

- (void)generateData:(NSInteger)count
{
    if (!_data)
        _data = [[NSMutableArray alloc] init];
    else
        [_data removeAllObjects];

    for (int i = 0; i < count; ++i)
    {
        [_data addObject:@(arc4random_uniform(40) + 10)];
    }
}

C#

private void InitializeTitle()
{
    _titleLabel = new IGLabel ();
    _titleLabel.Frame = new RectangleF (0, 0, _sideMenuView.ContentView.Bounds.Width, 50);
    _titleLabel.AutoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleBottomMargin;
    _sideMenuView.ContentView.Add(_titleLabel);

    _titleLabel.HorizontalTextAlignment = IGTextAlignment.IGTextAlignmentCenter;
    _titleLabel.BackgroundColor = UIColor.Black;
    _titleLabel.TextColor = UIColor.White;
    _titleLabel.Font = UIFont.FromName("Helvetica-Bold", 16);
    _titleLabel.Text = "Widget Item Summary";
}

private void InitializeChart()
{
    _chartView = new IGChartView ();
    _chartView.Frame = new RectangleF (0, 50, _sideMenuView.ContentView.Bounds.Width, _sideMenuView.ContentView.Bounds.Height - 50);
    _chartView.AutoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight | UIViewAutoresizing.FlexibleTopMargin;
    _chartView.Theme = IGChartDefaultThemes.IGThemeDark();
    _sideMenuView.ContentView.Add(_chartView);

    GenerateData(_amountOfData);
    _chartDataHelper = new IGCategorySeriesDataSourceHelper (_data.ToArray ());
    _series = (IGBarSeries)_chartView.AddSeries (new Class ("IGBarSeries"), "series", _chartDataHelper, "xAxis", "yAxis");
}

private void GenerateData(int count)
{
    _data.Clear ();

    Random random = new Random (count * DateTime.Now.Millisecond);
    for (int i = 0; i < count; ++i)
    {
        _data.Add (new NSNumber (random.Next (40) + 10));
    }
} 

Next, configure the menu. Menus can be on the left, right or both sides of the view. For this example the right side is used.

Objective-C

- (void)initializeMenu
{
    _gridDataHelper = [[GridDataHelper alloc] init];
    _gridDataHelper.data = @[@"10", @"50", @"100", @"200"];

    _gridMenu = [[IGGridView alloc] initWithFrame:CGRectMake(0, 0, 250, 1) style:IGGridViewStyleDefault];
    _gridMenu.selectionType = IGGridViewSelectionTypeCell;
    _gridMenu.emptyRows = NO;
    _gridMenu.rowHeight = 45;
    _gridMenu.theme = _theme = [[IGGridViewDarkTheme alloc] init];
    _gridMenu.backgroundColor = [UIColor colorWithWhite:0.15 alpha:1.0];
    _gridMenu.dataSource = _gridDataHelper;
    _gridMenu.delegate = self;
    _sideMenuView.rightMenuView = _gridMenu;
}

C#

private void InitializeMenu()
{
    _gridDataHelper = new GridDataHelper ();
    _gridDataHelper.Data = new NSObject[] { (NSString)"10", (NSString)"50", (NSString)"100", (NSString)"200" };

    float gridWidth = UserInterfaceIdiomIsPhone ? 125 : 250;
    _gridMenu = new IGGridView (new RectangleF (0, 0, gridWidth, 1), IGGridViewStyle.IGGridViewStyleDefault);
    _gridMenu.SelectionType = IGGridViewSelectionType.IGGridViewSelectionTypeCell;
    _gridMenu.EmptyRows = false;
    _gridMenu.RowHeight = 45;
    _gridMenu.Theme = _theme = new IGGridViewDarkTheme ();
    _gridMenu.BackgroundColor = UIColor.FromWhiteAlpha (0.15f, 1.0f);
    _gridMenu.DataSource = _gridDataHelper;
    _gridMenu.WeakDelegate = this;
    _sideMenuView.RightMenuView = _gridMenu;
} 

The last step is to wire up the menu selection events to perform a custom task and automatically close the menu.

Objective-C

- (void)gridView:(IGGridView *)gridView didSelectCellAtPath:(IGCellPath *)path
{
    IGGridViewCell *cell = [gridView cellAtPath:path];
    _amountOfData = [cell.textLabel.text integerValue];
    [self performSelector:@selector(processMenuSelection) withObject:nil afterDelay:0.75];
}

- (void)processMenuSelection
{
    [_sideMenuView closeSideMenu];
    [_gridMenu deselectAll];

    [self generateData:_amountOfData];
    _chartDataHelper.values = _data;
    _series.dataSource = _chartDataHelper;
}

C#

[Export ("gridView:didSelectCellAtPath:")]
public void DidSelectCell (global::Infragistics.IGGridView gridView, global::Infragistics.IGCellPath path)
{
    IGGridViewCell cell = (IGGridViewCell)gridView.ResolveCellForPath (path);
    _amountOfData = Int32.Parse (cell.TextLabel.Text);
    this.PerformSelector (new Selector ("ProcessMenuSelection"), null, 0.75f);
}

[Export ("ProcessMenuSelection")]
private void ProcessMenuSelection()
{
    _sideMenuView.CloseSideMenu ();
    _gridMenu.DeselectAll ();

    GenerateData (_amountOfData);
    _chartDataHelper.Values = _data.ToArray ();
    _series.DataSource = _chartDataHelper;
} 

The source code for this blog post can be downloaded at the following links.

• Xcode (Objective-C)
• Xamarin.iOS (C#)

By Torrey Betts