PushMenu

PushMenu is a revolutionary iOS component that can easily be added to any UIView. PushMenu displays options which users can select without lifting a finger, either by using 3D Touch or sliding their finger across the menu. A cell in the menu is highlighted based on the amount of force the user applies to his screen. After a delay, that highlighted cell gets selected and its associated action gets called. PushMenu feels right at home with the iOS ecosystem and is a new, yet comfortable approach to displaying menu options to users.

Note: PushMenu works on all devices - users with devices that don't support 3D Touch can simply use the backup sliding mechanism to choose options.

Demo

Most simulators don't have 3D Touch capabilites, it's recommended to run the example project on a device.

The first demo is of PushMenu with 3D Touch in action. The other demos are of the backup sliding mechanism.

video demo
demo
demo

Quick Start

import PushMenu

class MyViewController: UIViewController {

    let photo = UIView()

    override func viewDidLoad() {
        super.viewDidLoad()
        
        photo.pushMenu.isEnabled = true
        photo.pushMenu.addCell(title: "Cancel", type: .cancel, action: nil)
        photo.pushMenu.addCell(title: "Save to Library", type: .normal, action: {
            // ...
        })
    }
}

PushMenu is customizable. That means you can configure:

  • .opacity
  • .cellHeight
  • .font
  • .style (.light or .dark)
  • .selectionDelay

Compatibility

PushMenu requires iOS 9+ and is compatible with Swift 3 projects.

Installation

platform :ios, '9.0'
target 'ProjectName' do
use_frameworks!

pod 'PushMenu'

end
  • Or drag and drop the PushMenu framework into your project.

And import PushMenu in the files you'd like to use it.

Usage

It's recommended to look through the example project—it has detailed documentation of everything PushMenu has to offer.

Note: throughout this document, photo will act as the view being animated. You can use PushMenu on any instance of a UIView or UIView subclass, such as UILabel, UITextField, UIButton, etc.

Using PushMenu is easy.

  1. Enable PushMenu for the view.

  2. Customize your view's PushMenu.

  3. Add option cells.

Enabling PushMenu

Enabling PushMenu for a view automatically creates a new instance of a PushMenu and attaches a PushMenuGestureRecognizer to the view.

Note: You must enable pushMenu first before adding cells or customizing it (see below.)

photo.pushMenu.isEnabled = true

Setting this value to false will result in the PushMenu instance and PushMenuGestureRecognizer being removed.

Customizing a PushMenu

PushMenu wouldn't be cool if you couldn't customize it for your use case.

Style: .light or .dark (more themes will be available in future releases, feel free to contribute and add your own themes!)

photoView.pushMenu.style = .dark // default is .light

Opacity: the alpha value of the cells' background colors.

photoView.pushMenu.opacity = 0.75 // default is 1.0

Cell Height: the height for each option cell.

photoView.pushMenu.cellHeight = 45 // default is 55

Font: the font for the cells' title labels.

photoView.pushMenu.font = UIFont.systemFont(ofSize: 16, weight: UIFontWeightMedium) // default is UIFont.systemFont(ofSize: 18, weight: UIFontWeightMedium)

Selection Delay: how long it takes (in seconds) for a highlighted cell to become selected.

photoView.pushMenu.selectionDelay = 0.7 // default is 0.45

Adding Option Cells

PushMenu can only have 7 options - why?

All PushMenus should have a cancel option first. Cancel options don't become selected, giving users as much time as they need to decide what option they want.
Apple says the average force is ~ 1.0, the amount of force that is needed to highlight the first cell, which is why it's important that the first cell is of cancel type.

photoView.pushMenu.addCell(title: "Cancel", type: .cancel, action: nil)

Then you can add normal options:

photoView.pushMenu.addCell(title: "Save to Library", type: .normal, action: {
    // this closure gets called immediately after this cell is selected
})

... or destructive options:

photoView.pushMenu.addCell(title: "Delete Image", type: .destructive, action: {
    // ...
})

7 Options Limit

Most devices that have 3D Touch capabilites have a maximum force of 6.6666667, and Apple says that an average touch's force is ~1.0. PushMenu was built with this in mind, so each option cell of a menu takes 1 force unit. Meaning a force of 0-1 will highlight the first cell, a force of 1-2 will highlight the second cell, and so on until the 7th cell which gets highlighted from a force of 6 or above. A force unit of 1 is small, yet comfortable enough for a user to get a feel of what amount of pressure it takes to get to a certain cell.

Documentation

Option + click on any of PushMenu's properties/methods for detailed documentation.
documentation

GitHub