Pulsante flip iPhone destro (come iTunes)

Question

Sto provando a capovolgere tra due visualizzazioni. È facile, il codice è sotto, ma voglio anche girare contemporaneamente il pulsante usato per eseguire il flip.

È possibile visualizzare questo comportamento nell'applicazione iPod durante la riproduzione di una traccia; toccando il pulsante flip si inverte tra la copertina e l'elenco delle tracce, ma si gira il pulsante allo stesso tempo.

Questa è una pagina sul controller di navigazione, e il pulsante che voglio capovolgere è lo rightBarButtonItem.

Ecco il codice che ho finora. Questo capovolge la vista, ma non la barra destra.

[UIView setAnimationBeginsFromCurrentState: YES]; 
[UIView setAnimationDuration: 0.5f]; 
[UIView setAnimationCurve: UIViewAnimationCurveEaseInOut]; 
showingBackside = !showingBackside; 
if (showingBackside) { 
    [UIView setAnimationTransition: UIViewAnimationTransitionFlipFromLeft 
          forView: self.view 
          cache: YES]; 
    [self.view addSubview: backside.view]; 
    [frontside.view removeFromSuperview]; 
} else { 
    [UIView setAnimationTransition: UIViewAnimationTransitionFlipFromRight 
          forView: self.view 
          cache: YES]; 
    [self.view addSubview: frontside.view]; 
    [backside.view removeFromSuperview]; 
} 
// flip image, too 
NSString *newImage = showingBackside ? @"backside.png" : @"frontside.png"; 
[(self.navigationItem.rightBarButtonItem) setImage: [UIImage imageNamed: newImage]]; 
[UIView commitAnimations]; 

(Il codice di immagine flipping qui non può compilare, ho aggiunto dopo per cercare di spiegare quello che stavo cercando di fare.)

Dove sto correndo nei guai è che voglio cambiare il pulsante più a destra nel controller di navigazione in modo che si inverta simultaneamente.

Come posso fare? Quale vista si anima e lo faccio come parte dello stesso blocco di animazione o separato? Qualche consiglio sarebbe apprezzato, sicuramente non ho ancora una buona idea sull'animazione.

Answer 1

C'è qualche discussione here, ma la soluzione non è così elegante.

Prima di tutto, poiché UIBarButtonItem non è un discendente di UIView, probabilmente non è possibile utilizzare le animazioni UIKit direttamente sullo UIBarButtonItem. Tuttavia, puoi provare a impostare un customView e ad animarlo. Puoi usare lo stesso blocco di animazione.

Answer 2

Ok, ecco cosa ho effettivamente fatto per risolvere questo problema:

ero già utilizzando una visualizzazione titolo personalizzato. Invece di usare rightBarButtonItem, ho reso più ampia la mia vista personalizzata.

Ho creato un'immagine di entrambi i lati del pulsante, completa con la cornice di navigazione e incorporata nell'applicazione. A mio avviso il titolo, ho messo:

• Un UIView che sarà la mia sostituzione per il controllo a destra (lo chiamano rightControl), posizionato in modo appropriato.
• Un pulsante su UIView che risponde a UIControlEventTouchUpInside e attiva il mio flipSide:.

In fase di esecuzione, creo un UIImageView per ogni stato. Inseriscos in rightControl, ma nasconde quello che non è predefinito. Cambio le bandiere nascoste in flipSide: in un blocco di animazione dedicato.

Insanely strano. Ma funziona.

Answer 3

Basta usare un UIView personalizzato per il pulsante di navigazione destro che contiene due pulsanti da sfogliare.

È possibile utilizzare un approccio semplice per la creazione di un UIView personalizzato che viene visualizzato come elemento del pulsante di navigazione corretto. Questa UIView dovrebbe contenere i due UIButtons da sfogliare.Ricorda che gli UIButtons sono anche UIViews in modo che possano essere capovolti usando le stesse transizioni con cui è possibile sfogliare una normale visualizzazione dell'interfaccia utente e, naturalmente, possono essere toccati! Ecco alcuni esempi di codice che funzionano:

Nota: utilizzo una funzione di comodità per creare pulsanti come categoria personalizzata di UIViewController (nota: è possibile aggiungere lo stesso codice per creare una categoria personalizzata anche per UIView, basta copiare lo stesso linee e sostituire UIViewController con UIView) - Se si desidera utilizzarlo, è sufficiente creare una categoria personalizzata includendo questo codice di seguito, in alternativa è possibile creare gli UIButton come faresti normalmente.

