How can I implement a circular scrolling mechanism?

Question

I'm having some images from which the user should choose one. Now I don't want to just offer an flat scrolling area with a boring grid. Instead, I'd like to show up a wheel that contains those images. At the top would be a marker indicating the selection. Something similar to the Pickers.

The problem is not the rotation stuff; I'd use some geometric functions for that. But I have no idea how to actually get the scrolling gestures on that wheel. Where must I start?

BTW: With circular I don't mean something like the Pickers. I mean a real wheel that has a center axis and can be rolled. Like the very old telephones, like a bike wheel. Or a Picker turned by 90°, facing with the axis to you (Z-coordinate).

Answer 1

If you're talking about capturing gestures then here is the example they give in the docs.

Though I could have sworn I heard Alan Cannistraro say in one of the first CS193P lectures that you don't have to do this, that you can just trap the swipe event but I can't find that.

Could someone that actually knows what they are doing please correct me and I'll remove this post but for now I know this will work:

#define HORIZ_SWIPE_DRAG_MIN  12
#define VERT_SWIPE_DRAG_MAX    4

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];
    startTouchPosition = [touch locationInView:self];
}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];
    CGPoint currentTouchPosition = [touch locationInView:self];

    // If the swipe tracks correctly.
    if (fabsf(startTouchPosition.x - currentTouchPosition.x) >= HORIZ_SWIPE_DRAG_MIN &&
        fabsf(startTouchPosition.y - currentTouchPosition.y) <= VERT_SWIPE_DRAG_MAX)
    {
        // It appears to be a swipe.
        if (startTouchPosition.x < currentTouchPosition.x)
            [self myProcessRightSwipe:touches withEvent:event];
        else
            [self myProcessLeftSwipe:touches withEvent:event];
    }
    else
    {
        // Process a non-swipe event.
    }
}

Answer 2

Just how similar to a picker view are you thinking? You can load up a picker view with your own custom subviews, which could be image views. That'd get you an actual picker view with your images, which might or might not be what you're actually aiming for.