Circle menu

This is simple menu that contains buttons that are arranged in a circle one by one. It supports left/right/up/down swipes. Inherits from FrameLayout/UIView.

Customization fields

Type	Field	Description	Default value
UIColor Color	UnfocusedBackgroundColor	Responsible for button's background color in regular state.	#FFFFFF
UIColor Color	FocusedBackgroundColor	Responsible for button's background color in pressed state.	#3C6DF0
UIColor Color	UnfocusedIconColor	Responsible for button's icon color in regular state.	#343334
UIColor Color	FocusedIconColor	Responsible for button's icon color in pressed state.	#FFFFFF
List <CircleMenuItemModel>	CircleMenuItems	Contains sequence of models for buttons.

Methods

void Attach(UIViewController viewController) - add menu to the bottom right corner of the view for current viewController.

void Attach(ViewGroup viewGroup) - add menu to the bottom right corner of the view for current viewGroup.

Events

EventHandler<int> Clicked - event which will be fired once user press any submenu button for CircleMenu. CircleMenuItemModel id will be returned.

Technical description

Every button can contain submenu, with other buttons. Submenu buttons has two states: open and close. In close state submenu buttons are invisible and parent button has blue indicator. If submenu buttons are in opened state they are located near parent button (relative to each other they are located one above the other with indicator on the top). For changing state you should tap on base button which contains submenu.

Menu buttons moves by circle with center in center of main menu. Menu buttons has static positions on screen. Angle between positions is 40 degrees. Scrolling menu implemented by arc from one to another static positions. Each move around has spring/bounce animation in the end. Open and close animation moves to static positions to but unlike the scroll each menu moved across several static position (first menu moves across all positions to the end, next menu moves across all positions except last position, etc.)

Notes

• Circle menu uses spring animation effects
• There are only 6 physical buttons with caching for performance purpose
• There is Lottie animation for hamburger button

Limitations

• The general circle menu should contain from 3 to 9 buttons
• Each submenu should contain from 1 to 5 buttons
• Menu frame computed from general View of the UIViewController. This means that if you want to install banner ads at the bottom of the screen, you would see menu button above your banner.

Usage

Android

CircleMenu must be added on screen using Attach(ViewGroup viewGroup) method. LayoutParameters aren't necessary and will be ignored.

var circleMenu = new CircleMenu(Context);
circleMenu.Clicked += (object sender, int id) =>
{
    switch(id)
    {
        //your actions
    }
};
circleMenu.CircleMenuItems =  new List<CircleMenuItemModel>()
{
    new CircleMenuItemModel(0,  Resource.Drawable.PhotoIcon),
    new CircleMenuItemModel(1,  Resource.Drawable.VideoIcon),
    new CircleMenuItemModel(2,  Resource.Drawable.FBIcon)
};
circleMenu.Attach(Window.DecorView.FindViewById(Android.Resource.Id.Content) as ViewGroup);

iOS

CircleMenu must be added on screen using Attach(UIViewController viewController) method. Frame isn't necessary and will be ignored.

var circleMenu = new CircleMenu();
circleMenu.Clicked += (object sender, int id) =>
{
    switch(id)
    {
        //your actions
    }
};
circleMenu.CircleMenuItems =  new List<CircleMenuItemModel>()
{
    new CircleMenuItemModel(0, UIImage.FromBundle("photoImage")),
    new CircleMenuItemModel(1, UIImage.FromBundle("videoImage")),
    new CircleMenuItemModel(2, UIImage.FromBundle("FBImage"))
};
circleMenu.Attach(this);