⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Swift UI library made by @Ramotion

Overview

CIRCLE MENU

Simple, elegant UI menu with a circular layout and material design animations


We specialize in the designing and coding of custom UI for Mobile Apps and Websites.

Stay tuned for the latest updates:


Twitter CocoaPods CocoaPods CocoaPods Carthage compatible codebeat badge Travis Donate

Requirements

  • iOS 9.0+
  • Xcode 9.0.1

Installation

Just add CircleMenuLib folder to your project.

or use CocoaPods with Podfile:

pod 'CircleMenu'

or Carthage users can simply add to their Cartfile:

github "Ramotion/circle-menu"

Usage

with storyboard
  1. Create a new UIButton inheriting from CircleMenu

  2. Add images for Normal and Selected state

  3. Use delegate method to configure buttons

func circleMenu(circleMenu: CircleMenu, willDisplay button: UIButton, atIndex: Int)
  1. Use properties to configure CircleMenu
@IBInspectable var buttonsCount: Int = 3
@IBInspectable var duration: Double = 2 // circle animation duration
@IBInspectable var distance: Float = 100 // distance between center button and buttons
programmatically
let button = CircleMenu(
  frame: CGRect(x: 200, y: 200, width: 50, height: 50),
  normalIcon:"icon_menu",
  selectedIcon:"icon_close",
  buttonsCount: 4,
  duration: 4,
  distance: 120)
button.delegate = self
button.layer.cornerRadius = button.frame.size.width / 2.0
view.addSubview(button)
delegate methods
// configure buttons
optional func circleMenu(circleMenu: CircleMenu, willDisplay button: UIButton, atIndex: Int)

// call before animation
optional func circleMenu(circleMenu: CircleMenu, buttonWillSelected button: UIButton, atIndex: Int)

// call after animation
optional func circleMenu(circleMenu: CircleMenu, buttonDidSelected button: UIButton, atIndex: Int)

// call upon cancel of the menu - fires immediately on button press
optional func menuCollapsed(circleMenu: CircleMenu)

// call upon opening of the menu - fires immediately on button press
optional func menuOpened(circleMenu: CircleMenu)

🗂 Check this library on other language:

📄 License

Circle Menu is released under the MIT license. See LICENSE for details.

This library is a part of a selection of our best UI open-source projects.

If you use the open-source library in your project, please make sure to credit and backlink to www.ramotion.com

📱 Get the Showroom App for iOS to give it a try

Try this UI component and more like this in our iOS app. Contact us if interested.



