How to use UIPanGestureRecognizer to move object? iPhone/iPad

Question

There are several examples of the UIPanGestureRecognizer class. For example I have read this and I am still not able to use it...

On the nib file that I am working on I have a UIView (white rectangle on image) that I wish to drag with that class:

and in my .m file I have placed:

- (void)setTranslation:(CGPoint)translation inView:(UIView *)view
{
    NSLog(@"Test to see if this method gets executed");
}

and that method does not get executed when I drag the mouse across the UIView. I have also tried placing:

- (void)pan:(UIPanGestureRecognizer *)gesture
{
    NSLog(@"testing");
}

And that method does not get executed either. Maybe I am wrong but I think this methods should work like the - (void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event method where I just have to place that method and it will get called whenever there are touches.

What am I doing wrong? Maybe do I have to draw a connection to that method? If so how can I do that?

Lentiginous

Answer 1

I found the tutorial Working with UIGestureRecognizers, and I think that is what I am looking for. It helped me come up with the following solution:

-(IBAction) someMethod {
    UIPanGestureRecognizer *panRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(move:)];
    [panRecognizer setMinimumNumberOfTouches:1];
    [panRecognizer setMaximumNumberOfTouches:1];
    [ViewMain addGestureRecognizer:panRecognizer];
    [panRecognizer release];
}

-(void)move:(UIPanGestureRecognizer*)sender {
    [self.view bringSubviewToFront:sender.view];
    CGPoint translatedPoint = [sender translationInView:sender.view.superview];

    if (sender.state == UIGestureRecognizerStateBegan) {
        firstX = sender.view.center.x;
        firstY = sender.view.center.y;
    }


    translatedPoint = CGPointMake(sender.view.center.x+translatedPoint.x, sender.view.center.y+translatedPoint.y);

    [sender.view setCenter:translatedPoint];
    [sender setTranslation:CGPointZero inView:sender.view];

    if (sender.state == UIGestureRecognizerStateEnded) {
        CGFloat velocityX = (0.2*[sender velocityInView:self.view].x);
        CGFloat velocityY = (0.2*[sender velocityInView:self.view].y);

        CGFloat finalX = translatedPoint.x + velocityX;
        CGFloat finalY = translatedPoint.y + velocityY;// translatedPoint.y + (.35*[(UIPanGestureRecognizer*)sender velocityInView:self.view].y);

        if (finalX < 0) {
            finalX = 0;
        } else if (finalX > self.view.frame.size.width) {
            finalX = self.view.frame.size.width;
        }

        if (finalY < 50) { // to avoid status bar
            finalY = 50;
        } else if (finalY > self.view.frame.size.height) {
            finalY = self.view.frame.size.height;
        }

        CGFloat animationDuration = (ABS(velocityX)*.0002)+.2;

        NSLog(@"the duration is: %f", animationDuration);

        [UIView beginAnimations:nil context:NULL];
        [UIView setAnimationDuration:animationDuration];
        [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
        [UIView setAnimationDelegate:self];
        [UIView setAnimationDidStopSelector:@selector(animationDidFinish)];
        [[sender view] setCenter:CGPointMake(finalX, finalY)];
        [UIView commitAnimations];
    }
}

Lentiginous

If you change move:(id)sender to be move:(UIPanGestureRecognizer*)sender you don't have to do all that ugly typecasting. – Willdon

This solution is not working for UISwitch. Also I tried implementing touchesBegan, touchesMoved methods but not able to move UISwitch. Can you please tell me how can I move UISwitch just by Dragging?? – Nedneda

Remember to have userInteractionEnabled=YES for the view with which the gesture recognizer is associated. – Oh

What are firstX and firstY? – Tierney

Just in case someone is wondering like Krekin, firstX and firstY are the x and y of the CGPoint. Assign it to your moveableView's, like so [_moveableView setCenter:CGPointMake(x, y)]; – Conserve

Answer 2

UIPanGestureRecognizer * pan1 = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(moveObject:)];
pan1.minimumNumberOfTouches = 1;
[image1 addGestureRecognizer:pan1];

