Share
Apple pousse les développeurs à créer des applications iOS universelles depuis un certain temps déjà. Lors de la WWDC 12, Auto Layout a été publié pour iOS et des améliorations ont été apportées à iOS 7. Et maintenant, avec iOS 8, la conception adaptative a été introduite. Elle comprend plusieurs nouvelles API et les améliorations apportées à Interface Builder pour promouvoir le développement de binaires universels..
Dans ce tutoriel, nous verrons ce que signifie exactement conception adaptative et comment utiliser certains de ses concepts. À la fin du didacticiel, vous pourrez utiliser la conception adaptative pour créer des applications universelles à l'aide d'un flux de travail intuitif. Nous allons utiliser les nouvelles classes de taille pour créer une application fictive pour un magasin d'informatique qui fonctionne sur tous les appareils..
La conception adaptative englobe plusieurs nouvelles idées et techniques au lieu d’être une API unique et singulière. Certains composants de la conception adaptative incluent les collections de traits, les classes de taille, les polices adaptatives, la mise en page automatique, etc. À la base, la conception adaptative existe pour aider les développeurs à créer facilement des applications universelles et localisées.
Si vous développez des applications iOS depuis un certain nombre d'années, vous avez probablement compris directement pourquoi la conception adaptative peut être utile. Les masques de redimensionnement automatique se désagrègent rapidement, ce qui peut s'avérer fastidieux de garder une trace des orientations et le développement de différents chemins de code basés sur le type de périphérique n'est pas évolutif. La conception adaptative vise à résoudre tous ces problèmes.
Maintenant que nous avons identifié ce qu'est la conception adaptative et pourquoi nous devrions l'utiliser, téléchargez l'exemple de projet pour commencer..
Les classes de taille sont la caractéristique principale du design adaptatif. Leur utilisation vous permet d’éliminer le code et la logique prenant en charge plusieurs tailles d’écran, orientations ou périphériques spécifiques. Il est également facile d’avoir juste un interface pour tous les appareils disponibles.
Il y a deux types de classes de taille, compact et ordinaire. Chaque classe de taille peut être représentée horizontalement et verticalement, et chaque appareil se voit attribuer une classe de taille pour les deux orientations. Une taille normale représente une "grande" quantité d'écran à l'écran, comme sur un iPad. Sont également inclus les paradigmes d’interface qui donnent l’illusion d’espace supplémentaire, tels que les vues de défilement sur un iPhone.
D'autre part, une taille d'écran "compacte" indique une plus petite quantité d'espace disponible. Les iPhones ou iPod Touch entrent généralement dans cette catégorie. Ce n'est certainement pas une règle, cependant. Par exemple, l'iPhone 6 Plus prend en charge la classe de taille normale horizontalement. Le tableau suivant répertorie les périphériques iOS et leur classe de taille respective:
| Verticalement | Horizontalement | |
| Portrait iPhone | Ordinaire | Compact |
| Paysage iPhone | Compact | Compact |
| iPhone 6 Plus Paysage | Compact | Ordinaire |
| Portrait iPad | Ordinaire | Ordinaire |
| Paysage iPad | Ordinaire | Ordinaire |
S'ouvrir Tableau principal à l'intérieur du projet. Vous remarquerez que la toile a la forme d’un rectangle. Tout en bouleversant au début, cela représente en fait un composant essentiel de la conception adaptative. En regardant vers le bas du constructeur d'interface, vous remarquerez un bouton indiquant tout le monde.
Cela signifie N'importe quelle largeur, n'importe quelle hauteur, ce qui indique que les modifications apportées à l'interface utilisateur s'appliquent ici à toutes les classes de taille. Si vous cliquez sur le bouton, une grille apparaît vous permettant de basculer entre différentes classes de taille:
Dans l'exemple ci-dessus, Largeur compacte | Hauteur compacte est sélectionné et il y a un point vert dans la grille bleue. Le point vert indique les classes de taille représentées. Dans ce cas, les modifications s'appliquent uniquement aux iPhones 3,5, 4 et 4,7 pouces en mode paysage..
Notez que la formulation est légèrement différente, car Interface Builder utilise les termes largeur et la taille alors que les classes de taille utilisent les termes horizontal et verticale. La largeur correspond à l'horizontale et la hauteur à la verticale.
Si vous avez modifié la classe de taille actuellement sélectionnée, assurez-vous de revenir à N'importe quelle largeur | Toute hauteur.
Faites glisser une vue d'image sur le canevas du contrôleur de vue depuis le Bibliothèque d'objets. En utilisant le Inspecteur de taille, mettre sa X position à 0 points et ses Y position à 72 points. Met le largeur à 600 points et le la taille à 218 points. Ouvrez le Àhommage inspecteur et changer la vue mode à ajustement d'aspect et image à "Portable". Votre toile doit ressembler à l'image ci-dessous:
Ouvrez le Bibliothèque d'objets une fois de plus et faites glisser unétiquette sur la toile. Ouvrez le Inspecteur de taille et mettre l'étiquette X position à 16 points et ses Y position à 312 points. Pour la taille, définissez ses largeur à 568 points et ses la taille à 242 points.
dans le Inspecteur d'attributs, Apportez les modifications suivantes:
Nous allons maintenant ajouter des contraintes pour l’étiquette et la vue de l’image. Au bas de Interface Builder, cliquez sur Réinitialiser aux contraintes suggérées sous le Toutes les vues dans le contrôleur de vue section. Si l'option est grisée, assurez-vous qu'une des vues du canevas est sélectionnée..
Étant donné que la vue d'image a le même arrière-plan blanc que la vue qui la contient, nous allons changer la couleur d'arrière-plan de la vue pour faciliter la distinction entre les deux. Sélectionner Vue du plan du document et changer sa Couleur de fond à Couleur de fond de la table de groupe.
En haut de Xcode, sélectionnez iPad Retina utiliser pour le simulateur iOS. Construisez et exécutez l'application en appuyant sur Commande + R. L'application semble bien paraître pour l'iPad, mais nous voulons nous assurer qu'elle s'affiche correctement sur chaque appareil..
Construire et exécuter votre application simplement pour voir comment votre interface utilisateur se comporte peut être une tâche fastidieuse. Heureusement, Xcode 6 offre désormais la possibilité d’obtenir un rendu en direct de votre interface utilisateur sur n’importe quel appareil, quelle que soit son orientation. Cela nous aide à résoudre les problèmes de mise en page automatique beaucoup plus rapidement que l'exécution de l'application dans le simulateur iOS à chaque fois..
En haut de Xcode, cliquez sur le bouton Assistant rédacteur bouton.
Cela divise l'éditeur de Xcode en deux volets. Dans le volet de droite, sélectionnez Automatique> Aperçu> Main.storyboard dans la barre de saut.
Interface Builder affiche désormais un aperçu en direct de l'interface utilisateur sur un iPhone 4 pouces. Comme prévu, l'interface utilisateur est loin d'être idéale sur l'iPhone. Si vous ne voyez rien dans l'aperçu, cliquez sur le contrôleur de vue dans le volet de gauche pour l'actualiser..
Dans le volet de droite, cliquez sur le bouton + Le bouton en bas vous permet d'ajouter plus de périphériques à prévisualiser. Allez-y et ajoutez l'iPad pour prévisualiser aussi.
Survolez l'iPhone dans l'éditeur adjoint en bas. À gauche du nom du périphérique, un bouton permet de changer l'orientation actuelle. Cliquez dessus une fois pour faire basculer l'aperçu de l'iPhone en orientation paysage..
Avec l'orientation en paysage, l'interface utilisateur semble encore pire. La vue de l'image ne s'affiche pas du tout et le texte de l'étiquette est beaucoup trop grand.
Pour réparer l'interface utilisateur, nous allons ajouter des contraintes spécifiques à une classe de taille donnée. C'est un autre avantage de la conception adaptative. Nous pouvons dire à l’interface utilisateur comment elle doit disposer ses vues pour certaines classes de taille, en utilisant le même storyboard. Auparavant, il fallait généralement utiliser deux story-boards différents et charger le bon au moment de l'exécution..
Nous allons d’abord ajouter des contraintes qui devraient fonctionner pour la plupart des appareils et les affiner à partir de là. Commencez par supprimer les contraintes ajoutées précédemment en cliquant sur une vue du canevas et en sélectionnant Editeur> Résoudre les problèmes de mise en page automatique> Toutes les vues dans View Controller - Supprimer les contraintes.
Sélectionnez la vue de l'image, cliquez sur le bouton Aligner bouton, choisissez Centre horizontal dans le conteneur, et cliquez Ajouter 1 contrainte.
Ouvrez la contrainte que nous venons d’ajouter dans le Inspecteur de taille à droite et double-cliquez dessus pour le modifier.
La contrainte a le centre de la super vue égal au centre de la vue de l'image, mais nous voulons l'inverse. Cliquez sur Deuxième article et choisir Inverser les premier et deuxième éléments pour corriger le problème.
Ensuite, appuyez sur Contrôle et glisse de la vue de l'image à Vue dans le contour du document à gauche, puis sélectionnez Des hauteurs égales. Sélectionnez la contrainte dans le Inspecteur de taille et changer la contrainte multiplicateur à 0.4. Cela forcera la hauteur de la vue de l'image à être égale à la hauteur de la vue d'ensemble ou à au moins 40% de celle-ci, selon la valeur la plus courte..
Ensuite, cliquez sur le Épingle bouton et choisissez le Haut et bas espacement au plus proche voisin. Pour le bas espacement, entrez 18 points. L'espacement supérieur doit déjà être réglé sur 0 points. Assure-toi Limiter aux marges est décochée, car nous ne voulons pas que la vue soit complétée. Cliquez sur Ajouter 2 contraintes en bas pour ajouter les contraintes.
Double-cliquez sur le Espace inférieur contrainte dans le Inspecteur de taille pour le modifier. Changer la Relation à Meilleur que ou égal. Pour finir les contraintes de la vue de l'image, Contrôle et glisse de la vue de l'image à l'étiquette et choisissez Des hauteurs égales.
Les contraintes pour la vue d'image doivent ressembler à ceci:
En raison des contraintes ajoutées à la vue de l'image, l'étiquette a déjà ajouté sa hauteur et son espacement vertical par rapport à la vue de l'image. Sélectionnez l'étiquette et cliquez sur le Épingle bouton pour ajouter une contrainte d'espacement de début, de fin et vertical, comme indiqué dans l'image ci-dessous.
Si vous prévisualisez maintenant l'application dans l'éditeur assistant, les contraintes ont rendu les choses beaucoup mieux. Cependant, il y a toujours un problème lorsque l'application utilise la classe de taille horizontale compacte, comme vous pouvez le voir ci-dessous (milieu)..
Dans ce cas, il serait bien d’avoir la vue et l’étiquette de l’image côte à côte plutôt que les unes sur les autres.
En utilisant le classe de taille bouton bascule en bas, sélectionnez Largeur compacte | Hauteur compacte. La barre devient bleue pour indiquer que vous modifiez maintenant l'interface utilisateur pour une classe de taille spécifique..
Sélectionnez la vue de l'image, ouvrez le Inspecteur de taille, et mettre à jour son cadre comme indiqué dans l'image ci-dessous.
Ensuite, sélectionnez l’étiquette et mettez à jour son cadre dans Inspecteur de taille comme indiqué ci-dessous.
Avec l'étiquette toujours sélectionnée et le Inspecteur de taille ouvrez, sélectionnez les contraintes du label et supprimez-les en appuyant sur Effacer. Vous pouvez sélectionner plusieurs contraintes en maintenant la touche Décalage clé. Cela supprimera les contraintes que nous avons ajoutées jusqu'à présent, mais seulement pour cette classe de taille.
Faites de même pour la vue image en la sélectionnant, en ouvrant le Inspecteur de taille, en sélectionnant ses contraintes et en appuyant sur Effacer. Nous pouvons maintenant ajouter des contraintes pour que la vue de l'image et l'étiquette soient positionnées côte à côte.
Heureusement, Xcode peut facilement comprendre ces contraintes pour nous. Avec la vue d'image ou l'étiquette sélectionnée, choisissez Editeur> Résoudre les problèmes de mise en page automatique> Toutes les vues dans View Controller - Réinitialiser les contraintes suggérées.
Ouvrez le Inspecteur de taille pour la vue de l'image. Vous verrez qu'il existe plusieurs contraintes répertoriées, mais certaines sont grisées et d'autres non. Cela indique quelles contraintes sont actives pour la classe de taille actuelle.
Si vous double-cliquez sur l'une d'entre elles, la section inférieure nous indique les classes de taille pour lesquelles les contraintes sont actives. L'image ci-dessous montre que la contrainte est installée pour Largeur compacte | Hauteur compacte et désactivé pour Largeur régulière | Hauteur régulière. En cliquant sur le X ou + bouton active ou désactive la contrainte pour la classe de taille donnée.
Ouvrez le assistant rédacteur en chef à nouveau et ajoutez un iPhone 3,5 pouces en mode paysage s’il n’en existe pas déjà. Nous pouvons constater que nous avons obtenu une disposition totalement différente pour certains appareils orientés paysage, le tout dans un scénario.
La dernière chose à aborder est la taille de la police. Bien que les cadres de la vue et du libellé de l'image fonctionnent correctement, la police peut parfois être tronquée. La conception adaptative a ajouté de nouvelles options permettant aux développeurs de gérer ce type de scénario..
Sélectionnez l'étiquette et ouvrez le Inspecteur d'attributs sur la droite. Sous Autoshrink, sélectionner Échelle de police minimale et le mettre à 0.4.
La modification de l'échelle de la police sera suffisante dans la plupart des cas. Dans notre application, cependant, le contenu de l'étiquette est lisible pour le Largeur compacte | Hauteur compacte classe de taille, mais ce n'est pas idéal. Si vous ouvrez l'éditeur d'aperçu, vous remarquerez que le "p" dans le mot "ordinateur portable" se trouve sur sa propre ligne.
Avec l'étiquette sélectionnée, cliquez sur le bouton + bouton à côté de Police de caractère dans le Inspecteur d'attributs. Cela ouvre un menu pour sélectionner une classe de taille à laquelle appliquer une police particulière. Choisir Largeur compacte | Hauteur compacte.
Semblable aux contraintes spécifiques à la classe de taille, une police a été ajoutée pour la classe de taille sélectionnée. Changer la Police de caractère Taille à 50 points. Maintenant, ouvrez une nouvelle fois l'éditeur d'aperçu et vérifiez que la police est parfaite sur tous les appareils..
La possibilité d'ajouter des polices adaptatives est incroyablement puissante. La localisation des applications est simple lorsque vous êtes en mesure de contrôler plus précisément la taille de la police avec du texte dynamique.
Bien que les classes de taille soient certainement une fonctionnalité primordiale, il existe de nombreuses autres API de conception adaptative et avancées que je n'ai pas abordées dans ce didacticiel. Par exemple, les contrôleurs de vue sont désormais conformes à la UITraitEnvironment protocole. Cela signifie que les contrôleurs de vue ont une traitCollection propriété qui garde la trace de la classe de taille actuellement affichée.
Si vous aimez créer des interfaces utilisateur en code, le traitCollection Cette propriété vous offre les mêmes fonctionnalités que les classes de taille dans Interface Builder. Vous pouvez être averti lorsque la classe de taille change et effectuer les mises à jour nécessaires de vos contraintes ou de votre interface utilisateur..
Une autre API utile est la UIPopoverController. Si vous avez déjà développé une application universelle, je suis sûr que vous avez vu un code comme celui-ci:
UIViewController * contentVC = // content if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPad) UIPopoverController * popVC = [[UIPopoverController alloc]]. [popVC presentPopoverFromBarButtonItem: item allowedArrowDirections: UIPopoverArrowDirectionAny animé: YES]; else [auto presentViewController: contentVC animée: YES complétion: nil];
Depuis iOS 8, il n'est plus nécessaire de vérifier le périphérique sur lequel l'application est exécutée lors de l'utilisation du logiciel. UIPopoverController classe. le UIPopoverController classe prend désormais également en charge l'iPhone et l'iPod Touch.
En ce qui concerne les ressources d'image, notez qu'il existe maintenant un @ 3x Taille. Cela est dû à l’affichage Retina HD de l’iPhone 6 Plus. Si vous ouvrez le Images.xcassets fichier dans le projet, vous le verrez sous n’importe quel jeu d’images fourni.
La conception adaptative est probablement le changement le plus important du développement iOS depuis plusieurs années. Avant la conception adaptative, les applications universelles n'étaient pas faciles à développer et l'évolutivité de ces projets pouvait poser problème. J'espère que vous avez suffisamment appris de ce tutoriel pour éviter ces problèmes et incorporer la conception adaptative dans vos propres applications..
Accentsconagua