Git Product home page Git Product logo

ramotion / circle-menu Goto Github PK

View Code? Open in Web Editor NEW
3.4K 83.0 356.0 6.31 MB

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

Home Page: https://www.ramotion.com/circle-menu-open-source-iphone-app-development-library/

License: MIT License

Swift 97.71% Ruby 1.11% Objective-C 1.18%
swift ios component library

circle-menu's Introduction

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.



circle-menu's People

Contributors

0ber avatar aleksei1000000 avatar alexmik89 avatar artemkyslicyn avatar derekvallar avatar igork-ramotion avatar ikolpachkov avatar juriv avatar nzufelt avatar pdenya avatar ramotiondev avatar ramotionrussell avatar ronnielsen avatar sairamkotha avatar skywinder avatar tache avatar younatics avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

circle-menu's Issues

Enhanement request: Customize popup center

The menu pops up where the initial button (CircleMenu) is located.
It would be nice to pop it up in the center of the superview no matter where the initiating button is located (in a corner for example).

Very attractive animations. You've spent a lot of time on this. Thanks.

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.

iOS 8 compatibility

It seems that the lib is using CASpringAnimation which is only available on iOS9+. But the readme says it is iOS8 compatible.

Improvement: Make CircleMenu class more customizable

Hey there, it would be nice if the UIControlEvents were more customizable. For example I don't want to show the user all the buttons on "TouchUpInside" but instead want to use "TouchDragEnter".

Right now the onTap method is not made public so I can't override the targets.

Thank you!

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.

Error: the example run failed

i clone the project to local and run , i modify nothing,and build, run , the result is

2016-07-19 14:22:08.848 CircleMenuDemo[10474:246504] * Terminating app due to uncaught exception 'NSInvalidArgumentException'**, reason: '-[CASpringAnimation setInitialVelocity:]: unrecognized selector sent to instance 0x7ff65c829070'
*** First throw call stack:
(
0 CoreFoundation 0x00000001099c2c65 exceptionPreprocess + 165
1 libobjc.A.dylib 0x000000010b9e2bb7 objc_exception_throw + 45
2 CoreFoundation 0x00000001099ca0ad -[NSObject(NSObject) doesNotRecognizeSelector:] + 205
3 CoreFoundation 0x000000010992013c __forwarding
+ 988
4 CoreFoundation 0x000000010991fcd8 CF_forwarding_prep_0 + 120
5 CircleMenuDemo 0x000000010978b9af TFFC14CircleMenuDemo10CircleMenuP33_3CC1F29DA948E4EC78CFD33B8964897B16showCenterButtonFT8durationSf5delaySd_T_U0_FCSo17CASpringAnimationT + 271
6 CircleMenuDemo 0x000000010978ba18 TTRXFo_oCSo17CASpringAnimation_dT__XFo_iS__dT
+ 24
7 CircleMenuDemo 0x0000000109782755 _TF14CircleMenuDemo4IniturFTx5blockFT6objectx_T__x + 101
8 CircleMenuDemo 0x00000001097870ad TFC14CircleMenuDemo10CircleMenuP33_3CC1F29DA948E4EC78CFD33B8964897B16showCenterButtonfT8durationSf5delaySd_T + 925
9 CircleMenuDemo 0x0000000109785474 TFC14CircleMenuDemo10CircleMenu13buttonHandlerfCSo8UIButtonT + 2004
10 CircleMenuDemo 0x000000010978597a TToFC14CircleMenuDemo10CircleMenu13buttonHandlerfCSo8UIButtonT + 58
11 UIKit 0x000000010a717d62 -[UIApplication sendAction:to:from:forEvent:] + 75
12 UIKit 0x000000010a82950a -[UIControl _sendActionsForEvents:withEvent:] + 467
13 UIKit 0x000000010a8288d9 -[UIControl touchesEnded:withEvent:] + 522
14 UIKit 0x000000010a764958 -[UIWindow _sendTouchesForEvent:] + 735
15 UIKit 0x000000010a765282 -[UIWindow sendEvent:] + 682
16 UIKit 0x000000010a72b541 -[UIApplication sendEvent:] + 246
17 UIKit 0x000000010a738cdc _UIApplicationHandleEventFromQueueEvent + 18265
18 UIKit 0x000000010a71359c _UIApplicationHandleEventQueue + 2066
19 CoreFoundation 0x00000001098f6431 CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION + 17
20 CoreFoundation 0x00000001098ec2fd __CFRunLoopDoSources0 + 269
21 CoreFoundation 0x00000001098eb934 __CFRunLoopRun + 868
22 CoreFoundation 0x00000001098eb366 CFRunLoopRunSpecific + 470
23 GraphicsServices 0x000000010e7c9a3e GSEventRunModal + 161
24 UIKit 0x000000010a7168c0 UIApplicationMain + 1282
25 CircleMenuDemo 0x000000010978db42 main + 114
26 libdyld.dylib 0x000000010c293145 start + 1
)
libc++abi.dylib: terminating with uncaught exception of type NSException
(lldb)