-(void)moveObject:(UIPanGestureRecognizer *)pan;
{
 image1.center = [pan locationInView:image1.superview];
}

Tarkington

flawless victory! – Increasing

Can't argue with the simplicity, but this solution has a problem: as soon as you put your finger down to start the gesture, image1 will jump, potentially quite far, so that its center is under your finger. Better to adjust image1.center by the pan's translation for a more fluid and standard experience. – Tenderize

Answer 3

-(IBAction)Method
{
      UIPanGestureRecognizer *panRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)];
      [panRecognizer setMinimumNumberOfTouches:1];
      [panRecognizer setMaximumNumberOfTouches:1];
      [ViewMain addGestureRecognizer:panRecognizer];
      [panRecognizer release];
}
- (Void)handlePan:(UIPanGestureRecognizer *)recognizer
{

     CGPoint translation = [recognizer translationInView:self.view];
     recognizer.view.center = CGPointMake(recognizer.view.center.x + translation.x, 
                                     recognizer.view.center.y + translation.y);
     [recognizer setTranslation:CGPointMake(0, 0) inView:self.view];

     if (recognizer.state == UIGestureRecognizerStateEnded) {

         CGPoint velocity = [recognizer velocityInView:self.view];
         CGFloat magnitude = sqrtf((velocity.x * velocity.x) + (velocity.y * velocity.y));
         CGFloat slideMult = magnitude / 200;
         NSLog(@"magnitude: %f, slideMult: %f", magnitude, slideMult);

         float slideFactor = 0.1 * slideMult; // Increase for more of a slide
         CGPoint finalPoint = CGPointMake(recognizer.view.center.x + (velocity.x * slideFactor), 
                                     recognizer.view.center.y + (velocity.y * slideFactor));
         finalPoint.x = MIN(MAX(finalPoint.x, 0), self.view.bounds.size.width);
         finalPoint.y = MIN(MAX(finalPoint.y, 0), self.view.bounds.size.height);

         [UIView animateWithDuration:slideFactor*2 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
             recognizer.view.center = finalPoint;
         } completion:nil];

    }

}

Committeewoman

For CGPointMake(0, 0) you can write CGRectZero. – Wad

@Wad Don't you mean CGPointZero? – Obala

@Obala You're absolutely right. I'll up some of your answers as my thanks. – Wad

Answer 4

@Tono Nam's answer (accepted) in Swift 5

