How to create a side menu using Swift: The easy way

A lot of apps these days have some kind of side menu which slide out when you select a little hamburger button on the navigation bar. In this blog I will be going over a simple method to create a side menu. Our slide out menu will look like this:

menuBar

  1. Create a new project in Xcode.
  2. Open Main.storyboard from the project navigator on the left of Xcode. Drag and drop the navigation bar from the object library to the view controller (iPhone in the workspace)
    step2
  3. Next drag and drop a bar button form object library to the navigation bar. We will use this button to show the menu bar
    step3
  4. Click on assistant editor button on the top right corner of Xcode, to display the view controller in split screen with the storyboard
  5. Create a IBAction by pressing control key on your keyboard and dragging in to the view controllers coding area. Name it showMenuBar and don’t forget to select connection type as Action.
    step4
  6. Create a function named setupMenuBar just below the showMenuBar function, it will have all the coding necessary for setting our slide out menu bar
  7. At the top of view controller just below the class statement, create a variable menuBar of type UIView as following:

    let menuBar = UIView()

     

  8. Copy the following code inside setupMenuBar()
    Screen Shot 2017-05-17 at 7.01.45 PM//1 – Here we set the menuBar’s background color to yellow so that its visible on the screen
    //2 – Adding menuBar to the view hierarchy
    //3 – Set the menuBar’s frame such that its out of the device’s screen area
  9. Next add the following code inside the showMenuBar()
    Screen Shot 2017-05-17 at 7.02.34 PMHere we change the frame of menuBar inside the animate closure so that it slides out of the left side of the device and covers 3/4 of the screen width on selecting the fast forward bar button.
  10. Create a function named hideMenu() just below the setupMenuBar() and add the following code inside it. This function will contain the code necessary to hide the menuBar
    Screen Shot 2017-05-17 at 7.02.15 PMIn this function we animate the menuBar view back out of the device’s visible screen area. In CGRect the y-coordinate, width and height parameters remain the same but the x coordinate changes to the negative of screen width. You can also choose any large enough random value which takes the view out of visible screen.
  11.  Last call the setupMenuBar() from the viewDidLoad() method and add a tap gesture recognizer to the menuBar as following:
    Screen Shot 2017-05-17 at 7.03.00 PMwe call the hideMenu function when the menubar is tapped. You can have other elements call hideMenu function.
  12. Run the app and see the magic 🙂
  13.  Download all the source code from here.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

Up ↑

%d bloggers like this: