Share
Xcode 6 apporte un certain nombre d'améliorations significatives. L'une des avancées les plus remarquables est le débogage de vues. Souvent, l'interface utilisateur d'une application ne se comporte pas comme prévu. Les vues peuvent ne pas être affichées ou, si elles le sont, elles peuvent ne pas s'afficher correctement. Ce didacticiel explique comment utiliser les nouvelles fonctionnalités de débogage de vues de Xcode pour identifier et résoudre facilement les problèmes dans l'interface utilisateur d'une application..
Pour commencer, téléchargez le projet exemple à partir de GitHub et ouvrez-le. ViewDebugging.xcodeproj. Le projet contient une application simple à onglets avec quelques contrôleurs de vue, un délégué d'application et un storyboard. Cette application a été conçue pour l'iPhone, mais elle s'affichera correctement sur tous les appareils, car elle utilise la disposition adaptative, introduite dans iOS 8..
Le but de l'application est de faire une simple liste de choses à faire. Il comprend un écran de résumé pour afficher d'autres informations, telles que le nombre d'éléments de la liste de tâches à faire, l'avatar de l'utilisateur et son identifiant Twitter. Exécutez l'application dans le simulateur iOS en cliquant surconstruire et couriren haut à gauche.
Tout de suite, vous remarquerez peut-être un problème avec l'interface utilisateur. La vue tabulaire ne semble pas afficher de données. S'ouvrir FirstViewController.swift et localisez la ligne de code suivante.
var mockNotesDataSource: [String] = ["Faites un peu de lessive", "Finir les devoirs", "Promenez le chien", "En savoir plus sur le débogage de la vue"] didSet self.tableView.reloadData ()
le mockNotesDataSource La variable sert de source de données à la vue table. Nous utilisons les capacités d'observation de la propriété de Swift. En conséquence, la vue tabulaire est automatiquement rechargée chaque fois que la source de données change. En regardant l'extrait de code ci-dessus, quatre éléments doivent être affichés dans la liste des tâches. Il semble que quelque chose ne va pas.
Le problème semble être lié à l'interface utilisateur. Lorsque l'application est en cours d'exécution, appuyez sur le bouton Hiérarchie des vues de débogage bouton en bas. Vous pouvez également naviguer vers Débogage> Afficher le débogage> Capturer la hiérarchie des vues permet également le débogage de vue.
Lorsque le débogage de vue est activé, Xcode prend un instantané de la hiérarchie de vues de l'application et présente une vue éclatée en trois dimensions de l'interface utilisateur. Il montre la hiérarchie des vues de l'application, la position, l'ordre et la taille de chaque vue, ainsi que les interactions entre les vues..
En regardant le rendu en trois dimensions, nous pouvons voir que la liste de tâches à charger se charge bien, mais les cellules de la vue tableau sont trop larges..
Arrêtez le débogage de l'application et accédez à Main.Storyboard pour résoudre le problème. Cliquez sur la vue tableau et sélectionnez Editeur> Résoudre les problèmes de mise en page automatique> Réinitialiser les contraintes suggérées.
Générez et exécutez à nouveau l'application pour vérifier que l'interface utilisateur s'affiche correctement. Clique le Hiérarchie des vues de débogage bouton pour examiner de plus près certaines des autres fonctionnalités du débogage de vue.
Cliquez et faites glisser n'importe où dans le rendu en trois dimensions pour incliner et déplacer l'interface utilisateur. Inclinez-le vers la gauche ou la droite pour sélectionner la vue tableau.
Une fois qu'une vue est sélectionnée, Xcode la met en surbrillance et la remplit. Objet et Taille les inspecteurs à droite. Pour confirmer que vous avez sélectionné la vue tabulaire, examinez la barre de saut en haut et vérifiez que UITableView est le dernier élément à droite.
le Objet et Taille les inspecteurs incluent une mine d'informations utiles. Auparavant, les développeurs devaient s'appuyer sur des instructions de journal ou des points d'arrêt pour inspecter la configuration d'une vue..
Ouvrez le Taille inspecteur à droite et, dans le Mise en page automatique section, notez que les contraintes correctes sont maintenant appliquées à la vue. dans le Objet inspecteur, vous pouvez inspecter les attributs de la vue sélectionnée.
Juste au-dessus de la zone de débogage dans Xcode, neuf boutons et curseurs sont utilisés pour le débogage de la vue..
Voici ce que fait chacun de ces contrôles, de gauche à droite:
Prenez quelques minutes pour jouer avec ces commandes afin de bien comprendre ce qu’elles font..
Générez et exécutez à nouveau l'application et appuyez sur le bouton Plus onglet au bas de l'interface utilisateur de l'application. À première vue, l’interface utilisateur semble correcte, mais elle ne se comporte pas exactement comme elle le devrait. Un effet de flou en haut de l'image ne s'affiche pas. Déboguer la hiérarchie des vues pour mieux identifier le problème.
Commencez par un panoramique à gauche ou à droite pour tout voir en biais. Ensuite, faites glisser le Voir le curseur d'espacement vers la droite.
Lorsque l'interface utilisateur est séparée, il devient évident qu'une autre vue est cachée sous l'image. Sélectionnez-le pour confirmer que c'est la vue d'effet visuel manquante.
Ouvrir Tableau principal et naviguer vers Deuxième scène de contrôleur de vue. dans le plan du document volet de gauche, développez le Deuxième contrôleur de vuede Vue objet pour voir comment ses sous-vues sont ordonnées.
Xcode couche les vues par ordre croissant dans le contour du document. En d'autres termes, les éléments en haut de la liste constituent le fondement de la hiérarchie des vues..
Résoudre notre problème est simple. Blur Effect Voir sera en dessous Image du ciel au moment de l'exécution, car il s'agit de la première vue dans la hiérarchie. Cliquez et faites glisser le Blur Effect Voir sous Image du ciel dans le plan du document. Le résultat devrait maintenant ressembler à la capture d'écran ci-dessous.
Si vous exécutez l'application à nouveau, l'effet de flou devrait être visible. L'interface utilisateur de l'application ressemble maintenant à sa conception. Examinons quelques-unes des fonctionnalités de débogage du simulateur iOS pour voir ce qui peut encore être amélioré.
Générez et exécutez l'application dans le simulateur iOS. Avec le simulateur iOS sélectionné, sélectionnez Couches mélangées de couleurs du Déboguer menu.
L'interface utilisateur de l'application est recouverte d'un mélange de vert et de rouge. Ce sont des indices pour montrer quelles couches ont le fondu activé et lesquelles sont opaques. Le mélange des couches est une opération de calcul intensive. Il est donc recommandé d'utiliser des couches opaques autant que possible.
Apple note dans sa documentation d'essayer d'utiliser des couches opaques lorsqu'il s'agit de vues sous forme de tableau. L'une des principales causes de mauvaises performances lors du défilement est due au contenu fusionné. Lorsque l'arrière-plan du contenu est opaque, le défilement devient généralement plus fluide..
Pour cette application, si un utilisateur a des centaines d'éléments dans sa liste de tâches, il risque de subir des performances de défilement instables ou incohérentes. Les cellules de la vue tableau utilisent actuellement des couches mélangées. L'arrière-plan de la vue du contrôleur de vue étant déjà blanc, l'utilisateur final ne verra aucune différence si les cellules de la vue du tableau sont mélangées ou opaques avec un arrière-plan blanc..
Ouvrir Tableau principal et sélectionnez le prototype de cellule de vue tableau dans la To Do list scene. dans le Inspecteur d'attributs. Faites défiler jusqu'à la Dessin section et chèque Opaque.
Générez et exécutez l'application avec la coloration des couches mélangées activée. Puisque les cellules de la vue tableau sont maintenant opaques, elles sont recouvertes d’une couleur verte, ce qui indique qu’elles sont opaques..
Outre le marquage des couches, il existe une poignée d'autres fonctionnalités pouvant faciliter le débogage dans le simulateur iOS. Voici quelques-uns de ceux que je trouve les plus utiles:
L'impact de la barre d'état sur votre application si un appel est en cours a été négligé par de nombreux développeurs. Vous pouvez facilement tester cela en basculant la barre d'état en cours d'appel. Vous faites cela en sélectionnant Basculer la barre d'état en cours d'appel du Matériel menu dans le simulateur iOS.
Pour voir comment votre application réagit à un tel événement, appuyez sur Command-T, pour activer les animations lentes, et appuyez sur Command-Y pour afficher la barre d'état en cours d'appel. Si votre application utilise une barre de navigation, le système d'exploitation s'en charge pour vous..
Outre la coloration des vues, gardez à l'esprit que le simulateur iOS peut également résoudre les problèmes liés à Core Location. Vous pouvez simuler un appareil à une latitude et une longitude spécifiques. Il est même possible de tester plusieurs sites d'échantillonnage. Si votre application utilise iCloud pour gérer les données, vous pouvez également déclencher manuellement un événement de synchronisation..
Bien que l'application de démonstration incluse soit très simple, l'utilisation des techniques mentionnées dans cet article peut permettre de gagner des heures sur des projets futurs. Le débogage des vues peut vous aider à résoudre de nombreux problèmes survenant dans l'interface utilisateur..
En dehors de Xcode et du générateur d'interface, l'utilisation des fonctionnalités de débogage du simulateur iOS peut aider à améliorer les performances et à identifier les goulots d'étranglement. Les directives d’interface humaine d’Apple insistent sur l’importance des applications réactives, faciles à utiliser et à naviguer. Avec les améliorations apportées au constructeur d'interface, il n'a jamais été aussi facile de le faire..
Accentsconagua