Animation de sous-vues dans une transition interactive de UITableView à UIView

Pour une application iOS 7 uniquement, j'ai un UITableView (bien qu'il serait académique de le changer en UICollectionView si cela peut aider) où les cellules ressemblent à ceci:

+----------------------------------+=======+ | Label1 | sub- | | Label2 Label3 | view | +----------------------------------+=======+

Je veux passer à une deuxième vue, où la sous-vue est agrandie pour être plus grande, et les positions d'labels changent, quelque chose de plus comme ceci:

  +----------+ | | | subview | | | +----------+ Label1 Label2 Label3

Ceci est similaire à l'application Calendrier iOS7, où les vues sont la transition et l'animation des parties sur le path. Je sais que je vais devoir implémenter UIViewControllerAnimatedTransitioning , mais j'ai des problèmes conceptuels avec la façon dont quelque chose comme ça fonctionnerait. Dois-je cacher les sous-vues de la cellule, les replace par les sous-vues de la nouvelle vue mais au même endroit, puis les animer? Ou y a-t-il une manière less compliquée? Tout exemple de code serait apprécié, car tous les exemples que j'ai trouvés ne portent pas de sous-vues d'une vue à l'autre.

ETA: Plus je réfléchis à cela, plus je me request: est-ce mieux géré avec un UICollectionView avec une disposition de stream, et a simplement le détail d'un redimensionnement animé de la cellule à la taille de l'écran?

Les animations du calendar iOS7 sont, je pense, réalisées avec des mises en page de transition animées en vue de la collection, qui sont merveilleuses mais pas tout à fait ce que vous voulez pour cette situation. En outre, ils semblent vous garder dans le même controller de vue qui peut ne pas être approprié pour un scénario maître-détail que vous décrivez ci-dessus.

J'ai récemment joué avec des transitions animées et j'ai découvert que les nouvelles vues instantanées disponibles dans iOS7 sont géniales pour ce genre de choses.

Je suis un grand fan de la layout automatique mais les animations de transition utilisant des contraintes sont beaucoup trop compliquées. Cependant, vous pouvez supposer qu'au début d'une transition, vos vues sont déjà présentées, vous pouvez donc appliquer les principes suivants:

Ajouter la vue entrante à votre hiérarchie de vue
Créez une vue de canvas vierge en plus de cette
Créez un instantané de vos vues sortantes et ajoutez-les à la canvas
Créez un instantané de vos vues entrantes et ajoutez-les à la canvas
Effectuez les animations entre les deux
Enlever la canvas

Parce que la layout a déjà eu lieu, vous pouvez utiliser les propriétés center ou frame de vos vues existantes sur ces clichés et les animer. Cela rend le code beaucoup plus facile à lire. C'est ce que veut dire le commentaire d'Augie.

Dans votre cas, vous pouvez get l'effet attendu en liant les différentes vues de la cellule sélectionnée aux vues du controller entrant et en les animant à leurs nouvelles positions.

J'ai fait un exemple de projet avec cette transition, disponible sur GitHub . L'effet final ressemble à ceci:

exemple de vidéo

Ceci est juste un exemple rapide pour montrer comment l'animation pourrait être réalisée. Dans le code de production, vous devez probablement rendre les controllers participants conforms à un protocole dans lequel ils ont renvoyé un certain nombre de vues à utiliser lors de la transition plutôt que d'exposer directement les propriétés et de lier la transition à ces classs spécifiques.