Latest 0.1.2
Homepage https://github.com/kuamanet/Discovery-Fab-Button
License MIT
Platforms ios 9.0
Dependencies SnapKit
Frameworks UIKit
Authors

Discovery Fab Button

A swift fab button with a circle reveal animation

alt text

alt text

alt text

alt text

Installation

CocoaPods

DiscoveryFabButtonView is available through CocoaPods. To install
it, simply add the following line to your Podfile:

pod 'DiscoveryFabButton', '~> 0.1.1'

Basic Usage

If you dig with the default colors of DiscoveryFabButton, just instantiate it, give it some menu items and add it to your view


// maybe in a controller
override func viewDidLoad() {
    super.viewDidLoad()
    let v = DiscoveryFabButtonView()
    var menuItems = [MenuItem]()
    menuItems.append(MenuItem(label: "Filter this 🙆‍♂️"))
    menuItems.append(MenuItem(label: "Don't click here 🙅‍♂️"))
    menuItems.append(MenuItem(label: "Whatever.. 🤷‍♂️"))
    v.menuItems = menuItems

    self.view.addSubview(v!)
}

If you are inside a UITableViewController, just adding DiscoveryFabButton won’t work. What you can do is


// maybe in a controller
override func viewDidLoad() {
    super.viewDidLoad()
    let v = DiscoveryFabButtonView()
    var menuItems = [MenuItem]()
    menuItems.append(MenuItem(label: "Filter this 🙆‍♂️"))
    menuItems.append(MenuItem(label: "Don't click here 🙅‍♂️"))
    menuItems.append(MenuItem(label: "Whatever.. 🤷‍♂️"))
    v.menuItems = menuItems

    v.inTableView() // <-- instead of self.view.addSubview(v!)
}

Constructors

Some constructors are available to customize colors, or provide the menu items


init(buttonColor:UIColor)
init(buttonColor:UIColor, buttonIcon:UIImage)
init(discoveryColor:UIColor)
init(buttonColor:UIColor, buttonIcon:UIImage, discoveryColor:UIColor)
init(buttonColor:UIColor, buttonIcon:UIImage, menu:[MenuItem])
init(buttonColor:UIColor, buttonIcon:UIImage, discoveryColor:UIColor, menu:[MenuItem])

Changing props

let v = DiscoveryFabButtonView()

v.buttonIcon = UIImage(named: "search")

v.buttonColor = #colorLiteral(red: 0.937254902, green: 0.462745098, blue: 0.4784313725, alpha: 1)

v.discoveryColor = #colorLiteral(red: 0.3921568627, green: 0.3411764706, blue: 0.6509803922, alpha: 1)

v.menuItemsColor = #colorLiteral(red: 0.4901960784, green: 0.4784313725, blue: 0.737254902, alpha: 1)

MenuItem

A menu item have a label and an id, both String. The id label is not required, but can be provided.

let menuItem = MenuItem(label: "Awesome label")
let menuItem = MenuItem(id: "somethingUnique", label: "Awesome label")

Public Methods

inTableView

Will append the button directly to the window. It’s up to you the removal, meaning that if you call inTableView inside a controller and then allow the user to navigate to another controller, the button will still be visible if you don’t remove it inside the controller’s viewWillDisappear.

override func viewDidLoad() {
    ...
    let v = DiscoveryFabButtonView()
    v.inTableView()
    ....
}

override func viewWillDisappear(_ animated: Bool) {
    v.remove()
}

remove

Will remove the view from it’s superview

let v = DiscoveryFabButtonView()
v.remove()

toggle, show, dismiss

Allow to open / close the menu from your code

let v = DiscoveryFabButtonView()
v.show()
v.dismiss()
v.toggle()

Delegate

1. Conform your view controller to the DiscoveryFabButtonViewDelegate protocol:

class ViewController: UIViewController, DiscoveryFabButtonViewDelegate

2. Assign the delegate to your AwesomeSpotlightView view instance:

let v = DiscoveryFabButtonView()
v.delegate = self

3. Implement the delegate protocol methods:

  • func onOpen() [optional]
  • func onClose() [optional]
  • func onMenuItemSelected(menuItem: MenuItem, index: Int) [required]
  • func onMenuItemUnselected(menuItem: MenuItem, index: Int) [optional]

Special thanks

To Roberto Gadotti, that came up with the graphic and interaction idea

Latest podspec

{
    "name": "DiscoveryFabButton",
    "version": "0.1.2",
    "summary": "Fab button with menu and circle reveal animation.",
    "description": "A fab button that when clicked will show a list of items, that behave like a list of radio buttons, aka they havenan "active" status and can be activated by clicking on them. Only one item can be active.nAlso a nice animated circle will overlay your UI when the fab is clicked",
    "homepage": "https://github.com/kuamanet/Discovery-Fab-Button",
    "screenshots": [
        "https://raw.githubusercontent.com/kuamanet/Discovery-Fab-Button/master/previews/simple.gif",
        "https://raw.githubusercontent.com/kuamanet/Discovery-Fab-Button/master/previews/tableview.gif",
        "https://raw.githubusercontent.com/kuamanet/Discovery-Fab-Button/master/previews/customizations.gif",
        "https://raw.githubusercontent.com/kuamanet/Discovery-Fab-Button/master/previews/delegates.gif"
    ],
    "license": {
        "type": "MIT"
    },
    "authors": {
        "Daniele De Matteo": "[email protected]"
    },
    "platforms": {
        "ios": "9.0"
    },
    "source": {
        "git": "https://github.com/kuamanet/Discovery-Fab-Button.git",
        "tag": "0.1.2"
    },
    "source_files": "DiscoveryFabButton/*.{swift}",
    "ios": {
        "resource_bundles": {
            "Icons": "DiscoveryFabButton/**/*.xcassets"
        }
    },
    "swift_version": "4.2",
    "frameworks": "UIKit",
    "dependencies": {
        "SnapKit": [
            "~> 4.0.0"
        ]
    }
}

Pin It on Pinterest

Share This