iPhone : How do I drag or move UIImage/UIButton as shown below?

Question

I dont know How to get following type of functionality in my app.

As shown in above figure user can slide(drag) different image parts and user can assemble image.

Can any one tell me which control is this ? Or any tutorial for it ?

Answer 1

Check out the MoveMe sample app. It will show you how to allow movement of subviews by touch and drag.

You can then create imageViews for each of your puzzle pieces that can be moved around.

Once you have accomplished this you need to check during movement of a piece to see when it gets close enough to it's correct spot in the puzzle so it can snap into place when then user lets go of the piece.

http://developer.apple.com/library/ios/#samplecode/MoveMe/Introduction/Intro.html

Answer 2

That all depends on the kind of implementation you want to do. It can be UIImageView,UIbutton etc. The advantage with UIIMageView could be you can easily implement UIGestureRecognizer to move the views..

Answer 3

For an app I built I used the touches functions:

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

for dragging UIImageViews around. Then you can use the CGRectContainsRect or CGRectContainsPoint to detect if the puzzle piece is in the right location.

Answer 4

Here is the code how to move imgTest which is an UIImageView. Tested, work like a charm.

[[self imgTest]setUserInteractionEnabled:YES];

//Save the first touch point
CGPoint firstTouchPoint;

//xd,yd destance between imge center and my touch center
float xd;
float yd;

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch* bTouch = [touches anyObject];
    if ([bTouch.view isEqual:[self imgTest]]) {
        firstTouchPoint = [bTouch locationInView:[self view]];
        xd = firstTouchPoint.x - [[bTouch view]center].x;
        yd = firstTouchPoint.y - [[bTouch view]center].y;
    }
}

{
    UITouch* mTouch = [touches anyObject];
    if (mTouch.view == [self imgTest]) {
        CGPoint cp = [mTouch locationInView:[self view]];
        [[mTouch view]setCenter:CGPointMake(cp.x-xd, cp.y-yd)];
    }
}

source

Answer 5

如果我们谈论UIKit，这可能是一个UIImageView，图像具有部分透明区域。

Answer 6

This is not that easy. You need to write the code first for how to move the image views. There are a lot of samples in Apple references. Then you need to get the boundaries of each image to do this.

Answer 7

My first attack on this problem would be as follows:

(1) subclass UIImageView to hold each piece of the puzzle.

(2) Customize your UIImageView subclass by initializing it with a UIPanGestureRecognizer. Something like:

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

(3) In the action method associated with the pan gesture recognizer, update the object's location based on messages from the puzzle piece's pan gesture recognizer. Something like the following ought to work:

-(void) handlePan: 
  (UIGestureRecognizer *)sender
{
  UIPanGestureRecognizer *panRecognizer = 
    (UIPanGestureRecognizer *)sender;
  if (panRecognizer.state == 
        UIGestureRecognizerStateBegan ||
      panRecognizer.state == 
        UIGestureRecognizerStateChanged)
  {
    CGPoint currentPoint = 
      self.center;
    CGPoint translation = 
      [panRecognizer translationInView: 
        self.superView];
    self.center = CGPointMake
      (currentPoint.x + translation.x, 
        currentPoint.y + translation.y);
    [panRecognizer setTranslation: CGPointZero 
      inView: self.superView];
  }
}