logo标签列表

Xcode 8中的“Vary for Traits”是什么？

iosxcode8ios10ios-autolayout
91

我正在使用AutoLayout和Size classes，但是随着iOS 10和新的Xcode 8.0发布，出现了一个新选项Vary for Traits。这是替代Size Classes适用于不同宽度和高度设备的选项吗？

enter image description here

选中 width 复选框后，它会显示 14 种不同的紧凑宽度设备。

enter image description here

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

enter image description here

通过选择两个复选框，它会显示“不同的11个紧凑宽度常规高度设备”。

enter image description here

如何使用这些选项？ 我们能否像Xcode7.0一样使用自动布局和尺寸类？ 如果有人有深入的知识，请解释一下。

看一下WWDC 2016会议视频。我相信其中有涉及“Xcode的新功能”。 - Martin R
3个回答
140
这只是一个关于如何快速在项目中使用“可变特性”为iPad和iPhone添加不同布局的扩展。
请阅读此内容以更好地理解“尺寸类”。

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

enter image description here

如果您跳过下面的示例，请务必阅读结尾的摘要。
  • 目标:

您需要一个在iPhone和iPad上宽度不同的按钮。前者宽度为80，后者宽度为300。

  • 方法1：

安装“识别特征有多个约束条件”的功能。

  • 步骤：

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

enter image description here

选择VaryForTraits，并按照大小类指南为iPhone屏幕选择C*R大小类适配模型，然后在弹出窗口中勾选宽度和高度的刻度线。点击屏幕上的任何位置即可关闭弹出窗口。

enter image description here enter image description here

  1. 添加宽度常量，并检查是否为C * R大小类添加了约束。添加约束后，选择“完成变化”按钮。

enter image description here enter image description here

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

enter image description here enter image description here

  1. 再次添加一个宽度约束条件，上一步添加的iPhone宽度约束条件必须像截图中那样取消高亮显示。这次添加的值将是针对尺寸类别R*R的。

enter image description here enter image description here

切换回 iPhone 布局时，宽度为 80，iPad 的宽度为 300。

enter image description here

结论：

请注意，总共添加了两个约束条件，并且在这两个约束条件中，值根据所选择的大小类别而异。

  • 方法二：

针对具有单一约束条件和多个尺寸类别的特征进行变化

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

enter image description here

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

enter image description here enter image description here

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

enter image description here enter image description here

  1. 选择 iPad，宽度将自动设为 300，在切换回 iPhone 时宽度将被设为 100。

enter image description here

结论：

与其添加两个约束条件，当只需要一个约束条件且常量值不同时，这似乎是更好的选择。

何时使用，使用什么：

这两种方法基本上都是在为Size-classes设置值，但是#Method1用于当您想要为特定设备或大小类别添加约束时。例如，在iPhone中，按钮应该从顶部50个点开始，在iPad中应该水平和垂直居中。在这种情况下，您需要使用VaryForTraits，因为它为特定的大小类别添加约束打开了大门。

#Method2用于当您需要相同约束类型的不同常量值时。

P.S ：对于那些无法使示例工作的人

请确保您仅将所需的约束条件添加为已安装。已安装的复选框应仅出现在您需要的大小类别的约束条件旁边。这是关键！

enter image description here

只需在视图中向uiButton添加顶部和前导约束。选择顶部约束并取消勾选带有加号的基本安装选项。现在，通过单击加号，为C
摘要：特征变化是基于设备配置的用户界面呈现的更改。用户界面的特征变化不仅限于约束，还可以应用于其他许多方面，例如当设备设置为暗样式时更改背景颜色和其他元素。变化可以应用于用户界面的元素，例如删除约束，也可以应用于视图类或约束的属性，例如标签的字体。您可以变化：

  • 视图的大小或位置

  • 视图的安装

  • 约束的安装

  • 约束常量

  • 字体

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

  • 布局边距

  • 图像文件

您可以变化的特定属性取决于元素的类。在示例中，我们演示了使用- 约束的安装 和 - 约束常量。其他属性相当简单，可以轻松推断。

