Qu'est-ce que «Vary for Traits» dans Xcode 8?

J'utilise les classes AutoLayout et Size, mais avec la sortie d'iOS 10 et du nouveau Xcode 8.0, il y a une nouvelle option Vary for Traits. S'agit-il de remplacement de Size Classe pour différentes largeurs et hauteurs d'appareils.

En sélectionnant la widthcase à cocher, il s'affiche varying 14 compact width devices.

En sélectionnant la heightcase à cocher, il s'affiche varying 18 compact height devices.

En sélectionnant les deux cases à cocher, il s'affiche varying 11 compact width regular height devices.

Comment utiliser ces options? Pouvons-nous utiliser AutoLayout avec des classes de taille comme Xcode7.0? Si quelqu'un a des connaissances approfondies, veuillez l'expliquer.

Ceci est juste une extension sur la façon d'utiliser rapidement "Vary Traits" dans votre projet pour ajouter différentes mises en page pour iPad et iPhones.

Veuillez lire ceci pour en savoir plus sur les classes de taille.

https://developer.apple.com/reference/uikit/uitraitcollection

Si vous ignorez l'exemple ci-dessous, lisez le résumé à la fin.

• OBJECTIF :

Vous avez besoin d'un bouton de différentes largeurs sur iPhone et iPad. Le premier a une largeur de 80 et le dernier une largeur de 300.

• MÉTHODE 1:

Variez pour les traits avec plusieurs contraintes comme installé.

• PAS :

  1. Ajoutez d'abord les contraintes courantes comme Centrer le bouton horizontalement et verticalement.

2. Choisissez VaryForTraits et pour les écrans iPhone selon les directives de classe de taille, une classe de taille C * R correspond au modèle et nous vérifions les coches de Largeur et Hauteur dans PopUp. Fermez la fenêtre contextuelle en cliquant n'importe où sur l'écran.

3. Ajoutez la constante de largeur et vérifiez si la contrainte est ajoutée pour la classe de taille C * R. Après avoir ajouté des contraintes, choisissez le bouton Done Varying.

4. Pour les écrans iPad, sélectionnez à nouveau n'importe quel appareil iPad et choisissez VaryForTraits et cette fois en cliquant sur hauteur-largeur, il devrait afficher une variation R * R.

5. Ajoutez à nouveau une contrainte de largeur, la dernière contrainte de largeur d'iPhone ajoutée doit être désactivée comme dans la capture d'écran. La valeur ajoutée sera cette fois pour la classe de taille R * R.

6. Revenez à la disposition de l'iPhone et cela prend 80 comme largeur et l'iPad en prendra 300.

CONCLUSION :

Veuillez noter qu'il y a un total de deux contraintes ajoutées et dans les deux contraintes, les valeurs diffèrent selon la classe de taille choisie.

• MÉTHODE 2:

Varier pour les traits avec une seule contrainte, plusieurs classes de taille installées

• PAS :
  1. Ajoutez la contrainte de largeur normale. Sélectionnez ensuite cette contrainte et choisissez le bouton + à côté de la valeur Constante.

2. Ajoutez une variation de trait, et pour iPhone, nous choisissons C * R et définissons la valeur constante sur 100.

3. Encore une fois pour l'iPad qui suit une variation de trait comme R * R, nous ajoutons une autre variation en cliquant à nouveau sur le bouton + et définissons la valeur sur 300.

4. Sélectionnez un iPad et la largeur sera automatiquement prise comme 300 et revenant à l'iPhone, elle prend 100 comme valeur.

CONCLUSION :

Cela semble être une meilleure option plutôt que d'ajouter deux contraintes lorsqu'une seule contrainte est requise et que la valeur de la constante diffère.

QUAND UTILISER, QUOI UTILISER:

Les deux approches font fondamentalement la même chose, en définissant des valeurs sur Classes de taille.

Mais, # Method1 est utilisé lorsque vous souhaitez ajouter une contrainte spécifiquement pour un périphérique ou dire classe de taille. Par exemple, sur iPhone, le bouton doit être parmi les 50 premiers pts et sur iPad, il doit être centré horizontalement et verticalement. Dans de telles situations, vous devez utiliser VaryForTraits car il ouvre des portes pour ajouter des contraintes pour une classe de taille spécifique.

# La méthode 2 est utilisée lorsque vous souhaitez des valeurs constantes différentes pour un même type de contrainte.

PS: À TOUS CEUX QUI NE PEUVENT PAS FAIRE FONCTIONNER L'EXEMPLE

Veuillez vous assurer que vous n'ajoutez que les contraintes requises comme installées. La case à cocher Installé ne doit apparaître que pour la contrainte dont vous avez besoin pour une classe de taille. C'est la clé!

