UICollectionViewTransitionLayout - imitando la raccolta di foto iOS7 layout della vista

Question

Sto leggendo le mele guidelines su animating changes in a collection view, cercando di imitare l'app per le foto. Quando si sceglie un'immagine, l'immagine "cresce" dall'area che si trova nella collectionview a una vista a dimensione intera.

Note Apple che utilizzano un oggetto UICollectionViewLayout ma per me è molto disordinato e anche l'immagine finale nella galleria di dimensioni complete non è visibile, poiché l'animazione è centrata sulla collectionview.

Il mio codice è il seguente

-(void)setHorizontalLayout:(BOOL)layout 
{ 
    if (layout == YES) 
    { 


     UICollectionViewTransitionLayout *layout =[self.collectionView startInteractiveTransitionToCollectionViewLayout:[self getHorizontalPagingLayout] completion:^(BOOL completed, BOOL finish) { 
      [self.collectionView setPagingEnabled:YES]; 
     }]; 

     [self.collectionView.collectionViewLayout invalidateLayout]; 
     layout.transitionProgress = 0.1; 
     double delayInSeconds = 0.1; 
     dispatch_time_t popTime = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(delayInSeconds * NSEC_PER_SEC)); 
     dispatch_after(popTime, dispatch_get_main_queue(), ^(void){ 
      [self updateLayout:layout]; 
      //[self.collectionView.collectionViewLayout invalidateLayout]; 
      //[self.collectionView finishInteractiveTransition]; 

     }); 
     [self.collectionView.collectionViewLayout invalidateLayout]; 
     return; 
} 
} 

-(void)updateLayout:(UICollectionViewTransitionLayout *)layout 
{ 
    if (layout.transitionProgress >= 1.0) 
    { 

     [self.collectionView finishInteractiveTransition]; 
     return; 
    } 
    double delayInSeconds = 0.05; 
    dispatch_time_t popTime = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(delayInSeconds * NSEC_PER_SEC)); 
    dispatch_after(popTime, dispatch_get_main_queue(), ^(void){ 
     layout.transitionProgress += 0.005; 
     [self.collectionView.collectionViewLayout invalidateLayout]; 
     [self updateLayout:layout]; 
    }); 

} 

Answer 1

Come su presentazione di un UIViewController con un'UIImageView utilizzando una transizione personalizzato? Questo tutorial mi ha aiutato.

http://www.teehanlax.com/blog/custom-uiviewcontroller-transitions/

Answer 2

So che Foto effettivamente utilizzare il layout per il layout di transizione navigazione sul UICollectionViewController (useLayoutToLayoutNavigationTransitions per ottenere l'animazione quando si passa da momenti di anni ecc (Session 218 nel 2013, se non sbaglio)

detto questo le cose si fanno davvero interessanti quando si tenta di imbarcazioni transizioni tra viste di raccolta con diverse fonti di dati. I chaps al Objc.io ha scritto un bel pezzo su questo.

Tuttavia, se siete alla ricerca implementare il pizzico per aprire l'effetto è in realtà molto più semplice di quanto sembri.

In breve, assumiamo semplicemente di voler animare una cella dalla vista di raccolta per espanderla in un controller a schermo intero. In questo caso, tutto ciò che devi fare è implementare una transizione personalizzata per il controllo del viewcontroller in cui applichi efficacemente una trasformazione a FullScreenPhotosViewController per farla iniziare nel punto della cella. Quindi animiamo semplicemente la trasformazione a schermo intero.

Una volta che hai lavorato per renderlo interattivo, il trucco in questo passaggio è nascondere la cella della vista di raccolta mentre avvii la transizione quando desideri animare il controller a schermo intero e non la cella (se non si nascondilo allora la cella sarà ancora visibile e sembrerà confusa). Quindi in pratica la cella che ora tieni sotto le dita è in realtà il FullScreenPhotosViewController con il tuo pizzico alla guida della trasformazione e la cella originale è nascosta. Man mano che si espande il controller, si aggiorna la percentuale di completamento in modo che la barra di navigazione venga aggiornata insieme alla transizione.

Se vuoi maggiori dettagli, posso includere come puoi calcolare le trasformazioni ecc. Quando arrivo al computer?