How to restrict a moveable view by Pan gesture

Question

I have a UIImageView which is moveable via a pan gesture.

UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)];
[self.photoMask addGestureRecognizer:pan];

I would like to restrict the area this can be moved on screen. Rather than the user be able to drag the view right to the side of the screen, I want to restrict it by a margin of some sort. How can I do this?

Also, how is this then handled when rotated?

EDIT ---

#pragma mark - Gesture Recognizer
-(void)handlePan:(UIPanGestureRecognizer *)gesture {
    NSLog(@"Pan Gesture");
    gesture.view.center = [gesture locationInView:self.view];
}

This is my current method to handle the pan. What I need to do is continue to move the imageview by the center point and also restrict its movement when close to the edge of the screen by 50 for example.

Interstadial

use MAX(minFloat,MIN(x, maxFloat)) – Covenantee

Answer 1

One possible solution to this is in your handlePan method, check the location of the point on the screen, and only commit the change if it is within the bounds you wish to restrict it to.

For ex.

-(void) handlePan:(UIGestureRecognizer*)panGes{

    CGPoint point = [panGes locationInView:self.view];

    //Only allow movement up to within 100 pixels of the right bound of the screen
    if (point.x < [UIScreen mainScreen].bounds.size.width - 100) {

        CGRect newframe = CGRectMake(point.x, point.y, theImageView.frame.size.width, theImageView.frame.size.height);

        theImageView.frame = newframe;

    }

}

I believe this would also correctly handle any screen rotation

EDIT

To move your image view by the center of its frame, the handlePan method could look something like this.

-(void)handlePan:(UIPanGestureRecognizer *)gesture {

    CGPoint point = [gesture locationInView:self.view];

    //Only allow movement up to within 50 pixels of the bounds of the screen
    //Ex. (IPhone 5)
    CGRect boundsRect = CGRectMake(50, 50, 220, 448);

    if (CGRectContainsPoint(boundsRect, point)) {
        imgView.center = point;
    }       
}

Check whether the point is within your desired bounds, and if so, set the center of your image view frame to that point.

Valora

Thanks, I have added an EDIT to my question. At present I move the view from the center point. This way the imageview I am moving (which has a circle in the middle) makes it look like the circle is moving... I am trying to update your answer to incorporate this center point but not sure how? I would like to remain moving the middle point of the view (then check if this middle point is within a restricted area of the screen. For example a 50 margin around the whole screen? – Interstadial

If you try to drag the view very fast, then this if condition would break. – Decidua

Answer 2

I'm not sure if I'm being over-simplistic here but I think you can accomplish this by using an if clause.

-(void)handlePan:(UIPanGestureRecognizer*)gesture {

    UIImageView *viewToDrag = gesture.view; // this is the view you want to move

    CGPoint translation = [gesture translationInView:viewToDrag.superview]; // get the movement delta

    CGRect movedFrame = CGRectOffset(viewToDrag.frame, translation.x, translation.y); // this is the new (moved) frame

    // Now this is the critical part because I don't know if your "margin"
    // is a CGRect or maybe some int values, the important thing here is
    // to compare if the "movedFrame" values are in the allowed movement area

    // Assuming that your margin is a CGRect you could do the following:
    if (CGRectContainsRect(yourPermissibleMargin, movedFrame)) {
        CGPoint newCenter = CGPointMake(CGRectGetMidX(movedFrame), CGRectGetMidY(movedFrame));
        viewToDrag.center = newCenter; // Move your view
    }

    // -OR-

    // If you have your margins as int values you could do the following:
    if ( (movedFrame.origin.x + movedFrame.size.width) < 50) {
        CGPoint newCenter = CGPointMake(CGRectGetMidX(movedFrame), CGRectGetMidY(movedFrame));
        viewToDrag.center = newCenter; // Move your view
    }
}

You'll probably have to adapt this to meet your specific needs.

Hope this helps!

Femoral

Thanks, I have added an EDIT to my question. At present I move the view from the center point. This way the imageview I am moving (which has a circle in the middle) makes it look like the circle is moving... I am trying to update your answer to incorporate this center point but not sure how? I would like to remain moving the middle point of the view (then check if this middle point is within a restricted area of the screen. For example a 50 margin around the whole screen? – Interstadial

Answer 3

Here is the answer in Swift 4 - Restrict the view's movement to superview

@objc func handlePan(_ gestureRecognizer: UIPanGestureRecognizer)
{
    // Allows smooth movement of stickers.
    if gestureRecognizer.state == .began || gestureRecognizer.state == .changed
    {
        let point = gestureRecognizer.location(in: self.superview)
        if let superview = self.superview
        {
            let restrictByPoint : CGFloat = 30.0
            let superBounds = CGRect(x: superview.bounds.origin.x + restrictByPoint, y: superview.bounds.origin.y + restrictByPoint, width: superview.bounds.size.width - 2*restrictByPoint, height: superview.bounds.size.height - 2*restrictByPoint)
            if (superBounds.contains(point))
            {
                let translation = gestureRecognizer.translation(in: self.superview)
                gestureRecognizer.view!.center = CGPoint(x: gestureRecognizer.view!.center.x + translation.x, y: gestureRecognizer.view!.center.y + translation.y)
                gestureRecognizer.setTranslation(CGPoint.zero, in: self.superview)
            }
        }
    }
}

If you want more control over it, match restrictByPoint value to your movable view's frame.

Harms

Answer 4

- (void)dragAction:(UIPanGestureRecognizer *)gesture{
     UILabel *label = (UILabel *)gesture.view;
     CGPoint translation = [gesture translationInView:label];
     if (CGRectContainsPoint(label.frame, [gesture locationInView:label] )) {
         label.center = CGPointMake(label.center.x,
                                label.center.y);
        [gesture setTranslation:CGPointZero inView:label];
   }
   else{
       label.center = CGPointMake(label.center.x,
                                label.center.y + translation.y);
        [gesture setTranslation:CGPointZero inView:label];
   }
}

Breathed