Have Multiple Moving UIImage Views With Different Touches

Question

I am working on trying to get multiple UIImageViews to move when they are dragged. I was originally putting all the movement under TouchesBegan. However, when I drag a single object, they all disappear and only the one I am dragging moves.

How can I have each image dragged own its own terms(I drag the first image, only the first image moves etc.)?

Answer 1

I'm not sure if this is what you're looking for but I worked on this a while ago, so hopefully it's useful.

Just make sure you set up 7 UIImageViews in the XIB File, link them and you'll be good to go.

@synthesize img1, img2, img3, img4, img5, img6, magnet;

-(void) checkInsertion {
    if (CGRectContainsRect(img2.frame, img1.frame)) {img1.center = img2.center;}
    if (CGRectContainsRect(img4.frame, img3.frame)) {img3.center = img4.center;}
    if (CGRectContainsRect(img6.frame, img5.frame)) {img5.center = img6.center;}

    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:0.2];
    if (CGRectIntersectsRect(magnet.frame, img1.frame)) {img1.center = magnet.center;}
    if (CGRectIntersectsRect(magnet.frame, img2.frame)) {img2.center = magnet.center;}
    if (CGRectIntersectsRect(magnet.frame, img3.frame)) {img3.center = magnet.center;}
    if (CGRectIntersectsRect(magnet.frame, img4.frame)) {img4.center = magnet.center;}
    if (CGRectIntersectsRect(magnet.frame, img5.frame)) {img5.center = magnet.center;}
    if (CGRectIntersectsRect(magnet.frame, img6.frame)) {img6.center = magnet.center;}
    [UIView commitAnimations];

}

-(void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    UITouch * touch = [[event allTouches] anyObject];
    CGPoint touchLoc = [touch locationInView:touch.view];

    if (CGRectContainsPoint(img1.frame, touchLoc)) {img1.center = touchLoc;}
    if (CGRectContainsPoint(img3.frame, touchLoc)) {img3.center = touchLoc;}
    if (CGRectContainsPoint(img5.frame, touchLoc)) {img5.center = touchLoc;}

    if (CGRectContainsPoint(magnet.frame, touchLoc)) {magnet.center = touchLoc;}

    [self checkInsertion];
}

-(void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
    [self touchesBegan:touches withEvent:event];
}

Answer 2

You should look at UIPanGestureRecognizer. In the view controller that's responsible for these multiple image views, add a pan gesture recognizer to each of the image views. The view controller should be responsible for responding to the pan gesture callbacks and move the frame of the image view accordingly.

Of note, you should also grab the offset of the touch within the image view from the center and store this. Then, when the view is panned, you need to factor in the offset into your calculations. This is so the view doesn't just jump to the user's finger if they start dragging somewhere distant from the center point.

See the WWDC session videos from 2010 and 2011 about UIScrollView. Especially from 2011. They go into examples of how to do some of this.

Answer 3

I have gotten it to work!

-(void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {

    UITouch *touch = [[event touchesForView:self.view] anyObject];
    CGPoint location = [touch locationInView:touch.view];

    if(CGRectContainsPoint(plusone.frame, location))
    {
        UITouch *touch = [[event allTouches] anyObject];
        CGPoint location = [touch locationInView:touch.view];
        plusone.center = location;
    }
    if(CGRectContainsPoint(plustwo.frame, location))
    {
        UITouch *touch = [[event allTouches] anyObject];
        CGPoint location = [touch locationInView:touch.view];
        plustwo.center = location;
    }
    if(CGRectContainsPoint(plusthree.frame, location))
    {
        UITouch *touch = [[event allTouches] anyObject];
        CGPoint location = [touch locationInView:touch.view];
        plusthree.center = location;
    }
    if(CGRectContainsPoint(minusone.frame, location))
    {
        UITouch *touch = [[event allTouches] anyObject];
        CGPoint location = [touch locationInView:touch.view];
        minusone.center = location;
    }
    if(CGRectContainsPoint(minustwo.frame, location))
    {
        UITouch *touch = [[event allTouches] anyObject];
        CGPoint location = [touch locationInView:touch.view];
        minustwo.center = location;
    }
    if(CGRectContainsPoint(minusthree.frame, location))
    {
        UITouch *touch = [[event allTouches] anyObject];
        CGPoint location = [touch locationInView:touch.view];
        minusthree.center = location;
    }

But, When An Image Collides With Another, It Disappears! Does anyone have a fix to this problem?