Xcode 8中Interface Builder中的大小类
自动布局非常适合根据约束条件对布局进行调整,但有时布局需要根据设备类型,屏幕尺寸或方向进行更重要的调整。
也许您可能想要:
- 巨大的iPad Pro屏幕上的字体大小比小巧的iPhone SE更大。
- 在横向或纵向模式下,iPhone上的视图布局将有所不同。
- 在您的iPad版本的应用程序中提供其他按钮。
- 当您的应用处于滑行或拆分视图模式时,可以不同地布局内容。
您如何对布局进行这些调整?
在iOS的早期版本中,您可能有多个iPad和iPhone的情节提要。 或者,也许您已使用设备方向或窗口大小来确定用于布置场景的环境。 随着越来越多的设备,分割视图控制器(在iOS 8中引入)以及滑动和分割视图多任务模式(在iOS 9中引入)使调整布局以适应其环境变得更加复杂。
为简化起见,Apple建议使用新的范例。 而不是根据许多设备类型,分辨率,多任务处理模式和设备方向来考虑布局,您应该集中精力将布局调整为两种宽度(分别称为紧凑型和常规型)和两种高度(也紧凑型和高型)。定期)。 这些区别称为尺寸等级。 然后,您可以使用这些尺寸类来定义或调整布局。
尺寸等级将所有不同的潜在水平和垂直构型减少为两种:紧凑型,适用于有限的空间; 并经常在有限的空间内使用。 例如,iPhone纵向定位被认为具有紧凑的宽度和规则的高度。 有关尺寸类别如何与设备和设备方向相对应的全面细分,请参见图1。
在定义尺寸类别时,Apple做出了一些有趣的决定,值得注意:
- 在横向放置时,iPhone(6+和6S +除外)的宽度仍被认为是紧凑的。
- 所有处于纵向或横向模式的iPad都被认为具有常规的宽度和高度。 这意味着iPad方向的改变不会触发尺寸类别的改变。
尺寸类别不仅描述了设备类型和方向。 在iPad多任务处理模式下(例如“滑行”,“分割视图”和“并排”(见图2))显示应用程序时,大小类还描述了应用程序的环境。 请注意,尽管某些iPad多任务处理模式的水平尺寸类别可能会更改,但垂直尺寸类别仍保持常规。 实际上,紧凑的垂直尺寸级别足以表明我们正在横向模式下使用iPhone。
您可以使用Size类做什么?
大小类不能替代约束和自动布局,而是可以协同工作。 您可以使用尺寸类别对布局进行许多更改,例如:
- 可以调整视图的大小或位置。
- 字体和颜色可以更改。
- 可以激活或停用约束(称为已安装和已卸载)。
- 可以添加或删除视图(也称为安装和卸载)。
Interface Builder中的大小类
尽管您可以根据代码中的不同大小级别调整接口,但最简单,最方便的方法通常是使用Interface Builder ,尤其是在Xcode 8更新中添加的功能。您可以在Interface Builder中简单地将布局和约束分配给特定的大小级别,并且尺寸类发生变化时,布局也会自动更新-无需编写任何代码!
您将探索如何在具有非常简单布局的应用程序中的Interface Builder中为不同大小的类添加自定义项,并显示带有标题和正文的文章。
首先,您将构建iPhone界面,该界面在标签中包含标题,在文本视图中包含正文(请参见图3左侧的iPhone布局)。 但是,这种布局在iPad上看起来不太好(图3中央的布局)。 要解决此问题,您将使用尺寸类来调整界面(右侧布局)。 请注意布局之间的细微差别,而不是细微差别-随着iPad的空间增加,您将要调整字体大小,边距大小并添加字幕标签。
让我们从设置基本界面和约束开始。
- 创建一个简单的Single View Application,并将其称为SimpleSizeClasses。
- 选择主故事板的文件检查器。 请注意,情节提要自动选择了“使用自动版式”和“使用特质变化”。 (请参见图4。)这表明该情节提要板已准备就绪,可以使用具有约束和大小类别的自适应布局。
注意 :使用自动布局和尺寸类别的应用程序不仅可以进行自适应布局,而且可以利用iOS多任务环境。 如果您希望用户能够在您的应用中使用幻灯片浏览或拆分视图,请确保不要取消选择这些选项!
1.将标签拖到主故事板上。
2.用“标题”替换标签的文本,然后使用Interface Builder中的约束将标签居中并将其固定在顶部布局指南中。 选择“标题1”字体类型。
3.在标签下方的文本视图上拖动,填充可用空间。
4.将文本视图固定到标题标签,底部布局指南以及左右边界。
检查点 您现在可以在这里与我的应用程序进行比较: https : //github.com/iOSAppDevelopmentwithSwiftinAction/SimpleSizeClasses.git (1.InitialSetup分支)
指定尺寸等级的布局
现在,您已经设置了文章应用程序的基本界面,让我们看看如何在Interface Builder中为不同大小的类指定不同的布局。 您可以串联使用两种主要方法:
1.将自定义项添加到属性;
2.因特质而异。
您将使用这两种方法来针对不同尺寸的类定制我们的简单布局。
让我们依次看一下。
向属性添加定制
您可以将尺寸类的自定义直接添加到属性。 让我们通过修改示例应用程序中不同大小类的字体大小和边距大小来探索使用此功能。
以iPad Pro的形式查看设备配置栏中的情节提要,然后缩小以查看整个场景。 请注意,广阔的iPad屏幕上的文字很小。 (您也可以在图3的中央图像中看到这一点)。您将为较大尺寸的类增加字体大小。
1.选择标题标签,然后打开属性检查器。
2.注意字体属性左侧的灰色加号。 选择加号使您有机会为尺寸等级添加自定义值。 现在选择加号。 在这里,您可以从Width , Height和Gamut (一种显示类型)中选择您感兴趣的尺寸类别。 默认情况下,建议使用当前尺寸类别。
3.选择常规宽度 , 常规高度为iPad添加自定义值。 对于指定的大小类,将为font属性显示一个自定义值。 新属性左侧的神秘wR hR代表width Regular,height Regular 。
注意 如果您不希望为特定尺寸的类别添加自定义,则可以将其设置为“任意”。 由于我们对自定义Gamut感兴趣,因此将其保留为Any。
4.现在,您可以为此尺寸等级修改新值。 使它成为55磅的系统字体。 见图5。
还要执行相同的过程来修改文本视图的字体大小-25点的系统字体怎么样?
检查不同设备,方向和适应性的布局。 您应该发现字体属性针对不同的大小类进行了适当的调整。
再次执行该过程,可以轻松为其他尺寸类别添加更多属性。 删除自定义属性也很简单-只需选择属性左侧的叉号即可。
您还可以自定义其他哪些属性? 探索标签的属性和大小检查器。 任何带有加号的属性都可以自定义。 例如,对于标签,这包括属性检查器中的某些颜色属性和大小检查器中的边距属性。 见图6。
向约束添加定制
重要的是,您还可以自定义尺寸类的约束值。 让我们增加文本视图的前导和尾随页边距,以使其在iPad上变窄。
1.选择文本视图和大小检查器,然后找到前导空间约束。 不用选择“编辑”,而是双击大小检查器中的约束以打开该约束的更详细的编辑视图。
2.请注意,约束的“ 常量”值带有加号。 为iPad添加一个变体(常规宽度,常规高度)。
3.将常量的自定义值设置为50。请参见图7。
对文本视图的尾随约束执行相同的操作(您需要再次选择文本视图才能选择其他约束)。
提示 如果设置尾随约束后文本视图不显示在屏幕上,则需要反转第一和第二项。 选择第一项或第二项的下拉菜单,然后选择“反转第一项和第二项”。 现在,再次将常数修改为50,并且应该正确设置约束。
请注意在不同配置下对布局所做的更改的影响。 如果一切顺利,iPad上的文本视图应具有更大的边距。
将自定义添加到已安装的属性
现在,要对iPad布局进行一些更重要的更改,您将只为iPad用户添加字幕标签。 但是首先,您将删除标题和文本视图之间的约束,以便为字幕视图腾出空间。
您可能已经在约束检查器和视图的属性检查器中都注意到了另一个可自定义的属性: 已安装 。 可以为特定大小的类安装或卸载视图和约束。 让我们使用此属性删除约束。
1.双击文本视图“ 顶部空间”约束。
2.选择“ 已安装”属性旁边的加号以添加自定义项。
3.取消选中wR hR复选框。 见图8。
注意请 不要担心文本视图是否消失-只是暂时混淆了去向,您将很快解决此问题。
现在,让我们添加字幕视图,我们通过改变traits来实现 。
改变特质
改变特征非常适合对尺寸类的布局进行更重大的更改。 让我们通过在示例应用程序中为不同大小的类添加视图和约束来探索各种特性。
您可能已经注意到设备配置栏右侧的“ 因性状而异”按钮,并且想知道该按钮的用途是什么。 好吧,不要再想了! 您可以使用“更改特征”按钮来开始仅针对特定尺寸类别的布局。
在设备配置栏中选择iPad设备后,为“特征”选择“变化”。 您可以选择仅针对宽度尺寸类别( wR ),高度尺寸类别( hR )或两者( wR hR )进行更改。 选择宽度和高度。 进行选择时,设备配置栏将变为蓝色,您将看到要为其更改布局的设备 , 方向和适应性 (多任务环境)。 参见图9。
如您所见, wR hR尺寸类别不仅与iPad有关,而且与某些适配产品有关。 继续并更改此大小类的布局。
1.在标题下方添加字幕标签。
2.给它一些示例文本。
3.给它的系统字体大小为30。
4.将字幕标签固定在标题上,然后将其水平对齐。
5.将文本视图固定到字幕标签,然后将约束常数修改为8点。 文本视图应在新的字幕标签下方很好地滑入。
6.完成布局的更改! 选择设备配置栏中的“完成更改”按钮。
同样,在设备配置栏中选择其他设备或方向以欣赏工作结果。 字幕应在iPad上显示,而在其他尺寸级别上消失。 注意,在不同大小的类中安装或卸载了不同的视图和约束。 文档轮廓中的褪色符号表示未安装的视图和约束。 见图10。
检查点 如果您现在想与我的项目进行比较,可以在这里进行检查: https : //github.com/iOSAppDevelopmentwithSwiftinAction/SimpleSizeClasses.git (2.iPadLayout分支)
如果您想了解更多,请下载免费的iOS开发第一章Swift ,并查看此Slideshare演示以获取折扣代码。