how many times does the function menuCollapsed run?

  private func buttonsAnimationIsShow(isShow isShow: Bool, duration: Double, hideDelay: Double = 0) {
    guard let buttons = self.buttons else {
      return
    }

    let step: Float = 360.0 / Float(self.buttonsCount)
    for index in 0..<self.buttonsCount {
      guard case let button as CircleMenuButton = buttons[index] else { continue }
      let angle: Float = Float(index) * step
      if isShow == true {
        delegate?.circleMenu?(self, willDisplay: button, atIndex: index)

        button.rotatedZ(angle: angle, animated: false, delay: Double(index) * showDelay)
        button.showAnimation(distance: distance, duration: duration, delay: Double(index) * showDelay)
      } else {
        button.hideAnimation(
          distance: Float(self.bounds.size.height / 2.0),
          duration: duration, delay: hideDelay)
        self.delegate?.menuCollapsed?(self)
      }
    }
    if isShow == false { // hide buttons and remove
      self.buttons = nil
    }
  }

when run the demo, function menuCollapsed will execute 5 times which is the number of the buttons. Is this by design?

When close action happen, the function menuCollapsed run once is better.

        // self.delegate?.menuCollapsed?(self)
      }
    }
    if isShow == false { // hide buttons and remove
      self.delegate?.menuCollapsed?(self)
      self.buttons = nil
    }

StoryBoard Constraints

Any time I try to put constraints on the button from the storyboard it no longer works.

ios8 buttonDidSelected crash

let rotation = Init(CASpringAnimation(keyPath: "transform.rotation")) {
$0.duration = NSTimeInterval(1.5)
$0.toValue = (0)
$0.fromValue = (Float(-180).degrees)
$0.damping = 10
//$0.initialVelocity = 0
$0.beginTime = CACurrentMediaTime() + delay
}

Center button

We used the previous version of this and it worked very well. Since the swift 3 update, we have a center button popping up in the center of the circle and rotates when a button is pressed. We cannot seem to find where to prevent this from happening. Love the animation of the buttons on the outside but prefer it without the center button animation. I will appreciate your assistance with this.

Menu icon position

It's a pretty great component but I rarely see that we have the menu icon in the middle of the page
So could we move the icon somewhere (up top left) and animate items in different places?

Really appreciate your work!

Function buttonDidSelected not working

Is not triggering at all?

func circleMenu(_ circleMenu: CircleMenu, buttonDidSelected button: UIButton, atIndex: Int) {
        print("button did select: \(atIndex)")
    }

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

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.

Android Version

Hi Developer,
I really like this dail. Hope you don't mind porting it to Android.

How to remove from viewcontroller?

I can't seem to remove this object, i tried

    buttonMenu.alpha = 0.0
    buttonMenu.isHidden = true
    buttonMenu.platform?.isHidden = true
    buttonMenu.platform?.removeAllSubviews()
    buttonMenu.platform?.removeFromSuperview()
    buttonMenu.isEnabled = false
    buttonMenu.buttons?.removeAll()
    buttonMenu.platform?.resignFirstResponder()
    buttonMenu.platform?.alpha = 0.0

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.

Background View : Swift 3 update

