Découvrir Xcode 7

Analyser en détail son interface

Testez gratuitement nos 1271 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Vous avez la possibilité d'arrêter l'exécution de votre programme pour analyser l'interface utilisateur.

Transcription

Voyons comment analyser votre interface utilisateur un peu, comment faire du debugging, mais au niveau interface utilisateur. Justement appelons notre projet UIDebugging. Et donc on va le mettre au même niveau, Chapitre 5 voilà. Donc UIDebugging, alors ce qu'on va faire c'est qu'on va créer une petit interface, tout simple, avec donc nos composants, je vais choisir mon View Contrôleur, qui est ici, on va mettre un Slider par exemple, et un Switch par exemple, OK, Switch. Il est passé où mon slider, oui OK. Je vais vous rappeler que je vous avais dit ça ne marche pas, ça ne marche que lorsque vous êtes à 100%. OK et mon Slider, on va les mettre-là à coté de l'autre, ensuite on va prendre ces deux-là. Et on va dire de les mettre dans une Stack View, OK ? Donc la Stack View c'est quelque chose de nouveau depuis IOS 9 et depuis Xcode 7 Ça permet donc de stacker les éléments, c'est-à-dire d'avoir automatiquement les contraintes et notamment de définir qu'ils sont séparés du 10, voilà. Ensuite on va mettre ça quelque part en haut, donc pour ça il faut prendre la Stack View en entier, on va la déplacer avec le clavier, ça marche aussi. Avec ce qui est à priori pour moi est un petit bug, en fait de Xcode, qui est assez rigolo. Et je sais pas si vous voyez le Slider qui continue à s’agrandir. C'est un peu pathétique soit, mettons-là à cet endroit-là et puis maintenant on va mettre un Text Field. On va le mettre à cet endroit -là par exemple et on va décider que ces deux-là on va les prendre, même chose à stacker dans une Stack View. Cette Stack View est verticale et non pas horizontale, et je vais décider que l’écartement est aussi de 10, avec la nuance que je vais demander que ceci soit collé à gauche et à droite. mais à droite avec du zéro. Voilà comme ça on fait Add Constraint et donc comme ça il l'a collé, ensuite ne vous donnez pas de mal allez voir ce qui se passe ici. Il a besoin de Contrainte alors, pour qu'il ait besoin de contrainte c'est assez simple on peut lui demander de rajouter les Missing Constraints et là m'agir merveille c'est formidable. On va lancer maintenant pour voir ce qui se passe, je vais pas lancer sur 6+, ceci dit on va lancer sur un 6, comme ça, ça vous permettra de voir ce qui se passe. Voilà je vous affiche l'iPhone 6. Voilà. Et le tout qui apparaît, alors pas exactement comme on le voudrait et c'est pour ça qu'on pourrait éventuellement voir ce qui se passe au niveau de nos contraintes et des choses ainsi. Alors pour ça bon, voilà voyez que ça, ça fonctionne et ceci dit tout fonctionne. Et là on va pouvoir s’arrêter, on pourrait appuyer là. Mais c'est pas ce qu'on veut, là c'est une pose d’exécution du programme et donc ça permet de debugger. Ce qu'on veut c'est vraiment une pose graphique, je dirais. Donc debugger là View Hierarchy, ça s'appelle, un clique sur le bouton. Et on va se retrouver dans quelque chose d'assez sympa. Ça prend un peu du temps, le temps de construire l’interface utilisateur. voilà, elle a été construite. Et on voit deux choses là sensiblement, on va cacher cette partie du bas, pour voir deux choses. D'abord ici on peut zoomer tout simplement, OK en Pin Show, soit vous pinschez, soit vous zoomez avec les boutons plus et moins. Avec l'égale, ça me ramène à un certain niveau, et ensuite vous pouvez aussi glisser et déplacer votre interface et vous le rentrez dans une version un peu en 3D. En tout cas là c'est très plat, simplement parce qu'on a bougé ça. Alors que ce qu'on voulait, c'était ça, là vous voyez l’écartement, c'est un peu abusé là, comme ça voilà. Et là vous voyez que tout est en 3D, donc on peut tourner dans tous les sens ou même pour tourner carrément d'autre côté, et si on sélectionne ceci, à ce moment-là on verra ce qui se passe. Alors on peut voir notamment que notre Slider par exemple ici a été sélectionné, donc c'est une Image View à l'intérieur de Slider, mais le vrai Slider en lui-même est ici avec ces contraintes notamment. On voit qu'il a comme Contrainte ceci, cela, voilà. Donc ça permet de définir quel est le problème, et donc de s'attarder sur les différentes choses. De la même façon on peut d'ailleurs décider ne pas voir certaine partie on peut décider de ne voir voilà, que notre Slider par exemple et ça permettra de voir tout ça. Alors il y a plein de choses ici si vous regardez un petit peu voilà de montrer le clique Context, de montrer par exemple les Contraintes ou pas et plein de choses ainsi, d'afficher la vue et ce qu'on veut sur ce Wireframes et le contenu juste le contenu, voilà. Si on affiche les Wireframes voyez je vais vous montrer tout ça, et là vous verrez que des frames c’est-à-dire pas du le contenu. C'est pas en général ce que vous voulez. A l'inverse on peut mettre juste le contenu aussi, en général on veut les deux, le tout simple on est de Wireframes et le contenu, OK. Donc voilà, ça vous permettra d'analyser la situation et de vous demander par exemple, par quelle raison votre interface utilisateur n'est pas comme ce que vous désireriez.

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 !