Grid of Buttons on iPhone that Can be Dragged Over

Question

I am looking to create a simple colour palette, and have setup a grid of buttons in interface builder.

I'd like a user to be able to interact with the palette (buttons), by selecting any button, then drag the finger between buttons (firing events on entering and exiting a button and changing the selected colour with each event). Is this possible?

For example, the user touches down on a blue button (the color is updated), then drags the finger over to a green button (the color is updated).

The "Touch Drag Enter" and "Touch Drag Exit" events appear to only fire if a user's initial selection was on the sender (does not allow dragging between two buttons). Thanks!

Answer 1

You could use the touchesBegan + touchesMoved + touchesEnded methods, to create a list of the buttons touched by the user, from start to finish.

I wrote this on the fly and didn't test it, but it could look something like this:

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event 
{
    // interactions is the NSMutableArray where you store the pressed/dragged buttons
    // we need to clear it when we start a new checkForInteractions
    [interactions removeAllObjects];

    UITouch *touch = [touches anyObject];
    [self checkForInteractions:touch];
}
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];
    [self checkForInteractions:touch];
}
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];
    [self checkForInteractions:touch];
    // here you'd call a function that'd use the buttons on the array,
    // to do whatever you wanted with them
    // it can also be copied to touchesMoved, to trigger the interactions
    // as the user's finger is moving, rather than only when it stops
    [self useInteractions];
}
- (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event 
{
    // if the touch was cancelled, clear the interactions
    [interactions removeAllObjects];
}
- (void) checkForInteractions : (UITouch *) touch
{
    if ([touch view] == myButton1 || [touch view] == myButton2)
    {
        // check if the object had already been added to the array
        if ( ![interactions containsObject:[touch view]] )
        {
            [interactions addObject:[touch view]];
        }
    }
}

I hope this helps :)

Answer 2

I think you might have some luck with UIGestureRecognizer

Answer 3

I created a simple app that does what you want. You can find the source at:

http://github.com/st3fan/iphone-experiments/tree/master/Miscellaneous/ColorPalette/

It is simply a container view (PaletteView) with a bunch of subviews that have specific colors. When the PaletteView receives a touch, it find the view that is under the touch and then tells it's delegate (PaletteViewDelegate) that the color changed.

Tested on an iPhone 4 with 4.0.2.