What is 'Vary for Traits' in Xcode 8?

Question

I am using AutoLayout and Size classes, but with release of iOS 10 and new Xcode 8.0, there is one new option Vary for Traits. Is this replacement of Size Classe for different width and height of devices.

By selection of width checkbox, it displays varying 14 compact width devices.

By selection of height checkbox, it displays varying 18 compact height devices.

By selection of both checkbox, it displays varying 11 compact width regular height devices.

How to make use of this options ? Can we use AutoLayout with size classes as like Xcode7.0 ? If any one has in depth knowledge then please explain it.

Maggi

Have a look at the WWDC 2016 session videos. I am sure that was covered somewhere as "new features of Xcode". – Pleuron

Answer 1

This is just an extension as to how to use "Vary Traits" quickly in your project for adding different layouts for iPad and iPhones.

Please read this for understanding more on the Size classes.

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

If you are skipping the example which follows below, do read the Summary in the end.

---

• OBJECTIVE :

You need a button having different widths in iPhone and iPad. The former having width of 80 and latter having a width of 300.

• METHOD 1 :

Vary for Traits with Multiple Constraints as installed.

• STEPS :

  1. Add the common constraints first like Center the button horizontally and vertically.

2. Choose VaryForTraits and for iPhone screens as per the size class guidelines , a C*R size class fits the model and this we check the tickmarks of Width & Height in PopUp. Dismiss the pop-up by clicking anywhere on screen.

3. Add the width constant and check whether the constraint is added for C*R size-class. After adding constraints, choose Done Varying button.

4. For iPad screens, again select any iPad device and choose VaryForTraits and this time on clicking height-width, it should show R*R variation.

5. Again add a width constraint, the last added iPhone width constraint must be unhighlighted as in the screenshot. The value added will be for the size-class R*R this time.

6. Switch back to iPhone layout and it takes 80 as width and iPad will take 300.

CONCLUSION :

Please notice that there are total of two constraints added and in both the constraints, the values differ according to the size-class chosen.

---

• METHOD 2 :

Vary for Traits with Single Constraint , Multiple Size-Class installed

• STEPS :
  1. Add the normal width constraint. Then select that constraint and choose the + button besides the Constant value.

2. Add trait variation, and for iPhone we choose C*R and set the constant value as 100.

3. Again for iPad which follows a trait variation as R*R, we add another variation by clicking again on + button and set the value as 300.

4. Select an iPad and the width will be automatically taken as 300 and coming back to iPhone it takes 100 as value.

CONCLUSION :

This seems to be a better option rather than adding two constraints when a single constraint is only required and the constant value differs.

WHEN TO USE, WHAT TO USE :

Both the approaches are basically doing the same thing, setting values to Size-classes.

But, #Method1 is used when you want to add a constraint specifically for a device or say size-class. For example, in iPhone the button should be from Top 50 pts and in iPad it should be centered horizontally and vertically. In such situations, you need to use VaryForTraits as it opens doors to add constraints for a specific size class.

#Method2 is used when you want different constant values for a same constraint type.

P.S : TO ALL THOSE WHO ARE NOT ABLE TO GET THE EXAMPLE WORKING

Please make sure, you are adding only the required constraints as Installed. The checkbox against Installed should only appear for the constraint that you need for a size class. That is the key!

Just add a top constraint & a leading to an uiButton in a view. Select the top constraint and uncheck the basic Installed option with Plus sign. Now, by clicking on the Plus sign, add variation to CR and check that option. Now, change the device from iPhone to iPad with various orientation combinations. This constraint will be applied only for CR size class which is iPhone in portrait orientation. If the checkbox against the basic Installed (the one with Plus symbol) was checked that means the constraint should be applied to all size classes.

SUMMARY :

Trait Variation is a change to the presentation of your user interface that is based on a device configuration. Trait Variations of the user interface is not just limited to constraints but can be applied to much more. Such as changing the color of the background and other elements when the device is set to a dark style. A variation can apply to an element of the user interface, such removing a constraint, or to a property of a view class or constraint, such as the font for a label. You can vary:

• Size or position of a view

• Installation of a view

• Installation of a constraint

• Constraint constant

• Font

• Color for the font, tint, or background

• Layout margins

• Image file

The specific set of properties you can vary depends on the class of the element. In the example, we have demonstrated the use of- Installation of a constraint & - Constraint constant . Others, are quite simple and can be easily inferred.

Silvertongued

This is not working for me.. It updates the constraints on all screen sizes and practically nothing happens... – Unquestioning

