Slide in Menu as an UIViewController Extension

iOS Programmatic Slide in Menu Extension

 

We often need to add a slide in menu to a UIViewController. It’s no easy task in Interface Builder. Here’s how to make one in code…

Slide in Menu as an UIViewController Extension

 

First create a new file called MenuMgr.swift in your project. Declare the class… (link to the code at the bottom)

We have a few properties. We’re going to have an array of Strings for the section titles. We have an array of String arrays for the rows. So section 3 has a title of tvSections[3] and row values of tvRows[3].

We also have properties for the tableview to be created, a button (coming later) and a MenuDelegate that will handle the callback when the user taps on a menu item.

Next let’s look at creating the menu items. We return the number of sections as the count of the tvSections and similarly for the number of rows w/ the tvRows item.

For the section header, we return a view – this allows us to set the colors and such. You could use the call back for section title instead.

We also create the cell and set the text to the related tvRow entry – we get the right String array based on the section and then the element in that array with the row.

Next we need to handle when the user taps a menu item.

This deselects the row so it doesn’t stay highlighted. And it calls the delegate method w/ the user selected indexPath.

That’s the only function on the delegate protocol defined at the top of the fine as:

To create our menu, we have a call to createMenu. This takes the arrays: section titles, row arrays, the view to display the menu on and the delegate:

This sets the properties, creates the table view and a button. The menu size is based on the view frame. For the table view, we set the delegate, datasource and register a cell.

The button will be behind the menu so if the user taps anywhere outside the menu the doBtnGB function will be called.

doBtnBG hides the menu:

Of course we need functions to show and hide the menu:

These could be abstracted out to one function to be more efficient.

Below I’l put the whole file and below that we’ll get into how to create and show the menu:

Whole File:

Creating a Menu

In your code, add a property for the MenuMgr:

let menuMgr = MenuMgr()

Whenever you want to create the menu (e.g., viewDidLoad), call createMenu with the sections, rows and delegate:

Or menu sections will be “Settings” and “More”. Settings will have 3 options: Logout, Profile, Other and the More section will have 2: Things and About.

iOS slide in menu

To show the menu we call showMenu on our menuMgr:

menuMgr.showMenu()

And to hide… you guessed it:

menuMgr.hideMenu()

Download the code: MenuProject zip file