Side menu in iOS with Swift 5

Side menu in iOS with Swift 5
April 17, 2020 3 Comments Development,iOS Development Pushpendra Kumar

Hello, Guys welcome this important tutorial. Are you struggling to create an appealing slide out menu with Xcode? Don’t worry we have you covered!. We have explained to you that how you can create a side menu in iOS swift 5. In other words, This tutorial will be very helpful for you because,This tutorial contain very deep knowledge about the slide menu integration. And this is a topic that will make your iOS application more attractive.

Side menu in iOS Swift 5

It is very easy to implement a side menu, oftentimes called a “drawer”. We will 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 projects.

Phase 1: 

  • Create an Xcode project.
  • Select the Single View Application, click Next.
  • Name the project whatever you like, in this case, I’ll name it Slide Menu.
  • Save it to your desired location, I saved it to my Desktop. Similarly, Move to phase 2

Pase 2 :

  • Create a few new folders as a new group, And keep the name as, Utils, Cell or Controller.
  • And create all the files as mention in the image.
How to create a Side menu in ios swift 5
Side menu in ios swift 5

After that, let’s begin with the programming part, And for the menu controller, you need to create only three controllers. Which is given below.

Create Controllers

  • ContainerController.swift :- This is the CocoaTouch file which extend UIViewController. This file will handle the interaction between MenuController.swift and Other Controllers, Like HomeController.swift.
  • HomeController.swift :- This is the CocoaTouch file which extend UIViewController. This is the main controller. And From this controller, we will open MenuController.swift
  • MenuController.swift :- This is the CocoaTouch file which extend UIViewController. This is the main controller. And From this controller, we will open MenuController.swift

I hope you have read above all information. So After all that we are, Let’s get to the point. Create the property in ContainerController.swift.

    //MARK:- All the properties
    var menuController : MenuController!
    var centerController : UIViewController!
    var homeController : HomeController!
    var isExpandMenu : Bool = false

Great work..!!😊 Now let’s Intialize the HomeController.swift from the viewDidLoad(). Which is given as 

if homeController == nil {
            homeController = HomeController()
            homeController.delegate = self
            centerController = UINavigationController(rootViewController: homeController)
            self.view.addSubview(centerController.view)
            addChild(centerController)
            centerController.didMove(toParent: self)
        }

Above all great work..!! Here I have to use a homeController.delegate = self. Please comment on this line for now.

After that, Let’s do some programming for the HomeController.swift so that we can achieve our first milestone. For instance, Add the property which is given below.

//MARK: – Properties
var delegate : MenuDelegate?

So at the very first initialize your navigation item as given below, in your viewdidLoad function. 

self.navigationItem.title = "Main Controller"
self.navigationItem.leftBarButtonItem = UIBarButtonItem(image: #imageLiteral(resourceName: "menu").withRenderingMode(.alwaysOriginal) , style: .plain, target: self, action: #selector(handleMenu))

Well done developers, After that, Create handleMenu #selector so that we can perform the action for menu item. 

//MARK: - Menu Handler
    @objc func handleMenu(){
        print("Click On menu")
        delegate?.menuHandler()
    }

After that, I think you are thinking about MenuDelegate. So let’s have look for this. Now Open Protocols.swift and Programming this file as given below. 

import Foundation

protocol MenuDelegate {
    func menuHandler(index : Int)
}

After that, Now you can uncomment the homeController.delegate = self from the ContainerController.swift so that we can see the result for our work. 

Side menu in ios swift 5
Side menu in ios swift 5

Side Menu Controller Work

As per the current design, we have to create MenuController.swift, In addition you have to create MenuController.swift with extended UITableViewController. So for that, you have to initialize as per your requirement. And if you want more details about this that you can watch this video.

ContainerController

In Addition, I would like to tell you that, After creating the properties of ContainerController. You have to some deep integration in which you get a better understanding from the given video. Below is an very important code for the Container Controller.

extension ContainerController : MenuDelegate {
    func menuHandler() {
        print("Menu Handler get call \(index)")
        if !isExpandMenu {
            configureMenu()
        }
        isExpandMenu = !isExpandMenu
        showMenu(isExpand: isExpandMenu)
    }
}

Above all is great Work for this, Now we will look for the configureMenu(). So below is the code for that. 

func configureMenu()  {
        if menuController == nil {
            let storyBoard = UIStoryboard(name: "Main", bundle: nil)
            menuController = storyBoard.instantiateViewController(identifier: "MenuController") as? MenuController
            menuController.delegate = self
            view.insertSubview(menuController.view, at: 0)
            addChild(menuController)
            menuController.didMove(toParent: self)
            print("Menu Configure get Call...")
        }
    }

😊😊 Wonderful,

In Addition, As I am saying that Please watch the video. So you can create a better project. In Conclusion, I would like to tell you that, If you reading this line then please subscribe to my YouTube Channel for the latest update and comment into the comment box. And tell me that are you happy about this tutorial or you want any change in this?

Tags
About The Author
Pushpendra Kumar I am passionate about mobile application development and professional developer at Colour Moon Technologies Pvt Ltd (www.thecolourmoon.com). This website I have made so that I can meet with new challenges and can share here.
Leave Comment
  1. 1

    varun

    How can we add different page links after we implement side menu

    Reply
    1. 1

      Pushpendra Kumar

      It’s better, If you find it from UIStoryBoard(name : “Main”, bundle : nil).initiate…………

      Reply
  2. 1

    iHerb Code

    Unequivocally, excellent answer

    Reply

Leave a reply

Your email address will not be published. Required fields are marked *