Creating a floating menu in an iOS application

Question

Looking to create a floating menu in Swift for an iOS application I am developing. Something along the lines of the little red circle menu as shown in the following image.

My initial thoughts were to extend the UIViewController class and add the respective drawing/logic there, however, the application is comprised of a few other controllers, more specifically the UITableViewController which in itself extends UIViewController. Is there perhaps a good place for an extension perhaps? Or is there a more eloquent way of drawing the menu on specific views without the mass duplication of menu related code?

The menu itself will be shown on most screens, so I need to selectively enable it. It'll also be somewhat contextual based on the view/screen the user is currently on.

Any awesome ideas?

Well I've tried the extending UIViewController method in my earlier prototype of the app, which worked for simple single views, but then I run into the issue of using UITableViewControllers, UINavigationControllers etc as I cannot simply have them extend the UIViewController without loosing the foundation laid by the respective classes. — Speedy, Aug 13 '15 at 04:18
just use container views http://stackoverflow.com/a/23403979/294884 — Fattie, Aug 13 '15 at 05:47

score 4 · Accepted Answer · answered Aug 13 '15 at 04:14

4

You can create your own with the animations and all the things, or you can check this library

https://github.com/lourenco-marinho/ActionButton

var actionButton: ActionButton!

    override func viewDidLoad() {
        super.viewDidLoad()

        let twitterImage = UIImage(named: "twitter_icon.png")!
        let plusImage = UIImage(named: "googleplus_icon.png")!

        let twitter = ActionButtonItem(title: "Twitter", image: twitterImage)
        twitter.action = { item in println("Twitter...") }

        let google = ActionButtonItem(title: "Google Plus", image: plusImage)
        google.action = { item in println("Google Plus...") }

        actionButton = ActionButton(attachedToView: self.view, items: [twitter, google])
        actionButton.action = { button in button.toggleMenu() }
    }

answered Aug 13 '15 at 04:14

Ashish Kakkad

23,586
12
103
136

Awesome, I ended up using parts of this pod to roll my own menu as it didn't quite meet my needs entirely, but it was definitely a good starting point! – Speedy Aug 13 '15 at 06:14
@r3oath Great :) Keep it up. Welcome anytime :) – Ashish Kakkad Aug 13 '15 at 06:15
How can i increase height and width of option icons like google plus etc i tried but its not working – Dilip Tiwari May 24 '19 at 06:08

Philippe · Answer 2 · 2016-08-22T17:49:07.453

2

There is another alternative with this great library :

https://github.com/yoavlt/LiquidFloatingActionButton

You just have to implement the delegate and the dataSource in your ViewController:

let floatingActionButton = LiquidFloatingActionButton(frame: floatingFrame)
floatingActionButton.dataSource = self
floatingActionButton.delegate = self

edited Aug 22 '16 at 17:49

answered Aug 22 '16 at 17:38

Philippe

1,567
16
18

score 1 · Answer 3 · answered Aug 13 '15 at 04:12

You could use view controller containment. The menu can be its own view controller with its view laid transparently over top the content view controller.

For example this can be set up in the storyboard by dragging out two container views into a vanilla view controller.

Creating a floating menu in an iOS application

3 Answers3

Linked