Comments
  • Enhanement request: Buttons popup just in one side

    Enhanement request: Buttons popup just in one side

    Hi, I really like your menu and I have idea for improvement that could be very useful for me and with that I can use this control in my app. What about some option that buttons would show only in just half circle (180 degrees not full 360 degrees)? User could set if he wants to use control in left/right/bottom/down side of screen and buttons would be shown in visible area. I think the image would be best for explain this: img_3560

    I made just few changes to your code to try this if it would be possible and it works great. What do you think about this? Thanks

    P.s.: Are you planning to distribute your menu via Carthage too?

    enhancement 
    opened by LiborZ 11
  • Pod install doesn't work properly

    Pod install doesn't work properly

    I tried using the Pod install and even though the files copied across with the Pod it wouldn't see the files when I was setting up the CircleMenuDelegate, I kept getting an error message that CircleMenuDelegate was undefined. However, if I copied the files across to the project then it noticed it straight away and I was able to get it working :)

    Not sure if I did something wrong or if the setup with the Pod isn't quite right.

    opened by andrewmarmion 8
  • CircleMenuButton is undeclared when using delegate methods

    CircleMenuButton is undeclared when using delegate methods

    Delegates methods in UIViewController will not run because CircleMenuButton is undeclared. I'm using CircleMenu as a Pod.

    func circleMenu(circleMenu: CircleMenu, willDisplay button: CircleMenuButton, atIndex: Int)

    Adding a CircleMenu to the storyboard works fine. But I can't use the delegate methods.

    opened by CraigMcCahill 4
  • Add tap gesture recognizer on view to close the menu

    Add tap gesture recognizer on view to close the menu

    Great work! I was just wondering if there was a function that I can call to close the menu without selecting ? For example, I would like to add a tap gesture recognizer on self.view so that users can close the menu by tapping anywhere on the screen.

    opened by Jackson0111 4
  • How can I have some padding around the images in a small circle menu?

    How can I have some padding around the images in a small circle menu?

    For my app, I want to add a smaller circle menu, not as big as the one shown in the demo. Its width and height are 32x32.

    When i resize the menu button in the storyboard, the menu buttons that pops up is smaller as well, which is what I expected. However, the images on the button are still as big. This means that he nice padding around the images is gone, and the button looks like this:

    2018-04-18 8 17 00

    I tried to manually add some transparent padding on the image, but the result stayed the same.

    opened by Sweeper777 3
  • Adding open menu delegate, fixed close menu delegate

    Adding open menu delegate, fixed close menu delegate

    Added an open menu delegate that will get fired when the user select the button to open the menu. Corrected the close menu delegate so that it is not fired for every button of the menu. It will now only fire once. Changed both open menu and close menu delegates to fire asynchronously Updated README Updated for Swift 3.2 (.pi updates)

    opened by tache 3
  • sub button shape issue

    sub button shape issue

    hello , first i thank you for make a good library i have some issue

    i used only basic function, but shape of sub button is strange depending on screen size (4-inch is normal but 4.7 and 5.5 inch is strange like to under picture)

    what happen? can you help me?

    2017-09-30 8 33 17 2017-09-30 8 32 27 img_4565

    opened by justin3527 2
  • Adding open menu delegate, fixed close menu delegate

    Adding open menu delegate, fixed close menu delegate

    Added an open menu delegate that will get fired when the user select the button to open the menu. Corrected the close menu delegate so that it is not fired for every button of the menu. It will now only fire once. Changed both open menu and close menu delegates to fire asynchronously

    opened by tache 2
  • Support for Swift 3

    Support for Swift 3

    Hi,

    When updated to Xcode 8, and Swift 3, the animations stop working properly. The secondary button, when tapped, appears in the center (when the main menu button is), while the color animation happens.

    opened by jacobokoenig 2
  • Fix crash in example

    Fix crash in example

    For some reason got crash on iPhone 6 plus (8.3) comment out initialVelocity setter fixes this issue. Of course, it's not a proper solution, just want to point to this crash.

    CircleMenu[10725:1299086] *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[CASpringAnimation setInitialVelocity:]: unrecognized selector sent to instance 0x174035720'

    But I not understand, why it's not available..

    opened by skywinder 2
  • NativeScript Circular Menu Plugin for Android

    NativeScript Circular Menu Plugin for Android

    Hi - First of all thanks for releasing the plugin, Circular Menu in NativeScript. I believe the plugin is intended to design to run in for iOS, the plugin - nativescript-circular-menu is not working for Android. Could any one please let know if there any plan of releasing it for Android in any period of time.

    Thanks Sujit

    opened by sujitbulu 1
  • Fixed Readability issue in the README

    Fixed Readability issue in the README

    Increased size of header text in usability tab of README since previously it was a bit difficult to read and the text size made the header look like text description instead of a header.

    Changes made:

    with storyboard -> ### with storyboard
    programmatically -> ### programmatically
    delegate methods -> ### delegate methods
    opened by ImOwly 0
  • #issue(will select , did select doesn't work )

    #issue(will select , did select doesn't work )

    First thing thanks for this component, I have a problem when using this component in the new app call back methods for buttons work but when to add it in my app delegate methods will select, did select doesn't work I need a solution for that.

    Thanks

    opened by sarakhater 1
  • Circle Menu closing animation.

    Circle Menu closing animation.

    Hey, first of all you developed a nice library thank you for that. I changed my start and end angles to -90 - 90 because I want to use only top of circle. It works very well but there is a error with closing animation. It still closing with 0-360 degree. How can I set start and end angles for closing animation ? Thanks.

    opened by emresancaktar 1
Owner
Ramotion
UI Engineering, UI/UX Design and Front-End Development Agency
Ramotion
A swift library based on the various options menu in material design in Android

KTOptionMenu Description KTOptionMenu is a swift library based on the various options menu in material design in Android that allows you to easily cre

null 1 Jul 21, 2022
Library provides easy to implement variation of Android (Material Design) Floating Action Button for iOS. You can use it as your app small side menu. 🌶

