rstrahl/rsexplodingbutton

UIButton that explodes to display sub-buttons

RSExplodingButton

A custom UIButton inspired by the "radial menu" that displays any number of subordinate buttons ("leaf buttons") when tapped and held.

It's designed to be a drop-in replacement for UIButton, supporting UIControlEvent for user-interaction and UIControlState for controlling its changes in appearance. Thus it supports being used and configured from Interface-Builder as well as directly from code.

A simple interactive demo project is included.

Usage:

Initialization

Creating a button via code can be accomplished as follows:

RSExplodingButton *button = [RSExplodingButton alloc] initWithFrame:frame];
[self.view addSubview:button];

Adding leaf-buttons

Adding a leaf button is done through instance methods that duplicates the appearance of the root button. As with standard UIButton controls, a leaf button will require a method selector to be provided for responding to touch events:

for (int i = 0; i < numberOfButtonsDesired; i++)
{
    RSExplodingButton *button = [self.explodingButton addButtonWithTitle:[NSString stringWithFormat:@"%d", i+1]];
    [button addTarget:self action:@selector(didTouchUpButton:) forControlEvents:UIControlEventTouchUpInside];
}

Appearance

By default, the button assumes the tintColor property as the fill color for its highlighted state and the backgroundColor as the fill color for its normal state. When the button is highlighted, the colors inverse.

The button appearance can be customized in the following ways:

• setDefaultColor: will update the background color of the button for UIControlStateNormal
• setHighlightColor: will update the tint color for UIControlStateNormal and the background color for UIControlStateHighlighted

rsexplodingbutton's Issues

Finalize look and animation of button

Button normal-state should be circular, non-filled. On touch-down button should fill with transparency. On touch-up button fill should fade ~ .5 sec ease out.

Consider lowering alpha of other non-selected children.

Add intelligent layout for handling leaf button overlap

If a dev specifies a number of leaf buttons that will cause overlap in their radial distribution, handle that layout intelligently by creating "layers" of radial distribution.

Add ability to set colour of button

Should be able to set colour of button both as a property and in the initializer.

Add animated gif to README.md for illustration

Add customizable angle for radial distribution

Currently the button is fixed to distribute buttons along a 360-degree path. Add logic that lets a dev specify the start angle and end angle for distribution. (e.g. - create a 90-degree distribution arc by specifying a start of 270 and end of 0, specifying clockwise orientation)

Add effect to indicate user has given button selected

No effect currently that indicates the user has a given button selected - as user moves finger from root to leaf, a visual indicator should be displayed. (Slightly larger button, different colour, ring around button, etc. pick one.)

Add block for handling leaf button select

Finish implementing button action/event. Providing an execution block to the given leaf node when its created?

Add basic documentation and usage into README.md