Xcode 8中的“因性而异”是什么?


86

我正在使用AutoLayout和Size类,但是随着iOS 10和新Xcode 8.0的发布,有一个新选项Vary for Traits。是否针对不同宽度和高度的设备替换了尺寸分类。

在此处输入图片说明

通过选中width复选框,将显示varying 14 compact width devices

在此处输入图片说明

通过选中height复选框,将显示varying 18 compact height devices

在此处输入图片说明

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

在此处输入图片说明

如何利用此选项?我们可以将AutoLayout与Xcode7.0之类的大小类一起使用吗?如果任何人有深入的知识,请解释。


看看WWDC 2016会议视频。我敢肯定,这是“ Xcode的新功能”所涵盖的。
马丁R

Answers:


133

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

请阅读此内容以进一步了解Size类。

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

在此处输入图片说明

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


  • 目标:

在iPhone和iPad中,您需要具有不同宽度的按钮。前者的宽度为80,后者的宽度为300。

  • 方法1:

已安装的具有多种约束的特征会有所不同。

  • 脚步 :

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

在此处输入图片说明

  1. 根据尺寸等级指南选择VaryForTraits并为iPhone屏幕选择C * R尺寸等级适合该型号,我们在PopUp中检查Width和Height的勾号。通过单击屏幕上的任意位置来关闭弹出窗口。

在此处输入图片说明 在此处输入图片说明

  1. 添加宽度常量,并检查是否为C * R size-class添加了约束。添加约束后,选择“完成变体”按钮。

在此处输入图片说明 在此处输入图片说明

  1. 对于iPad屏幕,再次选择任何iPad设备,然后选择VaryForTraits,这一次单击height-width,它将显示R * R变化。

在此处输入图片说明 在此处输入图片说明

  1. 再次添加宽度约束,如屏幕截图所示,最后添加的iPhone宽度约束必须未突出显示。这次添加的值将用于大小级别R * R。

在此处输入图片说明 在此处输入图片说明

  1. 切换回iPhone布局,宽度为80,iPad为300。

在此处输入图片说明

结论:

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


  • 方法2:

因特质而异,具有单一约束,已安装多个尺寸等级

  • 脚步 :
    1. 添加普通宽度约束。然后选择该约束并选择“常量”值旁边的+按钮。

在此处输入图片说明

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

在此处输入图片说明 在此处输入图片说明

  1. 同样,对于iPad,其特征变化为R * R,我们再次单击+按钮添加另一个变化并将值设置为300。

在此处输入图片说明 在此处输入图片说明

  1. 选择一个iPad,宽度将自动为300,回到iPhone时,宽度为100。

在此处输入图片说明

结论:

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

使用时,使用方法:

两种方法基本上都在做相同的事情,将值设置为Size-classs。

但是,#Method1当您要添加专门用于设备的约束或说尺寸等级时可以使用。例如,在iPhone中,按钮应位于前50点之内;在iPad中,按钮应位于水平和垂直中心。在这种情况下,您需要使用VaryForTraits,因为它会打开门来为特定的大小类添加约束。

如果要为同一约束类型使用不同的常量值,则使用#Method2

PS:对于所有无法获得示例工作的人

请确保,您仅添加了“已安装”所需的约束。针对“已安装”的复选框仅应针对尺寸类所需的约束出现。那是关键!

在此处输入图片说明

只需在视图中添加顶部约束和到uiButton的引线即可。选择顶部约束,然后取消选中带有加号的基本“已安装”选项。现在,通过单击加号,将变体添加到C R并选中该选项。现在,以各种方向组合将设备从iPhone更改为iPad。此约束仅适用于纵向尺寸为iPhone的C R尺寸类。如果选中了与基本已安装(带有加号的复选框)相对应的复选框,则意味着约束应应用于所有尺寸等级。

摘要:

特性变化是基于设备配置的用户界面显示方式的更改。 用户界面的特质变化不仅限于约束条件,还可以应用更多。例如在设备设置为深色样式时更改背景和其他元素的颜色。变体可以应用于用户界面的元素(例如删除约束),也可以应用于视图类或约束的属性,例如标签的字体。您可以改变:

  • 视图的大小或位置

  • 安装视图

  • 安装约束

  • 约束常数

  • 字形

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

  • 布局边距

  • 图像文件

您可以更改的一组特定属性取决于元素的类。在此示例中,我们演示了-安装约束和约束常量的用法。其他的则非常简单,并且可以轻松推断出来。


51
这对我不起作用。它更新了所有屏幕尺寸的限制,实际上什么也没有发生……

5
如果不起作用,请尝试阅读以下内容:help.apple.com/xcode/mac/8.0/#/devba3dd0b51。如果要自定义字体或其他属性,请单击属性窗格中属性左侧的“ +”。而且,您无法根据宽度来更改iPhone 4s和iPhone 7 Plus的特征,因为它们的宽度都很紧凑。您可以为iPhone和iPad更改它们。
Denis Kutlubaev '17

2
为我工作thnx :)
Sanman

1
我删除了旧约束并添加了一个新约束,而不是替换它的值后,它确实对我有用。
Teodor Ciuraru

2
对于那些说这是行不通的人。我认为您正在尝试更改所有约束,但只能更改约束中的常量值,而实际上不能更改约束的多个或其他属性。我也对此感到困惑。
3366784 '17

21

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

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

注意:如果未启用“针对特征而变化”选项,则所有布局和ui界面调整均引用所有特征(即所有尺寸类别)。

图。1

让我们从在故事板上放置一个按钮开始。由于未启用“因特征而异”,因此该按钮将出现在所有不同的布局中。相反,如果我们启用了针对性状的variable,则该按钮将仅指向所选的特定性状。

图2

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

图3

再次选择该按钮,然后按常规添加约束。在我们的示例中,我们将添加顶部和左侧的前导空间以及宽度和高度。之后,点击“完成变化”。您将看到屏幕的底部再次变为灰色。发生的是,我们已经告诉Interface Builder仅对(w:C h:R)类添加以上约束。

图4

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

图5

并按完成。现在,可以在屏幕上很好地识别横向和纵向按钮。

图6

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

您可以按照此模式创建更高级的布局。例如,您可以在开始时为特征选择一个Variant,并仅为特定特征删除UIKit对象。该对象仅在指定的变体中存在,而在其他变体中则显示为灰色,从而使您可以基于特征创建完全不同的用户界面。


3
我为(wC,hR)类添加了约束,然后单击完成。当我打开(wR,hR)时,我也看到了旧的约束。如何为(wR,hR)此类创建新的约束。请告诉我@valvolin
Reddy

9

它不过size classes是自我,而是具有不同的表现形式。直到xcode 7我们使用大小类并height-width以一种regular,compact and any方式进行考虑,vary for traits概念上是相同的,但xcode专门说明了exact device。在较旧的版本中,我们知道for every iphone in portraint诸如此类的信息,在此我们可以知道确切的设备!

查看以下屏幕截图,

在此处输入图片说明

在此处输入图片说明

您应该参考wwdc2016-视频以获取更多信息!

参考:如此发布


好的,让我检查一下WWDC视频。
technerd

你是对的,只是规模课程的演变
Durai Amuthan.H 17-4-27
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.