什么是特征'变化的特征'在Xcode 8?

时间:2016-10-06 07:29:58

标签: ios xcode8 ios10 ios-autolayout

我正在使用AutoLayout和Size类,但随着iOS 10和新Xcode 8.0的发布,有一个新选项Vary for Traits。对于不同宽度和高度的设备,这是否取代了Size Classe。

enter image description here

选中width复选框后,会显示varying 14 compact width devices

enter image description here

选中height复选框后,会显示varying 18 compact height devices

enter image description here

通过选中两个复选框,它会显示varying 11 compact width regular height devices

enter image description here

如何使用此选项? 我们可以像使用Xcode7.0那样使用大小类的AutoLayout吗? 如果有任何人具有深入的知识,那么请解释一下。

3 个答案:

答案 0 :(得分:124)

这只是如何使用" Vary Traits"在您的项目中快速为iPad和iPhone添加不同的布局。

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

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

enter image description here

如果您正在跳过下面的示例,请阅读最后的摘要。

  • 目标:

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

  • 方法1:

对安装了多个约束的特征不一致。

  • 步骤:

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

enter image description here

  1. 根据尺寸等级指南选择VaryForTraits和iPhone屏幕,C * R尺寸等级适合模型,我们检查宽度和宽度的刻度线。 PopUp中的高度。点击屏幕上的任意位置即可关闭弹出窗口。
  2. enter image description here enter image description here

    1. 添加宽度常量并检查是否为C * R size-class添加了约束。添加约束后,选择Done Varying按钮。
    2. enter image description here enter image description here

      1. 对于iPad屏幕,再次选择任何iPad设备并选择VaryForTraits,这次点击高度宽度时,它应显示R * R变化。
      2. enter image description here enter image description here

        1. 再次添加宽度约束,最后添加的iPhone宽度约束必须在屏幕截图中不突出显示。此次添加的值将是大小等级R * R.
        2. enter image description here enter image description here

          1. 切换回iPhone布局,宽度需要80,iPad需要300。
          2. enter image description here

            结论:

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

            • 方法2:

            对于具有单一约束的特征,安装了多个尺寸级别的

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

            enter image description here

            1. 添加特征变异,对于iPhone,我们选择C * R并将常数值设置为100。
            2. enter image description here enter image description here

              1. 再次对于跟随R * R的特征变化的iPad,我们再次点击+按钮添加另一个变体并将值设置为300.
              2. enter image description here enter image description here

                1. 选择一个iPad,宽度将自动取为300,然后返回iPhone,其值为100。
                2. enter image description here

                  结论:

                  这似乎是一个更好的选择,而不是在仅需要单个约束且常量值不同时添加两个约束。

                  何时使用,使用什么:

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

                  但是,如果要为设备或说size-class添加约束,则使用#Method1 。例如,在iPhone中按钮应该来自前50个点,而在iPad中它应该水平和垂直居中。在这种情况下,您需要使用VaryForTraits,因为它会为特定大小的类添加约束。

                  如果您想为同一约束类型使用不同的常量值,则使用

                  #Method2

                  P.S:所有那些无法获得工作实例的人

                  请确保您只添加所需的约束作为已安装。针对Installed的复选框应仅针对大小类所需的约束显示。这是关键!

                  enter image description here

                  只需添加一个顶级约束&在视图中导致uiButton。选择顶部约束并取消选中带有加号的基本已安装选项。现在,通过单击加号,将变体添加到C R并检查该选项。现在,使用各种方向组合将设备从iPhone更改为iPad。此约束仅适用于纵向为iPhone的C R size类。如果选中了基本已安装的复选框(带有加号的符号),则表示该约束应适用于所有大小类。

                  摘要:

                  Trait Variation是对基于设备配置的用户界面呈现的更改。 Trait用户界面的变体不仅限于约束,还可以应用于更多。例如,当设备设置为暗色时,更改背景颜色和其他元素。变体可以应用于用户界面的元素,例如移除约束,或视图类或约束的属性,例如标签的字体。你可以改变:

                  • 视图的大小或位置

                  • 安装视图

                  • 安装约束

                  • 约束常量

                  • 字体

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

                  • 布局边距

                  • 图片文件

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

答案 1 :(得分:19)

对于特征的变化是过去版本的Xcode中出现的大小类选项的演变。它允许基于特征的更加漂亮和精确的变化。当然,它不仅限于iPad / iPhone的变体,但您也可以根据方向和不同的设备指定变化。

这个帖子中的其他答案有一些缺点和不准确,也许最有效的答案方法就是举个例子。为了清楚起见,我们将示例仅限于一个按钮和两个布局。但是,如下所述,您可以根据需要扩展以下示例。我们的目标是在两个不同的布局之间调整按钮的位置:所有设备上的横向和纵向。

注意:如果未启用“各种特性”选项,则所有布局和ui界面调整都会引用所有特征(即所有大小类)。

fig1

让我们首先在故事板上放一个按钮。由于“特征变化”未启用,因此按钮将出现在所有不同的布局中。相反,如果我们启用了不同的特征,则按钮将仅被引用到所选的特定特征。

fig2

现在,让我们启用“因特性而异”并根据身高选择变化。您应该看到底部屏幕将变为蓝色,根据选择,您将看到所有受影响的设备。到现在为止还挺好。

fig3

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

fig4

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

fig5

并按完了变化。现在,屏幕上的按钮在风景和肖像上都很清晰。

fig6

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

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

答案 2 :(得分:8)

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

检查以下屏幕截图,

enter image description here

enter image description here

您应该参考wwdc2016 - video了解更多信息!

参考:This So Post