Question

I am building an iphone app that has multiple UIViews in a 3×3 matrix (so total of 9 UIViews) within one UIViewController. I am trying to find a way to let the user move one view to a location in the matrix which will then rearrange the rest of the views accordingly. Think of when you drag an app on your springboard to another place and all the other icons arrange themselves accordingly.

What is the best way to accomplish something like that?

Answer 1

Use UIPanGestureRecognizer, using the translationInView to adjust the coordinates of the item you’re dragging. For a discussion of gesture recognizers, see the Event Handling Guide for iOS.

When you let go (i.e. the gesture ends), you can use UIView class method animateWithDuration to animate the moving of various items to their final locations.

So, in viewDidLoad, you might do something like the following (assuming that you had your nine controls in an array called arrayOfViews):

for (UIView *subview in self.arrayOfViews)
{
    UIPanGestureRecognizer *gesture = [[UIPanGestureRecognizer alloc] initWithTarget:self  
                                                                              action:@selector(movePiece:)];
    [subview addGestureRecognizer:gesture];
}

And then your gesture recognizer handler might look like:

- (void)movePiece:(UIPanGestureRecognizer *)gesture
{
    static CGPoint originalCenter;

    if (gesture.state == UIGestureRecognizerStateBegan)
    {
        originalCenter = gesture.view.center;
    }
    else if (gesture.state == UIGestureRecognizerStateChanged)
    {
        CGPoint translation = [gesture translationInView:self.view];

        gesture.view.center = CGPointMake(originalCenter.x + translation.x, originalCenter.y + translation.y);
    }
    else if (gesture.state == UIGestureRecognizerStateEnded)
    {
        [UIView animateWithDuration:0.25
                         animations:^{

            // move your views to their final resting places here
        }];
    }
}

This is the bare-bones of what a dragging of controls around might look like.