TestsTested | ✗ |
LangLanguage | Obj-CObjective C |
License | MIT |
ReleasedLast Release | Sep 2017 |
Maintained by Christian Klaproth.
Well, it's a circle menu. Kind of. For iOS.
The idea is to keep your UI simple and clean and show buttons to the user when they are needed. The following screenshot is taken from the demo app I have provided in this repository. Simply clone this repo and call pod install
within the CircleViewDemo folder. The circle menu is opened via a UILongPressGesture
. As long as the user holds down his finger, the menu will remain open. Buttons are selected via dragging on the button and releasing the finger.
The following animation shows a depth effect (sorry for the poor gif quality, you have to see this in the demo app!). You can configure a mellow drop shadow to be rendered, which will transform slightly when the button is activated. At the same time, the button will be scaled a bit down, resulting in a super-subtle 3D effect.
If you prefer not to spawn the menu out of nowehere (your users have to know where to long press in order to see the menu) but want to offer a menu button, you can use the CKCircleMenuView
in tap mode. Once opened, the menu stays open until the user selects an option or closes the menu by tapping somewhere else.
The CKCircleMenuView is designed for easy integration and usage. Spawning the menu and reacting on button activations is as easy as to use an UIAlertView (deprecated) UIAlertController.
There are several options that can be adjusted before presenting the menu.
CircleMenuDirectionUp
)UIButtonType.System
does (default = NO)UIVisualEffectsView
as the button's background (default = NO)If you are using the CKCircleMenuView
in a Swift project, add the following line to your Objective-C bridging header.
#import <CKCircleMenuView/CKCircleMenuView.h>
In the Swift class you want to use the CKCircleMenuView
add the following import statement.
import CKCircleMenuView
Please take a look at the demo app included in this repo to see a fully working example on how the CKCircleMenuView
is used.
Basically what you have to do is: In your Storyboard add a gesture recognizer for long presses on the view, that should spawn the CKCircleMenuView
and connect it to an action method within your view controller. Alternatively - if you want to use the menu in tap mode - add a UIButton
and connect its touch-up-inside event to an action method in your view controller. There are a few things that you need to implement.
UIButton
's frame or location of the long press gesture in your view). This will be used as the origin (center) of the CKCircleMenuView
.let tPoint = CGPoint(x: button.frame.midX, y: button.frame.midY)
viewDidLoad
, if the menu's content isn't dynamic).var circleMenuImageArray = Array<UIImage>()
override func viewDidLoad() {
super.viewDidLoad()
// ...
self.circleMenuImageArray.append(UIImage(named: "InfoChartButton")!)
self.circleMenuImageArray.append(UIImage(named: "CircleChartButton")!)
self.circleMenuImageArray.append(UIImage(named: "BarChartButton")!)
self.circleMenuImageArray.append(UIImage(named: "RealtimeButton")!)
self.circleMenuImageArray.append(UIImage(named: "LineChartButton")!)
}
var tOptions = Dictionary<String, AnyObject>()
tOptions[CIRCLE_MENU_OPENING_DELAY] = 0.1 as AnyObject
tOptions[CIRCLE_MENU_MAX_ANGLE] = 180.0 as AnyObject
tOptions[CIRCLE_MENU_RADIUS] = 105.0 as AnyObject
tOptions[CIRCLE_MENU_DIRECTION] = Int(CircleMenuDirectionUp.rawValue) as AnyObject
tOptions[CIRCLE_MENU_BUTTON_BACKGROUND_NORMAL] = UIColor.init(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.4)
tOptions[CIRCLE_MENU_BUTTON_BACKGROUND_ACTIVE] = UIColor.init(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.8)
tOptions[CIRCLE_MENU_BUTTON_BORDER] = UIColor.white
tOptions[CIRCLE_MENU_DEPTH] = 2.0 as AnyObject
tOptions[CIRCLE_MENU_BUTTON_RADIUS] = 35.0 as AnyObject
tOptions[CIRCLE_MENU_BUTTON_BORDER_WIDTH] = 2.0 as AnyObject
tOptions[CIRCLE_MENU_TAP_MODE] = true as AnyObject
tOptions[CIRCLE_MENU_LINE_MODE] = false as AnyObject
tOptions[CIRCLE_MENU_BUTTON_TINT] = false as AnyObject
tOptions[CIRCLE_MENU_BACKGROUND_BLUR] = false as AnyObject
tOptions[CIRCLE_MENU_BUTTON_TITLE_VISIBLE] = true as AnyObject
tOptions[CIRCLE_MENU_BUTTON_TITLE_FONT_SIZE] = 11.0 as AnyObject
CKCircleMenuDelegate
as protocol).self.circleMenuView = CKCircleMenuView(atOrigin: tPoint, usingOptions: tOptions, withImageArray: self.circleMenuImageArray)
self.view.addSubview(self.circleMenuView!)
self.circleMenuView!.delegate = self
self.circleMenuView!.openMenu()
CKCircleMenuDelegate
protocol to react to menu events.// MARK: Circle Menu Delegate
func circleMenuActivatedButton(with anIndex: Int32) {
// ...
}
func circleMenuOpened() {
// ...
}
func circleMenuClosed() {
// ...
}
Christian Klaproth, @JaNd3r
CKCircleMenuView is available under the MIT license. See the LICENSE file for more info.