Xcode 8 中的“Vary for Traits"是什么?

问题描述

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

通过选择width复选框，它显示14种紧凑宽度的设备.

通过选择height复选框，它显示18个不同高度的紧凑型设备.

通过选中这两个复选框，它会显示不同的 11 个紧凑宽度常规高度设备.

如何使用这个选项?我们可以将 AutoLayout 与 Xcode7.0 等大小类一起使用吗?如果有人有深入的知识，请解释一下.

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

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

如果您跳过下面的示例，请阅读最后的摘要.

• 目标:

您需要一个在 iPhone 和 iPad 中具有不同宽度的按钮.前者宽80，后者宽300.

• 方法一:

因安装了多个约束的特征而异.

• 步骤:

  1. 首先添加常见的约束，例如将按钮水平和垂直居中.

1. 根据尺寸等级指南选择 VaryForTraits 和 iPhone 屏幕，C*R 尺寸等级适合模型，我们检查 Width &弹出窗口中的高度.单击屏幕上的任意位置关闭弹出窗口.

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

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

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

6. 切换回 iPhone 布局，宽度为 80，iPad 为 300.

结论:

请注意，总共添加了两个约束，并且在这两个约束中，值根据选择的大小等级而有所不同.

• 方法 2:

因安装了单一约束、多个 Size-Class 的特征而异

• 步骤:
  1. 添加正常的宽度约束.然后选择该约束并选择常量值旁边的 + 按钮.

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

1. 对于遵循 R*R 特征变体的 iPad，我们再次单击 + 按钮添加另一个变体，并将值设置为 300.

4. 选择 iPad，宽度将自动取为 300，回到 iPhone 时，宽度将取为 100.

结论:

这似乎是一个更好的选择，而不是在只需要一个约束并且常量值不同时添加两个约束.

何时使用，使用什么:

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

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

#Method2 用于同一约束类型的不同常量值.

P.S :致所有无法让示例运行的人

请确保您只添加了已安装所需的约束.对 Installed 的复选框应该只针对您需要的尺寸等级的约束出现.这才是关键！

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

总结:

Trait Variation 是对基于设备配置的用户界面表示的更改. 用户界面的 Trait Variations 不仅限于约束，还可以应用于更多方面.例如在设备设置为深色样式时更改背景和其他元素的颜色.变体可以应用于用户界面的元素，例如删除约束，或者应用于视图类或约束的属性，例如标签的字体.你可以改变:

• 视图的大小或位置

• 安装视图

• 安装约束

• 约束常量

• 字体

• 字体、色调或背景的颜色

• 版面边距

• 图片文件

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

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.

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.

这篇关于Xcode 8 中的“Vary for Traits"是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！