iPhone: come faccio a trascinare o spostare UIImage/UIButton come mostrato di seguito?

Question

Non so Come ottenere il seguente tipo di funzionalità nella mia app.

Come mostrato nella figura precedente utente può scorrere (drag) diverse parti dell'immagine e l'utente può montare immagine.

Qualcuno può dirmi quale controllo è questo? O qualche tutorial per questo?

Answer 1

Partenza il campione app moveme. Ti mostrerà come consentire il movimento delle sottoview tramite tocco e trascinamento.

È quindi possibile creare immagini per ciascuna delle parti del puzzle che possono essere spostate.

Una volta completato, è necessario controllare durante il movimento di un pezzo per vedere quando si avvicina abbastanza al punto giusto nel puzzle in modo che possa scattare in posizione quando l'utente lascia il pezzo.

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

Answer 2

Se parliamo di UIKit, questo potrebbe essere un UIImageView con immagini con aree parzialmente trasparenti.

Answer 3

Tutto dipende dal tipo di implementazione che si desidera eseguire. Può essere UIImageView, UIButton ecc Il vantaggio con UIImageView potrebbe essere che si può facilmente implementare UIGestureRecognizer per spostare il punto di vista ..

Answer 4

Questo non è così facile. È necessario scrivere prima il codice per come spostare le visualizzazioni dell'immagine. Ci sono molti esempi nei riferimenti Apple. Quindi è necessario ottenere i limiti di ogni immagine per farlo.

Answer 5

Per un app che ho costruito io ho usato le funzioni tocchi:

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

per il trascinamento UIImageViews intorno. Quindi è possibile utilizzare CGRectContainsRect o CGRectContainsPoint per rilevare se il pezzo del puzzle si trova nella posizione corretta.

Answer 6

Il mio primo attacco a questo problema potrebbe essere il seguente:

(1) sottoclasse UIImageView di tenere ogni pezzo del puzzle.

(2) Personalizzate la sottoclasse UIImageView inizializzandola con UIPanGestureRecognizer. Qualcosa di simile:

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

(3) Nel metodo azione associata con il sistema di riconoscimento gesto pan, aggiornare la posizione dell'oggetto in base ai messaggi provenienti da del pezzo di puzzle riconoscitore gesto padella. Qualcosa come il seguente dovrebbe funzionare:

-(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]; 
  } 
} 

Answer 7

Ecco il codice come muoversi imgTest che è un UIImageView. Testato, funziona come un fascino.

[[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