// create custom category for UIViewController to allow common button creation routine, add to .m or .mm file or add to a .h file and #import that .h file 
     @interface UIViewController (ButtonAndSelector) 
     - (UIButton *)createUIButtonWithImage:(UIImage *)image forState:(UIControlState)state withSelector:(SEL)selector usingFrame:(CGRect)buttonImageFrame; 
     @end 

     @implementation UIViewController (ButtonAndSelector) 
     - (UIButton *)createUIButtonWithImage:(UIImage *)buttonImage forState:(UIControlState)state withSelector:(SEL)selector usingFrame:(CGRect)buttonImageFrame 
     { 
      UIButton *button = [[UIButton alloc] initWithFrame:buttonImageFrame]; 
      [button setBackgroundImage:buttonImage forState:state]; 
      [button addTarget:self action:selector forControlEvents:UIControlEventTouchUpInside]; 
      [button setShowsTouchWhenHighlighted:YES]; 
      return button; 
     } 
     @end 

// add this to your .h file: 
     @property (strong, nonatomic) UIView *coverListView; 
     @property (strong, nonatomic) UIButton *listButton; 
     @property (strong, nonatomic) UIButton *coverButton; 

     - (void)animateCoverListButtonFlip; 

// add this to your .m or .mm file to synthesize the variables: 
     @synthesize coverListView; 
     @synthesize listButton; 
     @synthesize coverButton; 

// add this to your .m or .mm file in the viewDidLoad: 

     // setup right button bar (flips between list icon and coverart image) 
     self.coverListView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 32, 30)]; 
     self.coverListView.backgroundColor = [UIColor clearColor]; 
     self.coverListView.opaque = NO; 

     self.listButton = [self createUIButtonWithImage:[UIImage imageNamed:@"navbar_icon_tracklisting"] forState:UIControlStateNormal withSelector:@selector(showHideQueue) usingFrame:CGRectMake(0, 0, 32, 30)]; 
     self.listButton.backgroundColor = [UIColor clearColor]; 
     self.listButton.showsTouchWhenHighlighted = NO; 

     self.coverButton = [self createUIButtonWithImage:[UIImage imageNamed:@"default_coverart_small"] forState:UIControlStateNormal withSelector:@selector(showHideQueue) usingFrame:CGRectMake(0, 0, 32, 30)]; 
     [self.coverListView addSubview:self.coverButton]; // show coverButton by default 
      self.coverButton.showsTouchWhenHighlighted = NO; 

     UIBarButtonItem *barButtonItem = [[UIBarButtonItem alloc] initWithCustomView:self.coverListView]; 
     [self.navigationItem setRightBarButtonItem:barButtonItem]; 


// add this to viewDidAppear if you want to flip the button when the screen appears like the build in iPod app does 
     [self animateCoverListButtonFlip]; 

// add this routine to flip the right navigation bar custom view/buttons 
     - (void)animateCoverListButtonFlip 
     { 
      [UIView beginAnimations:nil context:NULL]; 
      [UIView setAnimationDuration:0.75];  
      [UIView setAnimationTransition:([self.listButton superview] ? UIViewAnimationTransitionFlipFromLeft : UIViewAnimationTransitionFlipFromRight) forView:self.coverListView cache:YES]; 

      if ([self.listButton superview]) { 
       [self.listButton removeFromSuperview]; 
       [self.coverListView addSubview:self.coverButton]; 
      } else { 
       [self.coverButton removeFromSuperview]; 
       [self.coverListView addSubview:self.listButton]; 
      } 
      [UIView commitAnimations]; 
     } 

// when the playing album cover changes, remember to update the coverButton: 
     UIImage *artworkImage; // set this to the current playing album image 
     [self.coverButton setImage:artworkImage forState:UIControlStateNormal]; 

// don't forget to call the animateCoverListButtonFlip in the button click handler (shown above as showHideQueue) that shows and hides the cover/queue(list of album tracks0 - something like this: 

     - (void)showHideQueue 
     {  
      [self animateCoverListButtonFlip]; 

      /* replace the code below that is commented out here with your own code that transitions between your cover view and your list view of album tracks, this code shows my transition and references views that are not part of this example/answer, but you don't need those - you'll have your own cover view (musicPlayerView) and list view (musicQueueView) to flip between. 
      [UIView beginAnimations:nil context:NULL]; 
      [UIView setAnimationDuration:0.75]; 
      [UIView setAnimationTransition:([musicQueueView superview] ? UIViewAnimationTransitionFlipFromLeft : UIViewAnimationTransitionFlipFromRight) forView:self.contentView cache:YES]; 

      if ([musicQueueView superview]) { // if music queue is displayed 
       [musicQueueView removeFromSuperview]; 
       [self.contentView addSubview:musicPlayerView]; 
      } else { 
       [musicPlayerView removeFromSuperview]; 
       [self.contentView addSubview:musicQueueView]; 
       [[musicQueueView queueTableView] reloadData]; 
      } 
      [UIView commitAnimations];*/ 
     }