Découvrir Xcode 7

Découper son application en plusieurs storyboards

Testez gratuitement nos 1324 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Lorsque votre application va se développer, elle va être amenée à devenir plus complexe. Alors vous allez pouvoir décider de découper votre storyboard principal en plusieurs.

Transcription

Maintenant nous allons voir comment découper notre application en plusieurs Storyboards, pour contrôler une application un petit peu plus grande. On va faire une application qui s'appelle Split tout simplement comme enrégistrée. Pour l'instant on a juste une scène, justement on va la prendre cette scène. On va la mettre dans un View Contrôleur, donc l'Embed in est dans Navigation Contrôleur, donc on va prendre ici, le menu éditeur? Embed in, Navigation Contrôleur, pour avoir une navigation justement. Pour se rendre Navi plus simple on va aller ici et décider que la taille est une Freeform toute petite. On va essayer 200 par 200, on va voir si j'ai toujours écrit une Navigation Contrôleur. voilà ça c'est très bien. Ça nous permettra donc d'avoir quelque chose qui ne prend pas beaucoup de place. Donc là on peut cacher la droite et la gauche, reprendre ceci, voyez que tout est en tout petit. Alors je mets un peu dehors ici et là dedans je vais mettre deux boutons justement. On va voir ce que je vais faire, c'est que je vais créer deux paths, on va dire, et mettre un bouton-là. Alors pour le copier je vous donne deux astuces, soit Commande D, pour Duplicate, voyez que c'est dans le menu Edit. Duplicate. Soit cliquer et tirer avec le bouton Alt, qui vous permet notamment de le mettre exactement au même endroit. OK, donc là on va le mettre par exemple voilà à cet endroit-là, On va laisser tous les deux en haut à égale distance l'un de l'autre. Et ce qu'on va faire ensuite c'est qu'on va leur demander de rester toujours au milieu tous les deux. Pour ça on a sélectionné tous les deux et on va le retirer de se centrer Horizontally in Container. Et voilà ils vont rester à ce moment-là au centre avec une petite erreur ici, qui est en fait qui n'ont pas de Contrainte de positionnement par rapport en haut. Donc ce qu'on va faire par exemple, à lui, on va lui dire de se mettre toujours en haut, OK. Et à celui-ci on pourrait dire la même chose, sensiblement. On pourrait le finir par rapport à l'autre, mais peu importe Donc ici on va avoir deux boutons, lorsque je vais cliquer sur ce bouton, je vais partir dans deux endroits différents de notre application. Alors on va dupliquer ici sous View Controller là, avec commande D, ça, peut-être vous perturbez qui sont de cette taille-là, parce que je ne sais pas si vous vous rendez compte, en fait, le fait est qu'ils ne sont pas du tout dans la hiérarchie, il n'y pas de raison qu'ils traînent [inaudible] l'autre. Pour qu'il soit dans la hiérarchie ce qu'on va faire c'est qu'on va aller justement lui dire de prendre on Segue de l'un des boutons-là vers l'autre. Et à ce moment-là Show, on va voir que ce qui va aparaître, c'est que le bouton va voir une tout petite version. Là ce qu'on va faire, c'est qu'on va donc créer un autre, on va à nouveau dupliquer ça. Même chose avec celui du bas, donc on va reprendre le bouton ici. Show et on va voir donc un en bas, alors c'est perturbant, parce qu'ils sont l'un sur l'autre. Donc on va démettre l'un au dessous de l'autre pour le coup. Et donc ce qu'on va faire c'est que là on a besoin que d'un bouton, donc on va enlever celui-là, pour la suite. Ce qu'on va faire, c'est qu'on va ensuite mettre tout simplement un View Contrôleur. Pour le coup le View contrôleur-là pas forcément au besoin de le dupliquer parce qu'il nous faut des petits. OK, donc on va les mettre là. Alors on se bat un petit peu toujours avec la taille, c'est pour ça que j'aime bien avoir des petits View contrôleur justement. C'est plus simple, voilà, ça c'est une taille. Et puis l'autre View Contrôleur, même chose, une taille, Un Show. Verrons ce qu'on a sur l'autre c'est un peu perturbant. Pour qu'on s'y retrouve, pour qu'on sache de quoi on parle, on va mettre des couleurs, on va se baser sur deux styles de couleurs. Là on va prendre par exemple des espèces de jaune, ou des espèces de vert-là, et en dessous on va mettre des espèces de bleu, et des espèces de bleu plus foncé. D'ailleurs le cyon-là est quand même un peu trop clair à mon goût, donc prenons quelque chose un peu plus foncé, voilà. Donc on va refermer maintenant et là on a des couleurs qui nous parlerons un petit peu plus, donc on va lancer l’application, pour la première fois cette fois-ci. Et on va voir ce qui se passe, bon. Rien de folichon à priori, on va avoir une application qui va démarrer, qui va se lancer. Et là on est sur un iPhone 6+, donc c'est un peu grand quand même. Peu importe du moment que je sois en haut, vous voyez. Là je suis évidemment très très grand. Si je clique sur le bouton, voilà là j'ai le jaune, qui apparaît et là le vert, or si je recule, en dessous par contre j'ai les bleus et donc le bleu plus foncé. Le problème maintenant c'est que ça peut être beaucoup au bout d'un moment dans une application. Vous pouvez imaginez que vous avez toute une partie en haut qui se développe et qui part dans tous les sens, et en bas même chose, or ce que vous devrez faire, c'est que vous devrez spliter ça, pour ça on va sélectionner nos deux View Contrôleur du haut, pas le bouton, juste les View Contrôleurs, voilà. Et aller dans le menu Éditeur, Refactor to Storyboard. Et on va l'appeler Up, par exemple, puisque c'est celui dans haut. Et vous voyez qu'à ce moment-là qu'est-ce qui se passe ? Alors deux choses : première chose vous l'avez vu très rapidement on revenir dessus, Il s'est pas passé quelque chose dans mon main Storyboard. La deuxième chose c'est qu'il m'a créé à UP. Storyboard, et qui m'a mis dans mon UP. Storyboard. Et la troisième chose d'ailleurs c'est que : on a ici le concept d'un Navigation Contrôleur qui est donc un Initial View Contrôleur. Il faut aller cliquer sur la Navigation Contrôleur, et aller décider ici voilà où on dit Is Initial View Controller voilà, enlever cette partie-là, voilà. Là si je décoche ceci, j'ai la petite flèche qui part, alors la flèche est très importante. Le Storyboard foit savoir quel est son Navigation contrôleur Initial. Alors évidemment le View Contrôleur ici n’était pas Initial, par contre dans UP, si je vais faire un tour un petit peu dans mes Stroyboards, on verra que celui-là est devenu l'inital. Voyez et donc même si je sélectionne ici, j'ai bien Initial View Contrôleur. Donc revenons ici, vous l'avez peut-être vu il y a deux secondes justement. On a toute cette partie-là qui était remplacée par un Up, tout simplement. Donc on va faire la même chose en bas. Refactor to Storyboard, Down, avec un o, et même chose voilà, il m'a créé un deuxième et dans le Storyboard j'ai un UP et Down, on va mettre un petit peu d'ordre, ici, UP et Down, voilà, donc là c'est quand même assez propre. Alors relançons pour voir qu'est-ce qui se passe au niveau de l'application. On va scroller vers le haut, voilà. On a le bouton du haut, qui donc donne le jaune et le vert. Et le bouton du bas, qui donne donc le bleu et le bleu foncé. OK donc ça fonctionne en gros comme avant. Alors petite astuce au passage : voyez que là je tombe dans le UP d'ailleurs, si je double clique eh bien ça va m'ouvrir directement le UP Storyboard. D'abord vous pouvez à tout moment décider de mettre un autre contrôleur par exemple qui serait donc votre Initial View Contrôleur. Mais vous pouvez aussi décider de donner un nom à celui-ci par exemple, appelons-le Dark par exemple, de Storyboard ID. On va le sélectionner Dark, parce qu'il est foncé. Et vous pouvez décider que dans le main Storyboard au moment où vous allez dans le UP, vous allez configurer ça un petit peut comme dire OK, certes je vais dans le UP, mais comme Initial View Contrôleur je veux que tu ailles dans Dark. Je vous rappelle que pour l'instant donc on passe d'abord par du clair, et ensuite du foncé. Alors que si maintenant je relance l'application ce qui va se passer c'est que je vais aller directement dans le foncé, puisque j'ai donné une référence, je vais lui demander d’aller directement dans le foncé. Et donc j'ai évidement pas de bouton là, puisqu'il n'y a pas de bouton dans ce View Contrôleur. Et je reviens directement. En gros j'ai skippé carrément le jaune ici. Donc voilà on a vu comment passer d'un view Contrôleur à l'autre, on l'avait déjà vu, mais surtout comment restructurer tout ça et travailler avec plusieurs Stroyboards, ce qui vous permet entre autre éventuellement dans certains cas d'avoir aussi un Storyboard pour un certain cas ou une certaine interface utilisateur. Attention de ne pas abuser de ça et de toujours penser à utiliser les Contraintes en gros, vous avez plein, plein d'autres choses à votre disposition au niveau des Contraintes visuelles qui vous permettent de ne pas devoir utiliser plusieurs Stroyboards.

Découvrir Xcode 7

Explorez l’interface et les fonctionnalités d’Xcode 7. Gagnez ainsi en productivité lors du développement de vos applications iOS, OS X, watchOS et tvOS.

Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :4 mai 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !