Showing views with some animation is very common in iOS applications and people love these animations. Animations enhance the user experience and that hold the user in the application.

In this tutorial, we will learn how to create a slide-up menu in swift programmatically. We will see how to manage the animations and maintain the table view height and design table view & cell programmatically.

Here’s is the video if you prefer video over text.

Note: This video is created with Xcode 9.0 and Swift 4.0, so maybe some functions are depreciated.

You should also have basic knowledge of UITableView.

Final Output:

1. Create a New Swift Project

Open Xcode, Select App and click on next and give a proper name to the project and make sure to select the user interface should be Swift, and create the new project. Give the name according to your need.

2. Create Menu Button and Transparent View

First we will add the Navigation bar to add the Menu Button on the navigation bar.

Now, we will add the Menu button action in the view controller class.

@IBAction func onClickMenu(_ sender: Any) { 
// Code for adding transparent view and table view
}

Now we will add the transparent view on window and add UITableview on view as user click on the Menu button. First we need to define the variables.

var transparentView = UIView()
var tableView = UITableView() 

Get the window and add the transparent view on the windows. Also add UITapGesture Recogniser on the transparent view, so when user tap on the transparent view it will remove from the screen.

@IBAction func onClickMenu(_ sender: Any) {
         
       let window = UIApplication.shared.keyWindow
       transparentView.backgroundColor = UIColor.black.withAlphaComponent(0.9)
       transparentView.frame = self.view.frame
       window?.addSubview(transparentView)
         
       let tapGesture = UITapGestureRecognizer(target: self, action: #selector(onClickTransparentView))
       transparentView.addGestureRecognizer(tapGesture)
         
       transparentView.alpha = 0
         
       UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 1.0, initialSpringVelocity: 1.0, options: .curveEaseInOut, animations: {
           self.transparentView.alpha = 0.5
         }, completion: nil)
     }  

Now we will add the table view on the screen with some animation with some fixed height, so for now we are using height equal to 250, cause we are having 5 cells in the table view (50(each cell height)*5). You can update the height as you needed.

@IBAction func onClickMenu(_ sender: Any) {
         
       let window = UIApplication.shared.keyWindow
       transparentView.backgroundColor = UIColor.black.withAlphaComponent(0.9)
       transparentView.frame = self.view.frame
       window?.addSubview(transparentView)
         
       let screenSize = UIScreen.main.bounds.size
       tableView.frame = CGRect(x: 0, y: screenSize.height, width: screenSize.width, height: height)
       window?.addSubview(tableView)
         
       let tapGesture = UITapGestureRecognizer(target: self, action: #selector(onClickTransparentView))
       transparentView.addGestureRecognizer(tapGesture)
         
       transparentView.alpha = 0
         
       UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 1.0, initialSpringVelocity: 1.0, options: .curveEaseInOut, animations: {
           self.transparentView.alpha = 0.5
           self.tableView.frame = CGRect(x: 0, y: screenSize.height - self.height, width: screenSize.width, height: self.height)
         }, completion: nil)    
     } 

Now, we create one selector function for the transparent view tap gesture, so when the user tap on the transparent view it will hide the transparent view and table view together with some animation.

@objc func onClickTransparentView() {
       let screenSize = UIScreen.main.bounds.size
       UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 1.0, initialSpringVelocity: 1.0, options: .curveEaseInOut, animations: {
           self.transparentView.alpha = 0
           self.tableView.frame = CGRect(x: 0, y: screenSize.height, width: screenSize.width, height: self.height)
         }, completion: nil)
     } 

We are almost done with the slide up animation, we only need to populate the table view with some data.

var settingArray = ["Profile","Favourite","Notification","Change Password","Logout"]
 
   override func viewDidLoad() {
         super.viewDidLoad()
         tableView.isScrollEnabled = true
         tableView.delegate = self
         tableView.dataSource = self
         tableView.register(CustomTableViewCell.self, forCellReuseIdentifier: "Cell")
     } 

UITableView Datasource and Delegate methods.

extension ViewController: UITableViewDataSource, UITableViewDelegate {
     
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
         return settingArray.count
     }
     
     func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
         guard let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as? CustomTableViewCell else {fatalError("Unable to deque cell")}
         cell.lbl.text = settingArray[indexPath.row]
         cell.settingImage.image = UIImage(named: settingArray[indexPath.row])!
         return cell
     }
     
     func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
         return 50
     }
 } 

Now we can run the project and check the complete functionality.

Download Resources for Create a Slide-Up Menu in Swift

You can download the source code of Create a Slide-Up Menu in Swift project from this GitHub.

I hope you like this tutorial and if you want any help let me know in the comment section.

Stay tuned, there is way more to come! follow me on Youtube, Instagram, Twitter. So you don’t miss out on all future Articles and Video tutorials.

. . .

I am delighted that you read my article! If you have any suggestions do let me know! I’d love to hear from you. ????