Menu Slide Out with Xcode, Swift

The Slide Out view I created.
  • 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.

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