ios Xcode 8 中的“特征变化”是什么？

What is 'Vary for Traits' in Xcode 8?

提问by technerd

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.

我正在使用 AutoLayout 和 Size 类，但是随着 iOS 10 和新 Xcode 8.0 的发布，有一个新选项Vary for Traits。这是针对不同宽度和高度的设备替换 Size Classe 吗？

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

通过选择width复选框，它显示varying 14 compact width devices。

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

通过选择height复选框，它显示varying 18 compact height devices。

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

通过选择这两个复选框，它会显示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.

如何利用这个选项？我们可以像 Xcode7.0 一样使用 AutoLayout 和 size classes 吗？如果有人有深入的知识，那么请解释一下。

回答by Jen Jose

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

这只是关于如何在项目中快速使用“Vary Traits”为 iPad 和 iPhone 添加不同布局的扩展。

Please read this for understanding more on the Size classes.

请阅读本文以了解有关 Size 类的更多信息。

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

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.

你需要一个在 iPhone 和 iPad 上有不同宽度的按钮。前者宽度为 80，后者宽度为 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.

• 脚步 ：

  1. 首先添加公共约束，例如水平和垂直居中按钮。

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

2. 选择 VaryForTraits，对于 iPhone 屏幕，根据尺寸等级指南，C*R 尺寸等级适合模型，我们在弹出窗口中检查宽度和高度的刻度线。通过单击屏幕上的任意位置来关闭弹出窗口。

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

3. 添加宽度常量并检查是否为 C*R size-class 添加了约束。添加约束后，选择 Done Varying 按钮。

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

4. 对于 iPad 屏幕，再次选择任何 iPad 设备并选择 VaryForTraits，这次点击高度-宽度，它应该显示 R*R 变化。

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

5. 再次添加宽度约束，最后添加的 iPhone 宽度约束必须像屏幕截图中那样不突出显示。这次增加的值将用于大小级别 R*R。

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

6. 切换回 iPhone 布局，宽度为 80，iPad 为 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.

• 脚步 ：
  1. 添加正常宽度约束。然后选择该约束并选择 Constant 值旁边的 + 按钮。

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

2. 添加特征变异，对于 iPhone，我们选择 C*R 并将常量值设置为 100。

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

3. 再次对于遵循 R*R 特性变化的 iPad，我们通过再次单击 + 按钮添加另一个变化并将值设置为 300。

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

4. 选择 iPad，宽度将自动设为 300，而回到 iPhone 时，它​​会以 100 作为值。

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.

这两种方法基本上都在做同样的事情，将值设置为 Size-classes。

But, #Method1is 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.

但是，当您想要专门为设备添加约束或说大小类时，可以使用#Method1。例如，在 iPhone 中，按钮应该来自前 50 分，而在 iPad 中，它应该水平和垂直居中。在这种情况下，您需要使用 VaryForTraits，因为它打开了为特定尺寸类添加约束的大门。

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

#Method2用于相同约束类型的不同常量值。

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

PS：致所有无法让示例工作的人

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.

只需在视图中添加一个顶部约束和一个导向 uiButton 即可。选择顶部约束并取消选中带加号的基本安装选项。现在，通过单击加号，向 CR添加变化并选中该选项。现在，使用各种方向组合将设备从 iPhone 更改为 iPad。此约束仅适用于纵向方向的 iPhone 的C R 尺寸类别。如果选中了基本 Installed（带有加号的那个）的复选框，则意味着该约束应应用于所有尺寸类别。

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:

Trait Variation 是对基于设备配置的用户界面呈现的更改。用户界面的特征变化不仅限于约束，而且可以应用于更多。例如在设备设置为深色样式时更改背景和其他元素的颜色。变体可以应用于用户界面的元素，例如移除约束，或应用于视图类或约束的属性，例如标签的字体。你可以改变：

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

您可以改变的特定属性集取决于元素的类。在示例中，我们已经演示了使用 - 安装约束和 - 约束常量。其他的，很简单，可以很容易地推断出来。

回答by valvoline

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.

Vary for traits 是过去版本 Xcode 中出现的 size classes 选项的演变。它允许基于特征的更漂亮和精确的变化。当然，它不仅限于 iPad/iPhone 的变体，您还可以根据方向和不同的设备指定变体。

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

注意：如果未启用“因特性而异”选项，则所有布局和 ui 界面调整均参考所有特性（即所有大小类）。

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.

再次选择按钮并添加通常的约束广告。在我们的示例中，我们将添加顶部和左侧的前导空间以及宽度和高度。之后，单击“完成更改”。您将看到屏幕底部将再次变灰。发生的事情是我们告诉 Interface Builder 只为 (w:C h:R) 类添加上述约束。

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:

现在选择屏幕底部的横向模式。您将看到 Button 为红色，因为它缺少您仅为某些特征添加的约束。再次选择不同的特征并再次选择高度变化。添加以下约束：

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.

您可以按照此模式创建更高级的布局。例如，您可以在开始时为特征选择一个变化，并仅为特定特征删除 UIKit 对象。此对象将仅出现在指定的变体中，而在其他变体中将显示为灰色，允许您根据特征创建完全不同的用户界面。

回答by Ketan Parmar

It is nothing but size classesit self but with different representation. till xcode 7we used size classes and we consider height-widthin regular,compact and anymanner, in vary for traitsconcept is same but xcode specifically explain exact device. In older version we know that for every iphone in portraintetc kind of information where in this we can know exact device!

它只不过是size classes它自己，但具有不同的表现形式。直到xcode 7我们使用大小类和我们考虑height-width的regular,compact and any方式，vary for traits概念是相同的，但Xcode的具体解释exact device。在旧版本中，我们知道for every iphone in portraint诸如此类的信息，在此我们可以知道确切的设备！

Check the below screen shots,

检查下面的屏幕截图，

You should refer wwdc2016 - videofor more information!

您应该参考wwdc2016 - 视频了解更多信息！

Reference : This So Post

参考：这个帖子