func someMethod() {
    let panGestureRecognizer = UIPanGestureRecognizer(target: self, action: #selector(move))
    panGestureRecognizer.minimumNumberOfTouches = 1
    panGestureRecognizer.maximumNumberOfTouches = 1
    view.addGestureRecognizer(panGestureRecognizer)
}

@objc func move(sender: UIPanGestureRecognizer) {
    guard let senderView = sender.view else { return }
    
    self.view.bringSubviewToFront(senderView)
    var translatedPoint: CGPoint = sender.translation(in: senderView.superview)
    
    if(sender.state == .began) {
        let firstX = senderView.center.x
        let firstY = senderView.center.y
    }
    
    translatedPoint = CGPoint(x: senderView.center.x + translatedPoint.x, y: senderView.center.y + translatedPoint.y)
    senderView.center = translatedPoint
    sender.setTranslation(.zero, in: senderView)
    
    if(sender.state == .ended) {
        let velocityX: CGFloat = (0.2 * sender.velocity(in: self.view).x)
        let velocityY: CGFloat = (0.2 * sender.velocity(in: self.view).y)
        
        var finalX: CGFloat = translatedPoint.x + velocityX
        var finalY: CGFloat = translatedPoint.y + velocityY
        
        if(finalX < 0) {
            finalX = 0
        } else if (finalX > self.view.frame.size.width) {
            finalX = self.view.frame.size.width;
        }
        
        if (finalY < 50) { // to avoid status bar
            finalY = 50;
        } else if (finalY > self.view.frame.size.height) {
            finalY = self.view.frame.size.height;
        }
        
        let animationDuration: TimeInterval = TimeInterval(abs(velocityX) * 0.0002 + 0.2)
        print("the animation duration is \(animationDuration)")
        
        UIView.animate(withDuration: animationDuration, delay: 0, options: .curveEaseOut) {
            senderView.center = CGPoint(x: finalX, y: finalY)
        } completion: { completed in
            // call animationDidFinish completion handler here
        }
    }
}

Thuythuya

Answer 5

if ([recognizer state] == UIGestureRecognizerStateChanged)    
{
    CGPoint translation1 = [recognizer translationInView:main_view];
    img12.center=CGPointMake(img12.center.x+translation1.x, img12.center.y+ translation1.y);
    [recognizer setTranslation:CGPointMake(0, 0) inView:main_view];

    recognizer.view.center=CGPointMake(recognizer.view.center.x+translation1.x, recognizer.view.center.y+ translation1.y);
}

-(void)move:(UIPanGestureRecognizer*)recognizer
{
    if ([recognizer state] == UIGestureRecognizerStateChanged)    
    {
        CGPoint translation = [recognizer translationInView:self.view];
        recognizer.view.center=CGPointMake(recognizer.view.center.x+translation.x, recognizer.view.center.y+ translation.y);
        [recognizer setTranslation:CGPointMake(0, 0) inView:self.view];
    }
}

Gabriellegabrielli

Answer 6

swift 2 version of the @MS AppTech answer

func handlePan(panGest : UIPanGestureRecognizer) {
let velocity : CGPoint = panGest.velocityInView(self.view);
        let magnitude : CGFloat = CGFloat(sqrtf((Float(velocity.x) * Float(velocity.x)) + (Float(velocity.y) * Float(velocity.y))));
        let slideMult :CGFloat = magnitude / 200;
        //NSLog(@"magnitude: %f, slideMult: %f", magnitude, slideMult);

        let slideFactor : CGFloat = 0.1 * slideMult; // Increase for more of a slide
        var finalPoint : CGPoint = CGPointMake(panGest.view!.center.x + (velocity.x * slideFactor),
                                         panGest.view!.center.y + (velocity.y * slideFactor));
        finalPoint.x = min(max(finalPoint.x, 0), self.view.bounds.size.width);
        finalPoint.y = min(max(finalPoint.y, 0), self.view.bounds.size.height);

        UIView.animateWithDuration(Double(slideFactor*2), delay: 0, options: UIViewAnimationOptions.CurveEaseOut, animations: {
            panGest.view!.center = finalPoint;
            }, completion: nil)
}

Foscalina

Answer 7

Casting my hat into the ring a couple years later.

Will need to save the beginning center of the image view:

var panBegin: CGPoint.zero

Then update the new center using a transform:

if recognizer.state == .began {
     panBegin = imageView!.center

} else if recognizer.state == .ended {
    panBegin = CGPoint.zero

} else if recognizer.state == .changed {
    let translation = recognizer.translation(in: view)
    let panOffsetTransform = CGAffineTransform( translationX: translation.x, y: translation.y)

    imageView!.center = panBegin.applying(panOffsetTransform)
}

Bred

Answer 8

As an addition, because I spend a lot of time on this: my view (which I applied addGestureRecognizer on) was dynamically created, so I did have to fix userInteractionEnabled to true

Expressage

Answer 9

The Swift 2 version:

// start detecting pan gesture
let panGestureRecognizer = UIPanGestureRecognizer(target: self, action: #selector(TTAltimeterDetailViewController.panGestureDetected(_:)))
panGestureRecognizer.minimumNumberOfTouches = 1
self.chartOverlayView.addGestureRecognizer(panGestureRecognizer)

func panGestureDetected(panGestureRecognizer: UIPanGestureRecognizer) {
    print("pan gesture recognized")
}

Unlimber