Create UIImage in the place of the user finger with UIButton

Question

I am using this code in an IBAction to create a UIImageView with a touch drag inside UIButton:

-(IBAction) addNewPhoto:(id)sender{

switch ([sender tag]) {
    case 0:{

        imageMove = [UIImage imageNamed:@"knet.jpg"];

         holderView = [[UIView alloc] initWithFrame:CGRectMake(0,0, imageMove.size.width, imageMove.size.height)];
        UIImageView *imageview = [[UIImageView alloc] initWithFrame:[holderView frame]];
        [imageview setImage:imageMove];
        [holderView addSubview:imageview];

        UIPinchGestureRecognizer *pinchRecognizer = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(scale:)];
        [pinchRecognizer setDelegate:self];
        [holderView addGestureRecognizer:pinchRecognizer];

        UIRotationGestureRecognizer *rotationRecognizer = [[UIRotationGestureRecognizer alloc] initWithTarget:self action:@selector(rotate:)];
        [rotationRecognizer setDelegate:self];
        [holderView addGestureRecognizer:rotationRecognizer];

        UIPanGestureRecognizer *panRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(move:)];
        [panRecognizer setMinimumNumberOfTouches:1];
        [panRecognizer setMaximumNumberOfTouches:1];
        [panRecognizer setDelegate:self];
        [holderView addGestureRecognizer:panRecognizer];

        UITapGestureRecognizer *tapRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapped:)];
        [tapRecognizer setNumberOfTapsRequired:1];
        [tapRecognizer setDelegate:self];
        [holderView addGestureRecognizer:tapRecognizer];

        [self.view addSubview:holderView];

        [UIView beginAnimations:nil context:nil];
        [UIView setAnimationDuration:.5];
        [superView setFrame:CGRectMake(0, 0, 320, 550)];
        //[holderView setFrame:CGRectMake(0, 0, 320, 550)];
        //holderView.alpha = 1;
        [UIView commitAnimations];

    }
        break;
    case 1:
    {
        imageMove = [UIImage imageNamed:@"test.jpg"];

        //..........similar to case 0 but another picture
         }
        break;

    default:
        break;
}

The buttons is inside a scrollView, What I'm looking for is, the Image should be created where the user dragged his/her finger off the button and still be able move it around without removing his/her finger.

I used the source code for moving, zooming, rotating the image from this Blog with a modification on creating the image with a button not with UIImagePickerController.

Answer 1

You can use a UILongPressGestureRecognizer for that. If you add the UILongPressGestureRecognizer to the main view (the holderView's super view), you can detect the state of the UILongPressGestureRecognizer in the called selector to determine what to do. The UILongPressGestureRecognizer has the state UIGestureRecognizerStateChanged if you move your finger after the gesture is recognised:

- (void)createNewImage:(UILongPressGestureRecognizer *)gestureRecognizer
{
    if ([gestureRecognizer state] == UIGestureRecognizerStateBegan) {
        // create a new image, add to the view, and position at the location of the touch
        // store a reference to it in an ivar
    } else if (([gestureRecognizer state] == UIGestureRecognizerStateChanged)) {
        // move the image stored in the ivar
    } else {
        // set the ivar to nil
        // add the standard gesture recognisers to the new image
    }
}

To explain further, add a new variable to your view controller:

@interface ViewController
{
    UIView *_newView;
}
@end

then add this to your view controller's viewDidLoad method:

UILongPressGestureRecognizer *longPressGesture = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(createNewImage:)];
[self.view addGestureRecognizer:longPressGesture];

Then add the method createNewImage to the view controller:

- (void)createNewImage:(UILongPressGestureRecognizer *)gestureRecognizer
{
    CGPoint translation = [gestureRecognizer locationInView:self.view];

    if ([gestureRecognizer state] == UIGestureRecognizerStateBegan) { //press has begun    
        UIImage *image = [UIImage imageNamed:@"knet.jpg"];
        UIView *holderView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, image.size.width, image.size.height)];
        UIImageView *imageview = [[UIImageView alloc] initWithFrame:[holderView frame]];
        [imageview setImage:image];
        [holderView addSubview:imageview];

        [holderView setCenter:CGPointMake(translation.x, translation.y)];
        _newView = holderView;

        [self.view addSubview:holderView];
    } else if (([gestureRecognizer state] == UIGestureRecognizerStateChanged)) { //finger is moving

        [_newView setCenter:CGPointMake(translation.x, translation.y)];

    } else { //finger lifted off to end the long press

        // here, you'll have to add all the other gesture recognisers to 
        // _newView in case if the new image is moved
        _newView = nil;
    }
}

A side point: I've kept your holderView view hierarchy, but it seems redundant, you can just drag a UIImageView around without the holder view.

Hope that helps

Answer 2

I would suggest using this article from Ray Wenderlich. It provides everything you want, dragging, this is what you are clearly looking for, it provides a solution to drag the image with the finger and even add a cool velocity effect to it! pinch to zoom, touching, rotating. You can download the sample code from there, this helped me get a grip on gesture recognizers.

Rohan