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


86

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.

entrez la description de l'image ici

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

entrez la description de l'image ici

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

entrez la description de l'image ici

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

entrez la description de l'image ici

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.


Jetez un œil aux vidéos de la session WWDC 2016. Je suis sûr que cela a été couvert quelque part en tant que "nouvelles fonctionnalités de Xcode".
Martin R

Réponses:


133

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

entrez la description de l'image ici

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.

entrez la description de l'image ici

  1. 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.

entrez la description de l'image ici entrez la description de l'image ici

  1. 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.

entrez la description de l'image ici entrez la description de l'image ici

  1. 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.

entrez la description de l'image ici entrez la description de l'image ici

  1. 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.

entrez la description de l'image ici entrez la description de l'image ici

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

entrez la description de l'image ici

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.

entrez la description de l'image ici

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

entrez la description de l'image ici entrez la description de l'image ici

  1. 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.

entrez la description de l'image ici entrez la description de l'image ici

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

entrez la description de l'image ici

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é!

entrez la description de l'image ici

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.


51
Cela ne fonctionne pas pour moi .. Cela met à jour les contraintes sur toutes les tailles d'écran et pratiquement rien ne se passe ...
Dan

5
Si cela ne fonctionne pas, essayez de lire ceci: help.apple.com/xcode/mac/8.0/#/devba3dd0b51 . Si vous souhaitez personnaliser la police ou une autre propriété, cliquez sur "+" qui se trouve à gauche de la propriété dans le volet des attributs. Et vous ne pouvez pas faire varier les traits de l'iPhone 4s et de l'iPhone 7 Plus, en fonction de la largeur, par exemple, car ils ont tous deux une largeur compacte. Vous pouvez les varier pour iPhone et iPad.
Denis Kutlubaev

2
A travaillé pour moi thnx :)
Sanman

1
Cela a fonctionné pour moi après avoir supprimé l'ancienne contrainte et ajouté une nouvelle, au lieu de remplacer sa valeur.
Teodor Ciuraru

2
Pour les gens qui disent que cela ne fonctionne pas. Je pense que vous essayez de changer toute la contrainte, vous ne pouvez que la valeur constante d'une contrainte, vous ne pouvez pas réellement modifier les propriétés multiples ou autres de la contrainte. J'étais également confus sur cette partie.
3366784

21

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).

Fig. 1

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é.

fig2

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.

fig3

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).

fig4

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:

fig5

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

fig6

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.


3
J'ai ajouté des contraintes pour la classe (wC, hR) puis j'ai cliqué sur faire varier. Quand j'ouvre (wR, hR) alors je vois aussi les anciennes contraintes. Comment créer de nouvelles contraintes pour (wR, hR) cette classe. S'il vous plaît dites-moi @valvolin
Ramcharan Reddy

9

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,

entrez la description de l'image ici

entrez la description de l'image ici

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

Référence: This So Post


Ok, laissez-moi vérifier la vidéo WWDC.
technerd

Vous avez raison, ce n'est rien d'autre que l'évolution des classes de taille
Durai Amuthan.H
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.