iPhone: ¿Cómo arrastro o muevo UIImage/UIButton como se muestra a continuación?

Question

No sé Cómo obtener el siguiente tipo de funcionalidad en mi aplicación.

Como se muestra en la figura de arriba usuario puede deslizar (arrastre) diferentes partes de la imagen y el usuario puede montar la imagen.

¿Alguien puede decirme qué control es esto? O algún tutorial para eso?

Answer 1

Mira la aplicación de ejemplo moveme. Le mostrará cómo permitir el movimiento de las subvistas al tocar y arrastrar.

A continuación, puede crear imágenes visuales para cada una de las piezas del rompecabezas que se pueden mover.

Una vez que haya logrado esto, debe verificar durante el movimiento de una pieza para ver cuándo se acerca lo suficiente al punto correcto en el rompecabezas para que encaje cuando el usuario suelte la pieza.

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

Answer 2

Si hablamos de UIKit, esto podría ser un UIImageView con imágenes que tienen áreas parcialmente transparentes.

Answer 3

Todo depende del tipo de implementación que desee realizar. Puede ser UIImageView, etc. UIButton La ventaja con UIImageView podría ser usted puede implementar fácilmente UIGestureRecognizer para mover los puntos de vista ..

Answer 4

Esto no es tan fácil. Primero debe escribir el código de cómo mover las vistas de la imagen. Hay muchas muestras en las referencias de Apple. Entonces necesita obtener los límites de cada imagen para hacer esto.

Answer 5

Para una aplicación construí utilicé las funciones toques:

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

para arrastrar UIImageViews alrededor. Luego puede usar CGRectContainsRect o CGRectContainsPoint para detectar si la pieza del rompecabezas está en la ubicación correcta.

Answer 6

Mi primer ataque contra este problema sería la siguiente:

(1) UIImageView subclase para sostener cada pieza del rompecabezas.

(2) Personaliza tu subclase UIImageView inicializando con un UIPanGestureRecognizer. Algo así como:

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

(3) En el método de acción asociada con el reconocedor gesto sartén, actualizar la ubicación del objeto en función de los mensajes de la pieza del rompecabezas reconocedor gesto sartén. Algo parecido a lo siguiente se debe trabajar;

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

Aquí es el código de cómo mover imgTest que es un UIImageView. Probado, funciona como un encanto.

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