Share
La création d'applications avec des présentations flexibles est devenue essentielle, en particulier depuis la sortie de l'iPhone 5 avec son écran de 4 "et l'introduction de Dynamic Type dans iOS 7, permettant aux utilisateurs de modifier la taille du texte sur tout le système d'exploitation. l'internationalisation à l'esprit.
La disposition automatique, introduite dans iOS 6, vous permet de créer de telles dispositions souples. C'est une excellente alternative à la redimensionnement automatique des masques ou à la configuration manuelle de l'interface utilisateur de l'application..
La disposition automatique vous permet d’ajouter des contraintes aux vues et de définir les relations entre les vues. La relation peut être entre une vue et son aperçu, un de ses frères et soeurs, ou même par rapport à elle-même.
Au lieu de spécifier explicitement le cadre d'une vue, la disposition automatique vous permet de définir l'espacement et le positionnement relatif de deux vues à l'aide de contraintes. La disposition automatique utilise ces contraintes pour calculer les positions d'exécution des éléments de l'interface utilisateur..
Vous devez définir suffisamment de contraintes sur la vue pour éviter toute ambiguïté sur la présentation. Il est également possible de définir trop de contraintes, ce qui peut provoquer des conflits et faire planter l'application..
Dans Xcode 4, lorsque vous définissez des contraintes incomplètes ou non valides sur une vue, Interface Builder les remplace par de nouvelles contraintes qui, pour la plupart, ne vous donnent pas l'effet recherché. Cela a conduit à une frustration significative avec les développeurs. Dans Xcode 5, cependant, il est beaucoup plus facile d'utiliser la disposition automatique. Xcode n'impose plus de contraintes sur une vue, mais des astuces et des avertissements vous sont donnés lorsque les contraintes d'une vue ne sont pas valides..
Bien qu'il soit possible de travailler avec la présentation automatique par programme, ce didacticiel examinera comment utiliser Interface Builder pour créer des présentations à l'aide de la présentation automatique..
Pour une démonstration simple de ce que Auto Layout peut faire pour vous, nous allons créer une application simple et définir des contraintes sur ses vues. Créez un nouveau projet Xcode, choisissez le Application à vue unique modèle et set Dispositifs à iPhone.
La mise en page automatique est activée par défaut pour les storyboards et les fichiers XIB créés avec Xcode 4.5 ou version ultérieure. Vous pouvez le désactiver dans le Inspecteur de fichier à droite en décochant la case à cocher intitulée Utiliser la mise en page automatique.
Une bonne raison de désactiver la mise en page automatique est la prise en charge d'iOS 5 ou moins. La mise en page automatique est uniquement prise en charge par iOS 6 et les versions ultérieures. Mais à part cela, Apple recommande d’utiliser Auto Layout pour faciliter et accélérer la création d’interfaces utilisateur flexibles..
Ouvrez le scénario principal du projet, Tableau principal, ajouter une vue texte à la Voir la scène du contrôleur, et le positionner comme indiqué ci-dessous.
Aucune contrainte n'a été définie sur la vue texte, ce qui a des conséquences. Lorsque vous exécutez l'application, la vue de texte est positionnée comme dans Interface Builder. Toutefois, lorsque vous faites pivoter le périphérique en mode paysage, la vue du texte continue de coller au bord gauche de la vue et sa largeur est fixe..
Au moment de la construction, les contraintes sont générées automatiquement pour les vues dépourvues de contraintes, ce qui explique le comportement observé. Les contraintes ajoutées à la vue texte, par exemple, sont une contrainte gauche et supérieure qui épingle la vue texte en haut à gauche, et une contrainte de largeur et de hauteur qui fixe la taille de la vue texte..
Une fois que vous avez commencé à définir les contraintes, vous devez vous assurer que les contraintes pour une vue ne causent pas de conflits. Dans la section suivante, nous ajoutons quelques contraintes à la vue texte pour ajuster sa position et sa taille lors de la rotation du périphérique ou de l'exécution de l'application, par exemple sur un iPhone 5 doté d'un écran plus grand..
Il existe plusieurs façons d'ajouter des contraintes de présentation à une vue..
Maintenez la Contrôle clé et faites glisser depuis la vue à laquelle vous souhaitez ajouter la contrainte de disposition vers une autre vue. Lorsque vous relâchez la souris, un menu avec des options devrait apparaître. Les options dépendent de la direction et le voyez-vous traîné.
Pour illustrer cela, faites glisser de la vue texte vers le haut de la vue du contrôleur de vue. Xcode mettra en surbrillance les deux vues pour indiquer que la contrainte de mise en page inclut les deux vues. Lorsque vous relâchez la souris, le menu affiche les contraintes de présentation pouvant être ajoutées à la vue source, la vue texte. Pour centrer la vue de texte horizontalement dans la vue du contrôleur de vue, sélectionnez Centrer horizontalement dans le conteneur du menu. Une ligne orange apparaît à la suite, indiquant la contrainte de présentation que vous venez d'ajouter..
Vous pouvez également ajouter et modifier des contraintes de présentation à l'aide du menu Mise en page automatique situé en bas de l'espace de travail Interface Builder..
À partir de la gauche, le menu vous permet de aligner et épingle vues, résoudre les problèmes de mise en page automatique, et le la comportement de redimensionnement pour la vue sélectionnée. Laissez-moi vous expliquer ce que chaque option de menu fait.
Chacune des options de menu susmentionnées se trouve également dans Xcode. Éditeur menu.
Pour ajouter des contraintes de présentation à la vue de texte, sélectionnez la vue dans Xcode, maintenez la touche enfoncée. Contrôle clé et faites glisser de la vue texte vers le haut de la vue du contrôleur de vue. Sélectionner Centrer horizontalement dans le conteneur dans le menu qui apparaît. Cela ajoute une contrainte de présentation qui garantit que la vue texte est toujours centrée dans la vue du contrôleur de vue, quelle que soit l'orientation du périphérique..
Vous avez peut-être remarqué que la vue texte a un contour orange. Xcode nous indique que les contraintes de présentation de la vue texte sont invalides ou incomplètes. Nous avons spécifié que la vue texte devrait être centrée horizontalement dans la vue parent, mais le système de disposition automatique ne sait pas quelle taille la vue texte devrait avoir. Ajoutons encore quelques contraintes jusqu'à ce que le contour de la vue texte devienne bleu pour indiquer que les contraintes de présentation de la vue texte sont valides..
Notez qu'il est possible d'ignorer les avertissements et d'exécuter une application avec des contraintes de présentation incomplètes. Cependant, vous ne devriez jamais livrer une application avec des contraintes de présentation ambiguës, car vous ne savez pas avec certitude à quoi ressemblera l'interface utilisateur de l'application sur différents appareils, dans différentes orientations..
La vue texte étant sélectionnée, maintenez la touche Ctrl enfoncée et faites glisser la souris vers le haut de la vue du contrôleur de vue, puis sélectionnez Guide de mise en page Top to Top Layout. Cela définit un contrainte d'espace vertical du guide de présentation supérieur du contrôleur de vue au sommet de la vue de texte.
Ensuite, faites glisser la vue texte de la vue vers la vue du contrôleur de vue, puis sélectionnez Espace de premier plan au conteneur pour définir la distance entre la vue parent et la gauche de la vue texte. Contrôle-glissez de la vue texte à la vue du contrôleur de vue et sélectionnez Guide de disposition du bas vers le bas définir une contrainte d'espace vertical du guide de présentation du bas du contrôleur de vue au bas de la vue de texte.
Le contour de la vue texte doit être bleu, indiquant que les contraintes de disposition de la vue texte sont valides et complètes. Exécutez l'application dans le simulateur iOS et modifiez son orientation pour examiner le résultat..
Notez qu'il n'était pas nécessaire d'ajouter une contrainte d'espace horizontal pour spécifier la distance entre le bord droit de la vue texte et son aperçu, car nous avions spécifié l'espace de tête de la vue texte et centré la vue du texte horizontalement dans son aperçu. Le système de mise en page automatique dispose de suffisamment d'informations pour disposer correctement la vue de texte. Nous pouvons obtenir le même résultat en spécifiant quatre contraintes d’espace et en omettant la contrainte d’alignement..
Cet exemple vous a montré comment définir des contraintes de présentation entre une vue et sa vue parent. Regardons un autre exemple dans lequel nous fixons des contraintes de mise en page entre des éléments frères.
Commencez par supprimer la vue texte. Cela supprimera également les contraintes de présentation de la vue de texte. Ajoutez un champ de texte, un curseur et un contrôle segmenté à la vue du contrôleur de la vue, comme illustré ci-dessous..
Lorsque vous exécutez l'application sans définir de contrainte, les trois éléments restent sur le bord gauche de leur vue parente en mode paysage..
Cependant, nous voulons que les éléments occupent toute la largeur de l'écran, comme indiqué ci-dessous. Le champ de texte doit s'étendre horizontalement et le curseur doit également s'agrandir pour tirer parti de la largeur de l'écran. Le contrôle segmenté doit cependant avoir une largeur fixe.
Sélectionnez le champ de texte et cliquez sur le bouton Épingle bouton du menu Disposition automatique en bas. Dans la section Espacement jusqu'au plus proche voisin en haut du menu, cliquez sur les lignes supérieure, droite et gauche entourant le carré. En conséquence, les lignes doivent devenir rouges. Ensuite, cliquez sur le bouton en bas intitulé Ajouter 3 contraintes ajouter les contraintes d'espace spécifiées.
Sélectionnez le curseur et répétez les mêmes étapes en définissant une contrainte d'espace en haut, à gauche et à droite. Cela garantit la distance entre le curseur et le champ de texte et le curseur et le contrôle segmenté est fixe.
Répétez les mêmes étapes pour le contrôle segmenté, mais ajoutez uniquement une contrainte d'espace supérieure et droite (fin). En outre, vérifiez la Largeur case à cocher et cliquez sur le Ajouter 3 contraintes bouton en bas. Nous ne souhaitons pas que le contrôle segmenté s'agrandisse lorsque la taille de l'écran change. C'est pourquoi nous lui donnons une largeur fixe..
Lorsque Xcode nous signale des erreurs ou des avertissements concernant des contraintes de présentation manquantes ou non valides, les contraintes à ajouter ou à mettre à jour ne sont pas toujours claires. Xcode nous aide en nous montrant quelles contraintes manquent dans le Sommaire du document.
Quand une mise en page est invalide ou incomplète, une flèche rouge est visible dans le Sommaire du document. Lorsque vous cliquez sur la flèche, une fenêtre à partir de la droite s'ouvre en indiquant les contraintes manquantes ou invalides. Cela vous donne un indice sur la façon de réparer la mise en page..
Un cercle rouge (erreur) ou un triangle jaune (avertissement) se trouve à droite de chaque erreur ou avertissement. Lorsque vous cliquez sur l'erreur ou l'avertissement, un menu apparaît avec des suggestions pour résoudre le problème..
Vous pouvez également utiliser le Résoudre les problèmes de mise en page automatique menu pour ajouter des contraintes manquantes, réinitialiser les contraintes d’une vue ou les effacer. Xcode ajoutera automatiquement des contraintes à la vue sélectionnée pour vous. Cela peut vous faire gagner du temps, mais notez qu'il est également possible que la disposition résultante ne corresponde pas à vos attentes..
Si vous avez ajouté des contraintes de présentation à une vue et que vous modifiez sa taille ou sa position, Xcode la met en surbrillance en orange pour indiquer que la position et / ou la taille actuelles ne correspondent pas à ses contraintes de présentation..
Si vous exécutez l'application, vous constaterez que le système de présentation automatique applique les contraintes de présentation de la vue et ignore la nouvelle taille et position que vous avez définies pour la vue. Ceci est un soi-disant vue égarée. La capture d'écran ci-dessous montre un bouton que j'ai déplacé après avoir spécifié ses contraintes de présentation.
Pour résoudre ce problème, vous pouvez supprimer les contraintes de présentation et en définir de nouvelles, ou vous pouvez laisser Xcode le corriger à votre place. Vous avez deux options pour réparer une vue égarée..
Dans l'exemple ci-dessus, nous sélectionnons Mettre à jour les contraintes mettre à jour les contraintes de présentation en fonction de la nouvelle taille et de la nouvelle position du bouton, car nous souhaitons conserver la nouvelle taille et la nouvelle position du bouton.
Le système de mise en page automatique simplifie et accélère la mise en page des interfaces utilisateur. Avant l'introduction de la mise en page automatique, les développeurs devaient coder en dur l'interface utilisateur d'une application en définissant le cadre d'une vue et son masque de redimensionnement automatique. Avec la mise en page automatique, ce n'est plus nécessaire.
En définissant correctement les contraintes de présentation d'une vue, sa position est automatiquement mise à jour, quelle que soit la taille ou l'orientation de l'écran. La localisation automatique des applications est un autre domaine dans lequel la disposition automatique est utile. Les mots et les phrases ont une longueur différente selon les langues. Cela aussi peut être résolu avec Auto Layout.
Accentsconagua