Make a UIView draggable with the finger

Question

I have the mainViewController but I have an small UIView inside that is activated when you tap a MKAnnotationView in the MKMapKit, so I need that UIView to be draggable in any part of the screen.

An example screenshot of my app:

The circle is an example of point, I suppose I can drag for any point of the "small" UIView.

I tried using UITapGestureRecognizer but it didn't worked as my code was not good enough and I could not made it draggable because it's only the tap, not tap and move.

I hope you can help me.

Pokpoke

Answer 1

1. Use UIPanGestureRecognizer instead of UITapGestureRecognizer
2. Set userInteractionEnabled = YES for your view
3. Review this nice tutorial about gesture recognizers: Touches. There is nice example of dragging views.

Employ

Thanks for the answer, I will study that project I tested the result and I think it can helps me a lot, thanks. – Pokpoke

Answer 2

For create draggable and resizable UIView This example (with source code) really useful for you.

And also read This Document and This Document This document is related to UIPanGestureRecognizer

Anteater

Answer 3

edited after a commend by @borrrden

UIPanGestureRecognizer is suitable. In your handler function check it's state variable.

typedef enum {
   UIGestureRecognizerStatePossible,

   UIGestureRecognizerStateBegan,     // this will be the value on touch
   UIGestureRecognizerStateChanged,   // ~ on drag
   UIGestureRecognizerStateEnded,     // ~ on end of touch event
   UIGestureRecognizerStateCancelled,

   UIGestureRecognizerStateFailed,

   UIGestureRecognizerStateRecognized = UIGestureRecognizerStateEnded
} UIGestureRecognizerState;

Anaemic

"Changed" will not be called on a tap gesture, since it doesn't make sense. – Shonna

True, I'll edit the post to point to UIPanGestureRecognizer – Anaemic

Answer 4

I use this for scaling and dragging an UIView in my app.

1) First make sure to add the following to your implementation and connect the outlets to your views in your Storyboard

#import <QuartzCore/QuartzCore.h>

@interface yourclass () {
    BOOL isDragging;
}
@property (weak, nonatomic) IBOutlet UIImageView *outletMainView; // View that contains the view we want to drag
@property (weak, nonatomic) IBOutlet UIImageView *outletRedDot; // The view we want to drag in the main view

When the touch begins I scale the view a bit when the user touches the specific view, here it is red dot

// ANIMATE RED DOT WHEN START DRAGING IT
- (void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    UITouch *touch = [touches anyObject];
    CGPoint touchLocation = [touch locationInView:self.outletMainView];

    CGRect redDotRect = [self.outletRedDot frame];
    if (CGRectContainsPoint(redDotRect, touchLocation)) {
        isDragging = YES;
        NSLog(@"Red Dot tapped!");
        [UIView animateWithDuration:0.2
                              delay:0.0
                            options:UIViewAnimationOptionCurveEaseOut
                         animations:^{
                             self.outletRedDot.transform = CGAffineTransformMakeScale(1.75, 1.75);
                         }
                         completion:^(BOOL finished) {
                         }];
    } else {
        return;
    }
}

2) Then I set the view to follow the point of the finger point

// ANIMATE AND MOVE RED DOT WHEN WE DRAG IT
- (void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
    UITouch *touch = [touches anyObject];
    CGPoint touchLocation = [touch locationInView:self.outletMainView];

    if (isDragging) {
        [UIView animateWithDuration:0.0f
                              delay:0.0f
                            options:(UIViewAnimationOptionBeginFromCurrentState|UIViewAnimationOptionCurveEaseInOut)
                         animations:^{
                             self.outletRedDot.center = touchLocation;
                             NSLog(@"X: %0.2f Y: %0.2f",touchLocation.x-redDotStartCenter.x, redDotStartCenter.y-touchLocation.y);
                         }
                         completion:NULL];
    }
}

3) Finally when the dragging ends the view is reset to its original scale

// RESET RED DOT WHEN WE STOP DRAGGING
- (void) touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
    UITouch *touch = [touches anyObject];
    CGPoint touchLocation = [touch locationInView:self.outletMainView];

    CGRect redDotRect = [self.outletRedDot frame];
    if (CGRectContainsPoint(redDotRect, touchLocation)) {
        [UIView animateWithDuration:0.1
                              delay:0.0
                            options:0
                         animations:^{
                             self.outletRedDot.transform = CGAffineTransformMakeScale(1.0, 1.0);
                         }
                         completion:^(BOOL finished) {
                         }];
    }
    isDragging = NO;
}

Chordophone