Ajoutez simplement une contrainte supérieure et un menant à un uiButton dans une vue. Sélectionnez la contrainte supérieure et décochez l'option Installé de base avec le signe Plus. Maintenant, en cliquant sur le signe Plus, ajoutez une variation à C R et cochez cette option. Maintenant, changez l'appareil d'iPhone en iPad avec diverses combinaisons d'orientation. Cette contrainte ne sera appliquée que pour la classe de taille C R qui est l'iPhone en orientation portrait. Si la case à cocher par rapport à Installé de base (celui avec le symbole Plus) a été cochée, cela signifie que la contrainte doit être appliquée à toutes les classes de taille.

SOMMAIRE :

La variation de trait est une modification de la présentation de votre interface utilisateur basée sur une configuration de périphérique. Les variations de caractéristiques de l'interface utilisateur ne se limitent pas aux contraintes, mais peuvent s'appliquer à bien plus encore. Par exemple, changer la couleur de l'arrière-plan et d'autres éléments lorsque l'appareil est réglé sur un style sombre. Une variante peut s'appliquer à un élément de l'interface utilisateur, tel que la suppression d'une contrainte, ou à une propriété d'une classe de vue ou d'une contrainte, telle que la police d'une étiquette. Vous pouvez varier:

• Taille ou position d'une vue

• Installation d'une vue

• Installation d'une contrainte

• Constante de contrainte

• Police de caractère

• Couleur de la police, de la teinte ou de l'arrière-plan

• Marges de mise en page

• Fichier d'image

L'ensemble spécifique de propriétés que vous pouvez faire varier dépend de la classe de l'élément. Dans l'exemple, nous avons démontré l'utilisation de - Installation d'une contrainte & - Constante de contrainte. D'autres sont assez simples et peuvent être facilement déduits.

Varier pour les traits est l'option d'évolution des classes de taille qui était présente dans la version précédente de Xcode. Il permet une variation beaucoup plus astucieuse et précise basée sur les traits. Bien sûr, cela ne se limite pas aux variantes iPad / iPhone, mais vous pouvez également spécifier des variations en fonction de l'orientation et des différents appareils.

D'autres réponses dans ce fil comportent des lacunes et des inexactitudes, le moyen le plus efficace de donner une réponse est peut-être de faire un exemple. Par souci de clarté, nous limiterons notre exemple à un seul bouton et à deux dispositions. Cependant, comme expliqué ci-dessous, vous pouvez étendre l'exemple suivant à votre guise. Notre objectif est d'ajuster la position d'un bouton entre deux mises en page différentes: paysage et portrait sur tous les appareils.

Remarque: Si l'option «Varier pour les traits» n'est pas activée, tous les ajustements de la mise en page et de l'interface utilisateur se rapportent à tous les traits (c'est-à-dire à toutes les classes de taille).

Commençons par mettre un bouton sur notre storyboard. Puisque «varier pour les traits» n'est pas activé, le bouton sera présent dans toutes les dispositions différentes. Si, à la place, nous avions activé la variation pour les traits, le bouton ne ferait référence qu'au trait particulier sélectionné.

Maintenant, activons «Varier pour le trait» et choisissez une variation basée sur la hauteur. Vous devriez voir que l'écran du bas deviendra bleu et selon la sélection, vous verrez tous les appareils impactés. Jusqu'ici tout va bien.

Sélectionnez à nouveau le bouton et ajoutez les contraintes habituelles. Dans notre exemple, nous ajouterons un espace de début en haut et à gauche ainsi que la largeur et la hauteur. Après cela, cliquez sur «Done Varying». Vous verrez que la partie inférieure de l'écran redeviendra grise. Ce qui se passe, c'est que nous avons dit à Interface Builder d'ajouter les contraintes ci-dessus uniquement pour les classes (w: C h: R).

Sélectionnez maintenant le mode paysage en bas de l'écran. Vous verrez que le bouton est en rouge, car il ne dispose pas des contraintes que vous avez ajoutées uniquement pour certains traits. Sélectionnez à nouveau Varier pour les traits et sélectionnez à nouveau la variation de hauteur. Ajoutez les contraintes suivantes:

et appuyez sur fait en variant. Désormais, le bouton est bien identifié à l'écran tant pour le paysage que pour le portrait.

Construisez et exécutez. Vous verrez que le bouton changera en fonction de l'orientation de l'écran.

Vous pouvez créer des mises en page plus avancées en suivant ce modèle. Par exemple, vous pouvez sélectionner au début une variation pour les traits et supprimer des objets UIKit uniquement pour un trait spécifique. Cet objet sera présent uniquement dans la variante spécifiée et sera grisé sur les autres, ce qui vous permettra de créer des interfaces utilisateur complètement différentes basées sur des traits.

Ce n'est rien d'autre que size classeslui-même mais avec une représentation différente. jusqu'à ce que xcode 7nous utilisions des classes de taille et que nous considérions height-widthde regular,compact and anymanière, le vary for traitsconcept est le même mais xcode explique spécifiquement exact device. Dans la version plus ancienne, nous connaissons ce for every iphone in portraintgenre d'informations, etc. où nous pouvons connaître l'appareil exact!

Vérifiez les captures d'écran ci-dessous,

Vous devriez vous référer à wwdc2016 - vidéo pour plus d'informations!

Référence: This So Post