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

Question

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

Par sélection de width la case à cocher, il affiche varying 14 compact width devices .

Par sélection de height la case à cocher, il affiche varying 18 compact height devices .

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

Comment utiliser ces options ? Peut-on utiliser AutoLayout avec des classes de taille comme dans Xcode7.0 ? Si quelqu'un a des connaissances approfondies, merci de les expliquer.

Answer 1

Il s'agit simplement d'une extension de la manière d'utiliser rapidement "Vary Traits" dans votre projet pour ajouter différentes mises en page pour l'iPad et l'iPhone.

Veuillez lire ceci pour mieux comprendre les classes de taille.

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

Si vous sautez l'exemple qui suit, lisez le résumé à la fin.

---

• OBJECTIF :

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

• MÉTHODE 1 :

Varie pour les traits avec contraintes multiples tels qu'installés.

• ÉTAPES :

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

2. Choisissez VaryForTraits et pour les écrans d'iPhone, selon les directives de la classe de taille, une classe de taille C*R correspond au modèle et nous vérifions les tickmarks de Width & Height dans PopUp. Fermez la fenêtre pop-up 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é les contraintes, cliquez sur le bouton Terminé - Variable.

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

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

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

CONCLUSION :

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

---

• MÉTHODE 2 :

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

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

2. Ajoutez la variation du trait, et pour l'iPhone nous choisissons C*R et fixons la valeur constante à 100.

3. De nouveau 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 de 300.

4. Sélectionnez un iPad et la largeur sera automatiquement prise en compte comme 300 et en revenant à l'iPhone il 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 fixant des valeurs aux classes de taille.

Mais, #Méthode1 est utilisé lorsque vous souhaitez ajouter une contrainte spécifique à un appareil ou à une classe de taille. Par exemple, sur l'iPhone, le bouton doit être dans les 50 premiers points et sur l'iPad, il doit être centré horizontalement et verticalement. Dans de telles situations, vous devez utiliser VaryForTraits car il permet d'ajouter des contraintes pour une classe de taille spécifique.

#Méthode2 est utilisé lorsque vous voulez des valeurs constantes différentes pour un même type de contrainte.

P.S. : À TOUS CEUX QUI NE PARVIENNENT PAS À FAIRE FONCTIONNER L'EXEMPLE

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

Il suffit d'ajouter une contrainte supérieure et une conduite à un uiButton dans une vue. Sélectionnez la contrainte supérieure et décochez l'option de base Installé 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 à iPad avec différentes combinaisons d'orientation. Cette contrainte ne sera appliquée que pour C La classe de taille R qui est l'iPhone en orientation portrait. Si la case à cocher contre l'installation de base (celle 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 des traits est une modification de la présentation de votre interface utilisateur qui est basée sur la configuration d'un dispositif. Les variations de l'interface utilisateur ne se limitent pas aux contraintes mais peuvent s'appliquer à bien d'autres choses. Par exemple, le changement de la couleur de l'arrière-plan et d'autres éléments lorsque l'appareil est réglé sur un style sombre. Une variation peut s'appliquer à un élément de l'interface utilisateur, comme la suppression d'une contrainte, ou à une propriété d'une classe de vue ou d'une contrainte, comme 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

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

• Marges de mise en page

• Fichier 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éduites.

Answer 2

Vary for traits est l'évolution de l'option des classes de taille qui était présente dans la version précédente de Xcode. Elle permet une variation beaucoup plus astucieuse et précise basée sur les traits. Bien sûr, elle n'est pas limitée aux seules variations pour iPad/iPhone mais vous pouvez également spécifier des variations basées sur l'orientation et les différents appareils.

Les autres réponses dans ce fil ont quelques manques et imprécisions, peut-être que la façon la plus efficace de donner une réponse est de faire un exemple. Pour des raisons de clarté, nous limiterons notre exemple à un bouton et à deux mises en page. Cependant, comme expliqué ci-dessous, vous pouvez étendre l'exemple suivant comme vous le souhaitez. 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 l'option "vary for traits" n'est pas activée, le bouton sera présent dans toutes les mises en page. Si, au contraire, nous avions activé l'option "vary for traits", le bouton ne serait référencé que pour le trait particulier sélectionné.

Maintenant, activons "vary for trait" et choisissons une variation basée sur la taille. Vous devriez voir que l'écran inférieur devient bleu et que, selon la sélection, vous verrez tous les dispositifs touchés. Jusqu'ici, tout va bien.

Sélectionnez à nouveau le bouton et ajoutez les contraintes comme d'habitude. Dans notre exemple, nous ajouterons les espaces en haut et à gauche, ainsi que la largeur et la hauteur. Après cela, cliquez sur le bouton "Done Varying". Vous verrez que la partie inférieure de l'écran redeviendra grise. Ce qui se passe, c'est que nous avons demandé à 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 manque les contraintes que vous avez ajoutées seulement 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 "done" en variant. Le bouton est maintenant bien identifié sur l'écran, que ce soit en mode paysage ou portrait.

Construire et exécuter. 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 variante pour les traits et déposer 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 en fonction des traits.

Answer 3

Ce n'est rien d'autre que size classes elle même mais avec une représentation différente. jusqu'à xcode 7 nous avons utilisé des classes de taille et nous considérons height-width sur regular,compact and any de la manière suivante vary for traits le concept est le même mais xcode explique spécifiquement exact device . Dans l'ancienne version, nous savons que for every iphone in portraint etc le genre d'information où nous pouvons connaître l'appareil exact !

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

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

Référence : This So Post