Create a slide-up menu view in Swift(programmatically)

This is a quick tutorial on how to create a slide-up menu view in iOS

We’ll start from scratch with a button and its IBAction.
Our goal: tapping on the button will display a splendid view sliding up from the bottom and displaying menu options.

1. Create the container view

Our slide-up view will need a container.

// Create the container view
var containerView = UIView()

Inside our buttonTapped() we’ll set up the container view.

@IBAction func buttonTapped(_ sender: UIButton) {
  let window = UIApplication.shared.keyWindow
  containerView.backgroundColor = UIColor.
                                  black.withAlphaComponent(0.9)
  containerView.frame = self.view.frame
  
  window?.addSubview(containerView)
}

Since this view will be closed on tapping, we’ll also add a gesture recognizer

@IBAction func buttonTapped(_ sender: UIButton) {
  ...
  let tapGesture = UITapGestureRecognizer(target: self, 
                    action: #selector(slideUpViewTapped))
  containerView.addGestureRecognizer(tapGesture)
}
@objc func slideUpViewTapped() {
}

So far so good, let’s add some animation to it for spice up the experience.
We’ll animate the view with spring damping using animate(withDuration:)

// On opening
@IBAction func buttonTapped(_ sender: UIButton) {
  ...
  containerView.alpha = 0
  UIView.animate(withDuration: 0.5, 
                 delay: 0, usingSpringWithDamping: 1.0, 
                 initialSpringVelocity: 1.0, 
                 options: .curveEaseInOut, animations: {
    self.containerView.alpha = 0.8
  }, completion: nil)
}
// On closing
@objc func slideUpViewTapped() {
  let screenSize = UIScreen.main.bounds.size
  UIView.animate(withDuration: 0.5, 
                 delay: 0, usingSpringWithDamping: 1.0, 
                 initialSpringVelocity: 1.0, 
                 options: .curveEaseInOut, animations: {
    self.containerView.alpha = 0
  }, completion: nil)
}

The result:

2. Create the slide-up View

Now, we’ll deal with the main part of our view: the slide-up View.
For this tutorial, we’ll be using a Table View to display 4 menu items.

var slideUpView = UITableView()
let slideUpViewHeight: CGFloat = 200

Again, inside our buttonTapped() we’ll set up the slide-up view. The view will be on the bottom, as wide as the screen’s width, and as high as needed to contain 4 menu items (we’ll start with 200).

@IBAction func buttonTapped(_ sender: UIButton) {
  ...
  let screenSize = UIScreen.main.bounds.size
  slideUpView.frame = CGRect(x: 0, y: screenSize.height, width: screenSize.width, height: slideUpViewHeight)
  slideUpView.separatorStyle = .none
  window?.addSubview(slideUpView)
}

Update the animations on opening and closing

// On opening
@IBAction func buttonTapped(_ sender: UIButton) {
  ...
  UIView.animate(withDuration: 0.5, 
                 delay: 0, usingSpringWithDamping: 1.0, 
                 initialSpringVelocity: 1.0, 
                 options: .curveEaseInOut, animations: {
    self.containerView.alpha = 0.8
    self.slideUpView.frame = CGRect(x: 0, y: screenSize.height - self.slideUpViewHeight, width: screenSize.width, height: self.slideUpViewHeight)
  }, completion: nil)
}
// On closing
@objc func slideUpViewTapped() {
  ...
  let screenSize = UIScreen.main.bounds.size
  UIView.animate(withDuration: 0.5, 
                 delay: 0, usingSpringWithDamping: 1.0, 
                 initialSpringVelocity: 1.0, 
                 options: .curveEaseInOut, animations: {
    self.containerView.alpha = 0
    self.slideUpView.frame = CGRect(x: 0, y: screenSize.height, width: screenSize.width, height: self.slideUpViewHeight)
  }, completion: nil)
}

The Result:

3. Create menu items (Table cells)

We’ll first need a custom table cell

class SlideUpViewCell: UITableViewCell {
  lazy var backView: UIView = {
    let view = UIView(frame: CGRect(x: 0, y: 0, 
                             width: self.frame.width, height: 50))
    return view
}()
  lazy var iconView: UIImageView = {
    let view = UIImageView(frame: CGRect(x: 15, y: 10, width: 30,   
                                  height: 30))
    return view
}()
  lazy var labelView: UILabel = {
    let view = UILabel(frame: CGRect(x: 60, y: 10, 
                          width: self.frame.width - 75, height: 30))
    return view
}()
  override func awakeFromNib() {
    super.awakeFromNib()
  }
  override func setSelected(_ selected: Bool, animated: Bool) {
    super.setSelected(selected, animated: animated)
    addSubview(backView)
    backView.addSubview(iconView)
    backView.addSubview(labelView)
    // Configure the view for the selected state
  }
}

Back to the View Controller, we’ll add a simple data source and configure our slideUpView
(I added some icon images to the project, for the purpose of this tutorial)

// our simple data source
let slideUpViewDataSource: [Int: (UIImage?, String)] = [
  0: (UIImage(named: "star"), "Save this tutorial"),
  1: (UIImage(named: "share"), "Share it"),
  2: (UIImage(named: "copy"), "Make a copy"),
  3: (UIImage(named: "applaud"), "Applaud it")
]
override func viewDidLoad() {
  ...
  slideUpView.isScrollEnabled = true
  slideUpView.delegate = self
  slideUpView.dataSource = self
  slideUpView.register(SlideUpViewCell.self, 
                       forCellReuseIdentifier: "SlideUpViewCell")
}

Conforming to the UITableViewDelegate and UITableViewDataSource

extension ViewController: UITableViewDelegate, UITableViewDataSource {
  func tableView(_ tableView: UITableView, numberOfRowsInSection 
         section: Int) -> Int {
    slideUpViewDataSource.count
  }
  func tableView(_ tableView: UITableView, cellForRowAt indexPath:  
         IndexPath) -> UITableViewCell {
    guard let cell = tableView
      .dequeueReusableCell(withIdentifier: "SlideUpViewCell", 
      for: indexPath) as? SlideUpViewCell 
    else { fatalError("unable to deque SlideUpViewCell") }
  
  cell.iconView.image = slideUpViewDataSource[indexPath.row]?.0
  cell.labelView.text = slideUpViewDataSource[indexPath.row]?.1
  return cell
}
  func tableView(_ tableView: UITableView, heightForRowAt 
         indexPath: IndexPath) -> CGFloat {
    return 50
  }
}

Tada!

We have successfully created a slide-up menu view. I’ll leave the rest for your creativity to shine ✨ ✨ and hope you enjoyed this quick tutorial.