Followed this tutorial : youtube.com/watch?v=7iT9fueKCJM but doesn't work for me. I followed yours too ... – Uncleanly

If it doesn't work, try to read this: help.apple.com/xcode/mac/8.0/#/devba3dd0b51. If you want to customize font or other property, then click to "+" that is at the left to the property in attributes pane. And you cannot vary traits for iPhone 4s and iPhone 7 Plus, depending on width, for instance, since they are both compact width. You can vary them for iPhone and iPad. – Duet

Worked for me thnx :) – Newsreel

It did work for me after I deleted the old constraint and added a new one, instead of replacing it's value. – Uncle

For it to work, do not EDIT the constraint when in Vary-mode. Delete the constraint and replace it with a new one. Only then it will work. – Alimony

please check my updated answer and follow all the steps closely. I have used this in my projects and I am sure, it works correctly. – Silvertongued

@Jen Jose What if I want to setup different constraints for iPad portrait and iPad landscape? Both are R*R. What should I do? – Sverre

@ZhouHao : No, it's not possible directly using TraitVariation. A C*R will be applied for Portrait only during multitasking apps on iPad or with a splitviewcontroller. So, I guess the only resort is to change the constraints programmatically based on the orientation in iPad. – Silvertongued

For the people who say this is not working. I think you are trying to change all the constraint you can only the constant value in a constraint you can't actually change the multiple or other properties of the constraint. I was also confused on this part. – Oloughlin

Thanks @Oloughlin ! I have tried to give a brief answer but if you have any suggestion as to at which point you guys are going wrong, then I can edit my answer accordingly. – Silvertongued

Are there any possibilities to change leading constraint or width/height constraints for different iPads (12.9", 10.5" and 9.7" ) in the storyboard itself instead of code as all iPads fall under wR hR ? – Colony

@Vani, I suggest you give relative constraints for height/width of the view w.r.t to a superview, etc and set the position of the view also based on multiplier values. – Silvertongued

Answer 2

Vary for traits is the evolution of size classes option that was present in the past version of Xcode. It allows a much more nifty and precise variation based on traits. Of course, it is not limited to iPad/iPhone only variations but you can specify also variations based on orientation and different device.

Other answers in this thread have some lacks and inaccuracies, perhaps the most efficient way to give an answer is to make an example. For the sake of clarity we will limit our example to only a button and two layouts. However, as explained below, you can extend the following example as you wish. Our goal is to to adjust the position of a button between two different layouts: landscape and portrait on all devices.

Note: If not enabled “vary for traits” option, all layout and ui interface adjustments are referred to all traits (ie. all size classes).

Let’s start by putting a button on our storyboard. Since “vary for traits” is not enabled, the button will be present in all different layouts. If, instead, we had enabled vary for traits the button would be referred only to the particular trait selected.

Now, let’s enable “vary for trait” and choose a variation based on height. You should see that the bottom screen will turn in blue and according to the selection you will see all the device impacted. So far, so good.

Select again the button and add the constraints ad usual. In our example, we will add top and left leading space as well as width and height. After that, click on the “Done Varying”. You will see that the bottom part of the screen will turn gray again. What is happening is that we have told Interface Builder to add the above constraints only for the (w:C h:R) classes.

Now select the landscape mode on the bottom of the screen. You will see that the Button is in red, because it lacks the constraints that you have added only for some traits. Select again vary for traits and select again the height variation. Add the following constraints:

and press done varying. Now the button is well identified on the screen both for landscape and portrait.

Build and run. You will see that the button will change according to the orientation of the screen.

You can create more advanced layouts following this pattern. For example, you can select at the beginning a vary for traits and drop UIKit objects only for a specific trait. This object will be present only in the specified variant and will be greyed out on the others one allowing you to create completely different user interfaces based on traits.

Radiography

I have added constraints for (wC,hR) class then i clicked done varying. When i open (wR,hR) then also i'm seeing the old constraints. How to create new constraints for (wR,hR) this class. Please tell me @valvolin – Indention

Answer 3

It is nothing but size classes it self but with different representation. till xcode 7 we used size classes and we consider height-width in regular,compact and any manner, in vary for traits concept is same but xcode specifically explain exact device. In older version we know that for every iphone in portraint etc kind of information where in this we can know exact device!

Check the below screen shots,

You should refer wwdc2016 - video for more information!

Reference : This So Post

Lashandralashar

Ok, let me check WWDC Video. – Maggi

You are right its nothing but evolution of size classes – Somme