RHSideButtons ?? Library provides easy to implement variation of Android (Material Design) Floating Action Button for iOS. You can use it as your app

Robert Herdzik 166 May 3, 2022
A radial/circular menu featuring spring animations.

ALRadialMenu A radial/circular menu featuring spring animations. Written in swift. Experimenting with fluent interfaces (https://github.com/vandadnp/s

Alex Littlejohn 50 Jul 1, 2022
Menu with a circular layout based on Macaw

FanMenu Easily customizable floating circle menu created with Macaw We are a development agency building phenomenal apps. Usage Create UIView in your

Exyte 711 Jul 31, 2022
PagingKit provides customizable menu UI. It has more flexible layout and design than the other libraries.

PagingKit provides customizable menu & content UI. It has more flexible layout and design than the other libraries. What's this? There are many librar

Kazuhiro Hayashi 1.3k Sep 14, 2022
A Material Design drop down for iOS

A Material Design drop down for iOS written in Swift. Demo Do pod try DropDown in your console and run the project to try a demo. To install CocoaPods

AssistoLab 2.2k Sep 16, 2022
Grid and Circular Menu for iOS.

IGCMenu IGCMenu library gives easy way to create Grid and Circular menu in app. This is light weight and highly customisable menu.Support iOS 7 and ab

Sunil Sharma 137 Apr 21, 2022
Simple and Elegant Drop down menu for iOS 🔥💥

SwiftyMenu is simple yet powerfull drop down menu component for iOS. It allow you to have drop down menu that doesn't appear over your views, which gi

Karim Ebrahem 496 Sep 17, 2022
Slide-Menu - A Simple Slide Menu With Swift

Slide Menu!! Весь интерфейс создан через код

Kirill 0 Jan 8, 2022
The elegant yet functional dropdown menu, written in Swift, appears underneath the navigation bar to display a list of defined items when a user clicks on the navigation title.

Introduction The elegant yet functional dropdown menu, written in Swift, appears underneath the navigation bar to display a list of defined items when

Tho Pham 2.7k Sep 15, 2022
SwiftySideMenu is a lightweight and easy to use side menu controller to add left menu and center view controllers with scale animation based on Pop framework.

SwiftySideMenu SwiftySideMenu is a lightweight, fully customizable, and easy to use controller to add left menu and center view controllers with scale

Hossam Ghareeb 84 Feb 4, 2022
Single selection menu with cool animations

EEJSelectMenu EEJSelectMenu is a responsive single selection menu for iOS. Project allows for implementing a menu with different number of buttons and

Ehsan Jahromi 22 Aug 8, 2020
Swift-sidebar-menu-example - Create amazing sidebar menu with animation using swift

 SWIFT SIDEBAR MENU EXAMPLE In this project I create a awesome side bar menu fo

Paolo Prodossimo Lopes 4 Jul 25, 2022
EasyMenu - SwiftUI Menu but not only button (similar to the native Menu)

EasyMenu SwiftUI Menu but not only button (similar to the native Menu) You can c

null 8 Aug 22, 2022
Hamburger Menu Button - A hamburger menu button with full customization

Hamburger Menu Button A hamburger menu button with full customization. Inspired by VinhLe's idea on the Dribble How to use it You can config the looks

Toan Nguyen 114 Jun 12, 2022
UIKit drop down menu, simple yet flexible and written in Swift

DropDownMenuKit DropDownMenuKit is a custom UIKit control to show a menu attached to the navigation bar or toolbar. The menu appears with a sliding an

Quentin Mathé 250 Sep 15, 2022
Control your display's brightness from the macOS menu bar. Simple and easy to use.

MonitorControl Lite Control your display's brightness from the macOS menu bar. Simple and easy to use. About MonitorControl Lite is a simplified versi

null 49 Aug 28, 2022
📷A simple and convenient way to manage your webcam's picture settings, right from your menu bar

Viewfinder A simple and convenient way to manage your webcam's picture settings, right from your menu bar. About • Download • Building from Source • C

Lukas Romsicki 22 Sep 20, 2022
Beautiful iOS side menu library with parallax effect. Written in Swift

AKSideMenu AKSideMenu is a double side menu library with parallax effect. Example Project See the contained examples to get a sample of how AKSideMenu

Diogo Autilio 281 Aug 25, 2022