ContextMenu

An iOS context menu UI inspired by Things 3.

Programming language: Swift

License: MIT License

Tags: UI     Menu    

Latest version: v0.4.0

README

• Contextual menus with delightful animations and styles
• Total control over menu contents using your own UIViewControllers
• Tons of feature and interaction customizations

Installation

Just add ContextMenu to your Podfile and pod install. Done!

pod 'ContextMenu'

For Carthage, just add GitHawkApp/ContextMenu to your Cartfile and carthage bootstrap.

github "GitHawkApp/ContextMenu"

Usage

Show the menu from one of your UIViewControllers:

ContextMenu.shared.show(
  sourceViewController: self,
  viewController: MyContentViewController()
)

You must provide a custom UIViewController to display in the menu. The only requirement is that you must set preferredContentSize to size your content.

class MyContentViewController: UIViewController {
  override func viewDidLoad() {
    super.viewDidLoad()
    title = "Demo"
    preferredContentSize = CGSize(width: 200, height: 200)
  }
}

Customizations

Display from a Source View

Animate the menu out from a button or view. ContextMenu will take care of layout so that your menu doesn't clip the screen.

@IBAction func onButton(_ sender: UIButton) {
  ContextMenu.shared.show(
    sourceViewController: self,
    viewController: MyContentViewController(),
    sourceView: sender
  )
}

Container Style & Display

Use ContextMenu.Options to change the appearance of the containing view.

ContextMenu.shared.show(
  sourceViewController: self,
  viewController: MenuViewController(),
  options: ContextMenu.Options(containerStyle: ContextMenu.ContainerStyle(backgroundColor: .blue)),
  sourceView: button
)

There's plenty more you can customize with ContextMenu.ContainerStyle:

• cornerRadius: The corner radius of the menu
• shadowRadius and shadowOpacity: Appearance of the container shadow
• xPadding, yPadding, edgePadding: Padding from the source view and screen edge
• overlayColor: The color of the background
• motionEffect: Respond to device gyroscope changes, similar to app icons on Springboard.app.

If you want more customizations, we will gladly accept a Pull Request!

Acknowledgements

• Inspiration from Things 3
• Created with ❤️ by Ryan Nystrom