51
对我来说这不起作用。它更新了所有屏幕尺寸上的约束条件，实际上几乎没有任何变化发生... - Dan
5
如果不起作用，请尝试阅读以下内容：http://help.apple.com/xcode/mac/8.0/#/devba3dd0b51。如果您想自定义字体或其他属性，则单击属性窗格中属性左侧的“+”号。对于iPhone 4s和iPhone 7 Plus，由于它们都是紧凑宽度，因此无法根据宽度进行特性变化。您可以针对iPhone和iPad进行特征变化。 - Denis Kutlubaev
2
对我有用，谢谢 :) - Sanman
1
在我删除旧的约束并添加新的约束而不是替换其值后，它对我起作用了。 - Teodor Ciuraru
2
对于那些说这个不起作用的人，我认为你们试图改变所有的约束条件，但实际上你只能改变约束条件中的常量值，而不能改变约束条件的多个或其他属性。 我之前也对此感到困惑。 - 3366784
显示剩余8条评论
21

变量的特征是Xcode先前版本中存在的尺寸类别进化选项。它允许基于特征进行更为巧妙和精确的变化。当然，它不仅限于iPad/iPhone上的变异，还可以指定基于方向和不同设备的变异。

此线程中的其他答案存在一些缺陷和不准确之处，也许最有效的方法是做一个示例。为了清晰起见，我们将把示例限制在一个按钮和两个布局上。但是，如下所述，您可以根据需要扩展以下示例。我们的目标是在所有设备上调整按钮在两种不同布局（横屏和竖屏）之间的位置。

注意：如果未启用“变量的特征”选项，则所有布局和用户界面调整都将涉及到所有特征（即所有尺寸类别）。

fig1

让我们从在storyboard中放置一个按钮开始。由于未启用“变量的特征”，该按钮将出现在所有不同的布局中。如果我们启用了变量的特征，则该按钮仅适用于所选特征。

fig2

现在，让我们启用“变量的特征”并选择基于高度的变异。您应该看到底部屏幕将变为蓝色，并根据所选内容显示所有受影响的设备。目前为止，一切都很好。

fig3

再次选择按钮并像往常一样添加约束条件。在我们的示例中，我们将添加顶部和左侧空间以及宽度和高度。之后，点击“完成变化”。您会看到屏幕底部的部分再次变为灰色。发生的情况是，我们告诉Interface Builder仅为（w：C h：R）类添加上述约束条件。

fig4

现在在屏幕底部选择横向模式。您会看到按钮是红色的，因为它缺少您仅为某些特征添加的约束条件。重新选择变量类型，然后再次选择高度变化。添加以下约束：

fig5

然后按“完成变化”。现在，按钮在横向和纵向屏幕上都可以正确显示。

fig6

构建并运行。您会看到按钮会根据屏幕方向而改变。

您可以按照此模式创建更高级的布局。例如，您可以在一开始选择特征变量，并仅针对特定特征放置UIKit对象。该对象仅存在于指定的变体中，并在其他变体中变灰，让您可以基于特征创建完全不同的用户界面。

3
我已经为(wC,hR)类添加了约束条件，然后点击了"Done Varying"。但当我打开(wR,hR)类时，仍然看到旧的约束条件。请告诉我如何为(wR,hR)这个类创建新的约束条件。请@valvolin告诉我。 - Ramcharan Reddy
9
这只是大小类本身，但具有不同的表示形式。在xcode 7之前，我们使用大小类，并考虑常规，紧凑和任意方式中的高度-宽度，在变化特征的概念相同，但xcode明确解释了确切设备。在旧版本中，我们知道为每个iphone在纵向等信息，在这个版本中我们可以知道确切的设备！
请查看下面的屏幕截图。

enter image description here

enter image description here

如果需要更多信息，您可以参考wwdc2016 - video！

参考资料：这个Stack Overflow帖子

好的，让我去看WWDC视频。 - technerd
你是对的，这只是尺寸类的演变。 - Durai Amuthan.H
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接