Hello , I had a background view so that the whole menu is a circle.
I used self.superview.insertSubview(self.backgroundView,belowSubview:self)
It worked fine with 2.3 but now with Swift 3 the buttons appear below the backgroundView.
Any suggestions on how to fix that ?
Thank you

The application Example does not contain CFBundleVersion in info.plist

Hello, the application Example does not contain CFBundleVersion in info.plist

Message Xcode
Failed to install the requested application
"The application's Info.plist does not contain CFBundleVersion. Ensure your bundle contains a CFBundleVersion"

I'm attentive, thank you very much

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?

Cannot get images displayed

Hey I am trying to output the images onto the circle menu buttons, but for some reason I am not having the images display. I am following what exactly is given in the sample project.

`func circleMenu(_: CircleMenu, willDisplay button: UIButton, atIndex: Int) {
    button.backgroundColor = UIColor.gray
    let img = UIImage(named: "back_arrow_w")
    button.setImage(img, for: .normal)
    
    let highlightedImage = UIImage(named: "back_arrow_w")?.withRenderingMode(.alwaysTemplate)
    button.setImage(highlightedImage, for: .highlighted)
    button.tintColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.3)
    
}`

I even used just an array like
let hello = "back" let items: [String] = [ hello, hello, hello, hello ]

Can anyone help me out. Also how will i be able to fill the images in those button. I have circular images which I want completely to be filled.

Thanks

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

Circle menu with single button.

I need to display single button in circle menu. by default single button not displaying, more than one button only displaying.

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.

How i can hide the button in the next view controller?

Hi, this is just a question, i have a navigation controller with a master tableView, and the detail view (second view controller), so, the button is placed in the first view, a tableView controller like this self.navigationController?.view.addSubview(button)

Now, the button is showing up in the next screen, in my detail view (second view controller), how i can hide the button in my detail view?, any idea?

Thanks!

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.

Button Click Not Working

Hi, Button WillbeSelected is Called when a button is clicked , but DidSelected wont
please fix it or guide me if I'm doing something wrong .

func circleMenu(_ circleMenu: CircleMenu, buttonDidSelected button: UIButton, atIndex: Int) { print("clicked") }

and obviously I've extended delegate , cause other methods and customizing buttons is working .

Use CircleMenu with Objc?

Hello,
some months ago I have already used CircleMenu in a Objc App.
However, today I created the framework again with the latest files and it seems that some things have change: e.g. the normalIcon and selectedIcon properties are missing. (These changes are not mentioned in the changelog)

Did I miss something?

Thank you

Jan

var buttons: [UIButton] should be public

When trying to access buttons array property, it shows a compile-time error, saying:

"buttons" is inaccessible due to "internal" protection level

What I had to do to fix it is to unlock the pod and let it a public property which is inappropriate to deal with pods.

Thank you for your efforts.

Problem!

I can't even set the delegate from storyboard! I tried dragging to the viewcontroller it isn't working :[

How to move another viewcontroller when button is tapped ?

`func circleMenu(_ circleMenu: CircleMenu, buttonDidSelected button: UIButton, atIndex: Int) {
print("button did selected: (atIndex)")

let storyboard = UIStoryboard(name: "Main", bundle: nil)
let annoucement = storyboard.instantiateViewController(withIdentifier: "FirstVC") as! FirstVC

}`

This method is not working. please guide me

Question:

How would you go about having the menu be in the open position when app loads

size!!!

in android studio i cant just adjust it menu size(i mean the the size of buttens)
any one know how to change their size?

Failed to install CircleMenu version 3.0.5

I put this line in the pod file:

pod 'CircleMenu', '3.0.5'

and did pod install, then this error message came out:

[!] Unable to satisfy the following requirements:

- `CircleMenu (= 3.0.5)` required by `Podfile`

None of your spec sources contain a spec satisfying the dependency: `CircleMenu (= 3.0.5)`.

You have either:
 * out-of-date source repos which you can update with `pod repo update` or with `pod install --repo-update`.
 * mistyped the name or version.
 * not added the source repo that hosts the Podspec to your Podfile.

I did pod repo update and tried to pod install again but the same error shows up.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.