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:

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.
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.
  • 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.
Resize the View to fit the screen, we will be adding Buttons in this View that users can tap.
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.
  • 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.
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.
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.
This is how your code should look so far.
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:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Adeel Kothiwala

Helping men around the world feel their best self & escape the matrix