Qu'est-ce que "Vary for Traits" dans Xcode 8?
J'utilise les classes AutoLayout et Size, mais avec la version iOS 10 et le nouveau Xcode 8.0, il existe une nouvelle option Vary for Traits. Ce remplacement de Size Classe concerne-t-il différentes largeurs et hauteurs d'appareils?.
En sélectionnant la case à cocher width, il affiche varying 14 compact width devices.
En sélectionnant la case à cocher height, 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 Xcode7.0? Si quelqu'un a une connaissance approfondie, merci de l'expliquer.
Il s’agit simplement d’une extension de la manière d’utiliser rapidement "Varier les traits" dans votre projet pour ajouter différentes mises en page pour iPad et iPhone.
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 pour iPhone et iPad. Les premiers ont une largeur de 80 et les derniers une largeur de 300.
- MÉTHODE 1:
Varie pour les traits à contraintes multiples tels qu'ils sont installés.
ÉTAPES:
- Ajoutez d'abord les contraintes communes comme Centrez le bouton horizontalement et verticalement.
- Choisissez VaryForTraits et pour les écrans iPhone conformément aux consignes de classe de taille, une classe de taille C * R s’adapte au modèle, ce qui nous permet de cocher les cases Largeur et Hauteur dans PopUp. Supprimez la fenêtre contextuelle en cliquant n'importe où sur l'écran.
- 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, cliquez sur le bouton Terminé Variation.
- Pour les écrans iPad, sélectionnez à nouveau un périphérique iPad, choisissez VaryForTraits et cette fois-ci en cliquant sur hauteur-largeur, la variation R * R devrait s'afficher.
- Ajoutez à nouveau une contrainte de largeur, la dernière contrainte de largeur ajoutée pour l'iPhone ne doit pas être mise en évidence comme dans la capture d'écran. La valeur ajoutée sera pour la classe de taille R * R cette fois.
- Revenez à la disposition de l'iPhone et cela prend 80 comme largeur et iPad prendra 300.
CONCLUSION:
Veuillez noter qu'il y a un total de deux contraintes ajoutées et que dans les deux contraintes, les valeurs diffèrent selon la classe de taille choisie.
- MÉTHODE 2:
Varie pour les traits à contrainte simple, taille-classe multiple installés
- ÉTAPES:
- Ajoutez la contrainte de largeur normale. Sélectionnez ensuite cette contrainte et choisissez le bouton + en plus de la valeur constante.
- Ajoutez une variation de trait. Pour iPhone, nous choisissons C * R et définissons la valeur constante sur 100.
- Encore une fois pour iPad qui suit une variation de trait telle que R * R, nous ajoutons une autre variation en cliquant à nouveau sur le bouton + et définissons la valeur sur 300.
- Sélectionnez un iPad et la largeur sera automatiquement prise à 300 et pour revenir à l'iPhone, il faut 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 constante diffère.
QUAND UTILISER, QUOI UTILISER:
Les deux approches font essentiellement la même chose, en définissant des valeurs sur Size-classes.
Mais, # Method1 est utilisé lorsque vous souhaitez ajouter une contrainte spécifique à un périphérique ou à une classe de taille. Par exemple, sur iPhone, le bouton doit appartenir au Top 50, 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 à une classe de taille spécifique.
# Method2 est utilisé lorsque vous souhaitez des valeurs constantes différentes pour un même type de contrainte.
P.S: À TOUS CEUX QUI NE PEUVENT PAS OBTENIR L'EXEMPLE DE TRAVAIL
Assurez-vous que vous ajoutez uniquement les contraintes requises en tant qu'installé. 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é!
Ajoutez simplement une contrainte supérieure & a menant à un bouton ui 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 variante à C R et cochez cette option. Maintenant, changez l'appareil d'iPhone en iPad avec différentes combinaisons d'orientation. Cette contrainte ne sera appliquée qu'à la classe de taille C R, qui correspond à l'iPhone en orientation portrait. Si la case à cocher en regard de 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.
Résumé:
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 trait de l'interface utilisateur ne se limitent pas à des contraintes, mais peuvent s'appliquer plus. Tels que changer la couleur de l'arrière-plan et d'autres éléments lorsque l'appareil est défini sur un style sombre. Une variante peut s'appliquer à un élément de l'interface utilisateur, par exemple en supprimant une contrainte, ou à une propriété d'une classe de vue ou d'une contrainte, telle que la police d'un libellé. 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 pour la police, la teinte ou l'arrière-plan
Marges de mise en page
Fichier d'image
L'ensemble spécifique de propriétés que vous pouvez modifier 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. Cela permet une variation beaucoup plus nette et précise basée sur les traits. Bien sûr, cela ne se limite pas aux variations iPad/iPhone, mais vous pouvez également spécifier des variations en fonction de l'orientation et du périphérique.
D'autres réponses dans ce fil ont des manques et des inexactitudes, peut-être que le moyen le plus efficace de donner une réponse est de donner un exemple. Par souci de clarté, nous limiterons notre exemple à un bouton et à deux dispositions. Toutefois, comme expliqué ci-dessous, vous pouvez étendre l’exemple suivant à votre guise. Notre objectif est d’ajuster la position d’un bouton entre deux dispositions différentes: paysage et portrait sur tous les appareils.
Remarque: Si cette option n'est pas activée, l'option "varier pour les traits", tous les ajustements de présentation et d'interface utilisateur sont référés à tous les traits (c'est-à-dire toutes les classes de taille).
Commençons par placer un bouton sur notre storyboard. Puisque "varier pour les traits" n’est pas activé, le bouton sera présent dans toutes les différentes dispositions. Si, à la place, nous avions activé la variation pour les traits, le bouton serait référé uniquement au trait particulier sélectionné.
Activons maintenant "varier pour le trait" et choisissons une variation basée sur la hauteur. Vous devriez voir que l’écran inférieur devient bleu et, en fonction de la sélection, vous verrez tous les appareils concernés. Jusqu'ici tout va bien.
Sélectionnez à nouveau le bouton et ajoutez les contraintes habituelles. Dans notre exemple, nous allons ajouter les espaces de début et de gauche, ainsi que la largeur et la hauteur. Après cela, cliquez sur “Terminé Varying”. Vous verrez que la partie inférieure de l'écran redevient gris. En réalité, nous avons demandé à Interface Builder d’ajouter les contraintes ci-dessus uniquement aux classes (w: C h: R).
Sélectionnez maintenant le mode paysage au bas de l'écran. Vous verrez que le bouton est en rouge car il ne contient pas les 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 varier. Maintenant, le bouton est bien identifié à l’écran, tant pour le paysage que pour le 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 variation pour les traits et supprimer les 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.
Ce n’est rien que size classes lui-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 de regular,compact and any de manière, de vary for traits le concept est identique, mais xcode explique spécifiquement exact device. Dans les versions plus anciennes, nous savons que for every iphone in portraint etc type d'informations où nous pouvons connaître le périphérique exact!
Vérifiez les captures d'écran ci-dessous,
Vous devriez vous référer wwdc2016 - video pour plus d'informations!
Référence: This So Post