fanmenu
  • November 25, 2023

Easily customizable floating circle menu created with Macaw

Usage


  1. Create UIView in your storyboard or programatically.
  2. Set FanMenu as UIView class.
  3. Set the button

fanMenu.button = FanMenuButton(
id: “main”,
image: “plus”,
color: Color(val: 0x7C93FE)
)

  1. Set menu items

fanMenu.items = [
FanMenuButton(
id: “exchange_id”,
image: “exchange”,
color: Color(val: 0x9F85FF)
),

FanMenuButton(
id: “visa_id”,
image: “visa”,
color: Color(val: 0xF55B58)
)
]

  1. Add an event handler

// call before animation
fanMenu.onItemDidClick = { button in
print(“ItemDidClick: \(button.id)”)
}
// call after animation
fanMenu.onItemWillClick = { button in
print(“ItemWillClick: \(button.id)”)
}

  1. Configure optional parameters

// distance between button and items
fanMenu.menuRadius = 90.0

// animation duration
fanMenu.duration = 0.35

// menu opening delay
fanMenu.delay = 0.05

// interval for buttons in radians
fanMenu.interval = (0, 2.0 * M_PI)

// menu background color
fanMenu.menuBackground = Color.red

  1. Useful methods

fanMenu.isOpen
fanMenu.open()
fanMenu.close()

Customization


FanMenu is created with Macaw, our vector graphics Swift library. Thanks to that, it can be easily modified and improved for your purposes.

All source code is located in one single file called FanMenu.swift. To modify the menu simply copy this file and apply necessary changes.

Examples


To try out the FanMenu examples:

  • Clone the repo git clone git@github.com:exyte/fan-menu.git
  • Open terminal and run cd <FanMenuRepo>/Example
  • Run pod install to install all dependencies
  • Run xed . to open project in the Xcode
  • Try it!

We have the following examples:

Installation


CocoaPods

 

pod ‘FanMenu’

Carthage

 

github ‘Exyte/fan-menu’

Manually

Drop FanMenu.swift into your project.

Requirements


  • iOS 9.0+ / macOS 10.12+
  • Xcode 10.2+

GitHub


View Github

#animation #ios #menu #swift #ui
YOU MIGHT ALSO LIKE...
🧭 NavigationKit

NavigationKit is a lightweight library which makes SwiftUI navigation super easy to use. 💻 Installation 📦 Swift Package Manager Using Swift Package Manager, add ...

swiftui-navigation-stack

An alternative SwiftUI NavigationView implementing classic stack-based navigation giving also some more control on animations and programmatic navigation. NavigationStack Installation ...

Stinsen

Simple, powerful and elegant implementation of the Coordinator pattern in SwiftUI. Stinsen is written using 100% SwiftUI which makes it ...

SwiftUI Router

With SwiftUI Router you can power your SwiftUI app with path-based routing. By utilizing a path-based system, navigation in your app becomes ...

FlowStacks

This package takes SwiftUI's familiar and powerful NavigationStack API and gives it superpowers, allowing you to use the same API not just ...