Découvrir Xcode 7

Modifier l'interface utilisateur avec les storyboards

Testez gratuitement nos 1300 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Les storyboards permettent de gérer votre interface. Vous pouvez ajouter des éléments de la bibliothèque, ainsi que des contraintes de disposition.

Transcription

Voyons comment modifier l'interface utilisateur en utilisant le Storyboard et les différentes choses qui sont à votre disposition. La première chose que vous voyez c'est qu'ici je suis dans une version dézoomée de mon Canvas, et donc je ne peux pas sélectionner mes objets. Là j'ai fait un double clic et donc ça m'a zoomé. Si je me remets en zoom, là donc je suis à 100%, si je me remets en 50%, je ne pourrais pas y accéder, donc je peux tout le temps aussi faire Commande+ et Commande - évidemment pour zoomer et dézoomer. Mais le zoom maximum déjà c'est 100% et le zoom minimum 12% dans lequel en fonction de votre résolution vous verrez pas grande chose. Donc il faut double cliquer pour zoomer, pour pouvoir changer des choses. Ensuite vous avez comme on l'a déjà vu certaines fois ici la liste de vos composants vous pouvez afficher soit en gris, soit en liste. La liste vous expliquera un peu plus. Ceci dit la gris, même chose si vous double cliquez sur un objet, il ne va pas l'ajouter, mais il va vous donner l’explication de cet objet. Là ce qu'on a fait, c'est qu'on avait précédemment rajouté deux ou trois objets. Ce qu'on peut regarder c'est de faire rapidement un tour de cet objet. Alors il y a d'abord tous ces objets, qui sont en jaune et qui sont en gros des Navigation Controllers. Alors à quoi ça sert ? Ici vous avez déjà un view controller Je pourrais aussi mettre par exemple un Table View Contrôleur. Voyez c'est tout un objet entier, si je le glisse, j'ai un nouvel écran, en gros. On verra dans un autre chapitre comment passer d'un écran à l'autre, mais pour l'instant je pourrais tout simplement aussi le sélectionner, et avec la touche Delete l'enlever. Comme ça on va rester concentré sur 1 on a des Collections View Contrôleur, on a des Page View Controller. On a ensuite tous les éléments qui sont les Labels, les Boutons, et les Sliders et plein de choses ainsi, mais on a aussi des choses un peu plus complexes, qui sont les Tables View. celles qu'on va pouvoir rajouter à l'intérieur d'une Table View. Mais aussi des Pickers, par exemple, là si je rajoute un Date Picker vous verrez qu'il n'est pas du tout simulé dans le Storyboard, il ne sera simulé que lorsque je lance mon app. Tiens justement je vais lancer mon app et vous verrez que mon Date Picker, lui, il s'affichera une fois qu'il est lancé. On va voir à quel endroit il s'affiche, voyez. Là évidemment j'ai rajouté aucune contrainte, donc il est trop large. Mais vous voyez que les dates sont automatiquement ajoutées, c'est un peu dommage que ce soit la référence qu'on a. Si on prend ceci dit un Picker View, là on aura un Fake vraiment avec Mountain View, Cupertino, tout ça. A l'envers si lui, je le démarre je n'aurais aucune info, parce qu'il faut les remplir au niveau code. Donc on va enlever ça et on va en profiter pour faire un autre test, justement. On a vu que le bouton ici était à gauche alors, imaginons que je veux centrer mon bouton carrément, soyons fou, je veux que mon bouton soit exactement au centre dans les deux cas, c'est-à-dire au centre, en haut et au centre en bas, alors, pour ça vous voyez qu'il y a de petites lignes bleues qui apparaissent et cette ligne bleue me dit : c'est le centre dans ce sens-là et c'est le centre dans ce sens-là. Donc on se dit à priori on est au centre, on va relancer et on va voir ce qui se passe, on va voir où mon bouton va se retrouver. Mon bouton je voudrais qu'il se ressemble et pas du tout au centre, eh bien à droite, et si je tourne c'est encore pire il n'est pas du tout à droite. Ça tient à quoi ? Ça tient en fait que je ne sais pas au moment où je 'designe' sur quel device je vais développer. Pour ça je pourrais certes aller ici lui dire que je veux être sur un iPhone à 4,7. Mais ensuite je ne sais pas si mon application ne va pas tourner sur un iPhone à 5 pouces par exemple. Pour ça il y a différentes options. La première option cachant cette partie droite, ce qui est intéressant à savoir, c'est d'ouvrir ce qu'on appelle un Editeur Assistant sur lequel on reviendra. Dans lequel vous pourrez avoir des prévisualisations, et donc ainsi voir une version ou l'autre. Maintenant ce qu'on va devoir faire, parce que ça sort un petit peu du scope pour centrer ça, c'est de lui dire de rajouter des contraintes, tout simplement, donc pour ça il faut sélectionner la vue. Aller ici, lui dire : Add Miissing Constraints et là on voit qu'il va rajouter des contraintes c'est-à-dire que là c'est plus des pointillés, mais ce sont bien les véritables lignes que je peux sélectionner d'ailleurs. Et vous voyez que c'est dans la liste des Constraints. Si je relance à ce moment-là, la contrainte dit bien : mets-moi toujours au centre, autant en haut qu'en bas. Et à ce moment-là mon bouton va être effectivement au centre et merveille dans les deux cas. Donc ça c'est une des choses qu'on peut faire. On va retourner faire un tour du côté des autres choses, parce qu'il y a quelque chose que je voulais vous montrer. C'est que notamment on a d'autres choses, comme des MapKits et des choses ainsi, mais on aussi toute une série de Gestures Recognizer. Ces Gestures Recognizer ça permettra de dire quand on double tape, ou quand on fait Pinch ou quand on fait une Rotation. A ce moment-là une action devra être exécutée, pour ça il faudra mettre du code. De la même façon quand je rajoute un objet, vous verrez que cet objet prend à ce moment-là cette petite ligne pointillée, qui sont des lignes soit pour dire qu'on est au centre, soit pour dire qu'on est par rapport à un autre objet. Vous voyez qu'on a ici des lignes fixes, mais qui disent qu'on est à X pixels de l'endroit et ainsi de suite. Donc ça, ça nous permet d'avoir des guides en gros. En résumé les Storyboards permettent de travailler entre différents contrôleurs d'y ajouter des éléments, des interactions, ainsi que d'autres détails qui sont encore à découvrir dans d'autres chapitres, Voilà sensiblement tout ce qu'on peut dire sur l'interaction que vous aurez entre vos View Controllers et vos éléments.

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 !