Menu Slide Out with Xcode, Swift

The Slide Out view I created.

Are you struggling to create an appealing slide out menu with Xcode? Don’t worry we have you covered!

Time spent: Will take around 10–20 minutes.
Skill level: Beginner.

It’s quite easy to implement a slide out menu, often times called a “drawer”. We’ll make this post simple, and easy to follow. No matter what your project requires, you will be able to follow this guide and implement it in your own projects.

Step 1: Create an Xcode project, select Single View Application, click Next. Name the project whatever you like, in this case I’ll name it SlideOutMenu. Save it to your desired location, I saved it to my Desktop.

Voila, you just finished the first step in creating a beautiful side menu! How easy was that? Let’s keep moving forward.

Step 2: Start by embedding a Navigation Controller to your ViewController.swift file. Let’s head over to our Main.storyboard, have your ViewController selected and click Editor on the toolbar menu at the top. Scroll over Embed In, next press Navigation Controller, like so:

PROtip — when we click our Slide Out Menu we want to be able to select different views and navigate to different options on the menu. This is why we need a Navigation Controller. It will allow us to go back to our main view when an option is selected (hope that made sense, if you have any questions feel free to drop a comment or personally send a message and I will reply as soon as I’m available).

Step 3: Now let’s set up our User Interface. Go back to your Main.storyboard and these are all the compontents you’ll need:

• Bar Button Item, (you can also use a custom Icon that users will be able to click to bring out the Slide Out Menu) I used the “Hamburger” Icon from Icons8, feel free to use whatever suits your needs. If you’re using a custom Icon make sure you place it in your Assets.xcassets folder by drag and dropping it, like so:

Press the + sign in the Assets.xcassets folder and create an Image Set then Drag and Drop the Icon as showed above. This is really important because if you want an Icon for your button, you’ll need to select the image in your Attributes Inspector that is described below.

• Go back to your Main.storyboard and drag a bar button item to the top left of your Navigation Bar:

Notice how under Bar Item I selected an image called ‘hamburger’, that is the Icon I dragged into my Assets.xcassets folder. When I select hamburger my menu Icon will change.

• Let’s give our Navigation Bar a tittle, head over to Attributes Inspector and name the tittle anything you please, in this case I’ll name it Slide Out Menu.
• Next I’m going to change the colour of the background so you will be able to notice when the Slide Menu comes out when it’s tapped. You can change the colour to anything you please, or if you’re adding this onto another project, just leave it how it is (you’ll see why in the following steps). To change the background colour, select the View then head over to Attributes Inspector and select Background to change the colour. This is how it should look so far:

Note: you can change the positioning of your Bar Button Item by selecting it and heading over to Size Inspector. I would suggest to edit the positioning of the button to your needs.

• Since we want users to be able to tap the Menu icon, we need to bring up a View that they can interact with. Next we will be placing a View from the Object Library, and placing it just under our Navigation Bar on the left, like so:

Resize the View to fit the screen, we will be adding Buttons in this View that users can tap.

• Now let’s set some constraints on the View we just created:

You can have a different width, it’s good to keep in mind that we’ll be using this width to manipulate the View so it doesn’t show unless the Menu Button is tapped.

• Let’s also change the colour of the view by heading over to the Attributes Inspector of the View and clicking Background. Change the colour to whatever you please. In my case I chose a darker colour so it looks visually appealing to the user.
• Now drag a Button from the Object Library and place it in the side View we just created. PROtip — you can add as many buttons as you like, and you’ll need a different ViewController for every button you make (DUH! self explanatory).

I edited the text to white on this button and re-sized the length.

• Don’t forget to add constraints to all your buttons:

• It’s time to get our hands dirty! Let’s add some code so our users can interact with everything we just created! Sounds fun right?! Alright lets go, head over to your ViewController.swift file and hook up the leading constraint of the side View using Control-drag option and creating IBOutlet like so:

Select the leading constraint in your View then create an outlet by control dragging the constraint to your Assistant Editor. The name of the constraint will change also.

• Let’s add an action for our Bar Button Item by selecting the Icon (in my case it’s the Hamburger Menu Icon) and control dragging it to the Assistant Editor:

I created an Action for the menu icon and named it openMenu, when the user taps this icon it will bring up the Slide Out Menu.

• Now let’s create a variable to keep track of wether the Slide Out Menu is showing or not showing: var menuShowing = false (line 13)

This is how your code should look so far.

• In the picture above we’re setting the menu to show when it’s tapped and not show when the user taps the menu icon again. Now lets get a little more funky and add animation to our Slide Out Menu:

This is how the code should look.

Here’s a video of the Slide Out Menu in action!

Thank you all for reading, hope this has helped. If you have any questions please leave a comment or personally reach out to me and I’ll reply as soon as I’m available!

EDIT: Make sure you set the alignment X: to -140 for the side View in the Size Inspector: