Menu Slide Out with Xcode, Swift
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:
- Go back to your Main.storyboard and drag a bar button item to the top left of your Navigation Bar:
- 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:
- 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:
- Now let’s set some constraints on the View we just created:
- 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).
- 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:
- 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:
- 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)
- 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:
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!