In this tutorial we will learn to implement custom Animated Hamburger DropDown Menu using Swift 2 in XCode 7.1

Hamburger DropDown Menu

Getting started

Open Xcode and create a new project by choosing the Single View Application template. Choose iPhone under “Devices”. Choose Swift as main language.

Xcode 7.1

Next, you are presented with the page to set many of the important aspects of your project, particularly your “Product Name” and “Language”, which will be Swift, of course.

Product Name is pretty self-explanatory.  The organization name can be whatever you want, but it probably should the the company or name you are releasing your apps under. We will not have CoreData, Unit Tests or UI Tests usage in this tutorial so uncheck the box and Swift is the main language to be used.

Screen Shot 2016-03-10 at 12.19.48 PM

When you click next, you will be presented with a save dialog, asking where you want to save your project.  Wherever you save it, a folder will be created with your app’s name, and inside will be the Xcode project, and a folder for each target your app has (which is going to be the app itself, and a test target right now).  You also have the option to create a Git repository for your project either locally or on a server.

After you click the “Create” button, the files for your project are generated and you are probably looking at your AppDelegate.swift file.

Adding custom files

This tutorial requires some custom class files to be imported into our project for the menu and animation to occur. This class file is made freely available to us by NilStack on Github. You can download the class file from here. (Download Link). All credits go to NilStack for this wonderful animation class files. The download link mentioned above provides you with necessary Class file which we will use into our project in future. Drag the swift file into our Xcode project once downloaded.

Setting up the Storyboard

Now we’ll set up the storyboard.  In this app we will mainly focus on adding the navigation controller and few UIView’s to make the view controller look better.

Open Main.storyboard and you will see a single ViewController which is all we need.

  1. Select the View Controller, Press Editor on the menu > Embed in > Navigation Controller
  2. Embed Navigation ControllerNow comes the UI part, place 4 UIViews on the view controller and adjust them accordingly as shown in the images below.
  3. We now change the view controller background color to hex #57385C and the four UIViews hex color to #EC7263, #C06162, #FEBE7E accordingly.
  4. Add a UILabel on the last UIView with constraints centered horizontally & vertically.

The storyboard view controller should look like the image shown below:

Storyboard

Connect the custom UILabel in the ViewController.swift file. Open the assistant editor, press ctrl + drag and create the outlet for the button named selectedCellLabel.

 

For better visual appearance we will change the radius of the UIViews using key attributes on the storyboard’s view controller. This can also be done in code but our motto is to learn new things and hence we will try out this new method.

The rounded edges on UIView can be added using layer.cornerRadius attribute. Select a UIView and open the identity inspector on the right. Under the User Defined Runtime Attributes press the add button. Now change the KeyPath to layer.cornerRadius, Type to String & Value to a number. The number can be calculated as follows: Height of the View / 2

Screen Shot 2016-03-10 at 2.34.38 PM

This step is to be followed for every single UIView to have similar rounded edges for a better visual appearance.

Setting up the ViewController code :

Open the ViewController.swift file and add some lines in the viewDidLoad function:

override func viewDidLoad() {
        super.viewDidLoad()

        let items = ["Home", "About", "Services", "Contact", "Forum"]

        self.selectedCellLabel.text = items.first
        self.navigationController?.navigationBar.translucent = false
        self.navigationController?.navigationBar.barTintColor = UIColor(red: 87.0/255.0, green: 56.0/255.0, blue: 92.0/255.0, alpha: 1.0)

        let dropdownMenu: NKDropdownMenu = NKDropdownMenu(items: items)
        dropdownMenu.didSelectItemAtIndexHandler = {(indexPath: Int) -> () in

            //ADD YOUR CODE HERE TO PERFORM ACTION ON A SINGLE CELL SELECTED USING THE INDEX

            print("Did select item at index: \(indexPath)")
            self.selectedCellLabel.text = items[indexPath]

        }

        self.navigationItem.leftBarButtonItem = UIBarButtonItem(customView: dropdownMenu)

    }

The code mentioned above creates an array of items that will be presented in the menu. We then set the UILabel’s text to the first element in the items array. Now we set the properties of the navigation bar to translucent and change the color of the navigation bar using the UIColor RGBA values. We then create an instance dropdownMenu of class NKDropDownMenu and pass items array to it. Now we need to set some action when a user taps a single cell in the menu. This can be achieved by using the NKDropDownMenu’s didSelectItemAtIndexHandler function. Last we add a UIBarButton to the left of the navigation bar programatically.

We will now change some code in the NKDropdownMenu file to tweak the appearance and animation of the menu. To change the color of the menu items we first change the UIColor with specific RGBA values in the defaultValue() function.

Screen Shot 2016-03-10 at 1.22.28 PM

To change the tableView separator lines color go to the NKDropdownMenuViewCell class where you can change the self.seperator.backgroundColor value.

Screen Shot 2016-03-10 at 1.21.06 PM

To change the background color of the tableView that which is presented in the menu, change the self.backgroundColor value under NKDropdownMenuTableView class. We also need to change the cell.backgroundColor to UIColor.clearColor() under the same class in tableView willDisplayCell function. This will remove the color of the tableView cells and just present the tableView background color in front.

Screen Shot 2016-03-10 at 1.21.33 PM

Screen Shot 2016-03-10 at 1.21.54 PM

Now we will change the animation time for the Menu label appearance in the tableView willDisplayCell function. Change the UIView.animateWithDuration time periods to see the changes. Change it accordingly to what fits your requirements.

Screen Shot 2016-03-10 at 3.08.48 PM

Last but not the least, since we have dark UI elements used everywhere we need to change the statusbar color to LightContent. To achieve this we perform the following instructions:

  1. Open your info.plist and insert a new key named “View controller-based status bar appearance” to NO
  2. Now we put the following code in the application(_:didFinishLaunchingWithOptions:) method of the AppDelegate
    UIApplication.sharedApplication().statusBarStyle = .LightContent
  3. This will affect all the view controllers to change the statusbar content color to white.

Voila! we have just mastered using a animated hamburger dropdown menu. That’s all in this tutorial.

Running the App

So now you run the app with the big “Play” button in the top left of Xcode.  You then need to set what device to run the app on.  You can select a physical device (if you have a paid developer license).  Otherwise, or even just for simpler testing, you can run it in the simulator.  Choose the simulated device to run it on from the same menu.

Then wait a bit while the simulator loads.  Mine took about 30 seconds to load.  Then click on a menu button and watch the magical menu dropdown occur!

Here is the source code on Github for the tutorial above !

I hope you found this article helpful.  If you did, please don’t hesitate to share this post on Twitter or your social media of choice.  The blog is still pretty new, and every share helps.  Of course, if you have any questions, don’t hesitate to contact me on Twitter @swifty_os, and I’ll see what I can do.  Thanks!

Advertisements