iOS 10可视化编程之sizeclass(Vary for Traits)(3)

Xcode8中修改了sizeclass面板的效果，不再是以前的那种方形的选择，而是更加直观的显示了在横竖屏下适配的界面。名字也不再是sizeclass而变成了Vary for Traits。我们之前学习了约束，而约束是针对你选择的屏幕。当屏幕不一致时要显示不同的布局。随着苹果设备的不断增多，苹果对屏幕的选择不再是之前的sizeclass，可以针对某个设备进行适配，苹果认为应该针对大多数的设备，所以这里的Vary for Traits让开发人员变的更加的方便，默认不做任何操作就是全屏幕做的适配，也就是屏幕的竖屏和横屏都存在约束，大家可以去自己做测试。这里不再演示。Vary for Traits给我们提供了针对大多数设备的屏幕适配，这种效果对于开发来说是非常好的。先给大家演示下Vary for Traits是如果选择设备的

用Trait Variations实现横竖屏不同约束

创建工程。
选择Main.storyboard。
在视图层中扔进一个imageview。
选中Vary for Traits(注意是先选)。
选择width出现以下界面(发现在横屏竖屏之下都适应)。

选择屏幕

这里的屏幕选择的是14种设备，在下面是有提示的，也就说，我们在以后添加的约束是针对的这14种设备。如图26-1：

图26-1.png

然后我们在这里添加一个控件然后给他添加约束，在添加约束结束之前一定不要点击Done Varying，如图26-2：

图26-2

这个一定要在约束添加完成后再点击。然后我们拖入一个控件，然后随便给他添加一个约束。如图26-3所示：

图26-3

添加完成后，点击Done Varying。然后我们再选择Trait Variations如图26-4所示：

图26-4

大家注意看，设备由原来的14变了11，说明有部分设备不在其中，我们往后面看，发现是手机的横屏消失了。也就是说，我们现在添加的约束对手机的横屏是不支持的。我们再来添加一个控件，然后给这个控件也添加约束，随后我们看看手机横屏的样子。如图26-5所示：

图26-5

然后刷新Frames，我们点击Done Varying。如图26-6所示：

图26-6

我们运行下看效果。竖屏效果如26-7所示：

图26-7

横屏效果如图26-8所示：

图26-8

没错，就是会消失了。因为我们当初添加绿色控件的时候，当时所选的设备，没有针对手机的横屏，也就是说手机的横屏是不会显示的。
教给大家一个小技巧
我们所选的设备可以通过展开的效果看到，是哪些设备支持这些约束的，也就说，你添加的约束是针对哪些设备的。点击箭头按钮可以查看，如图27-1所示：

图27-1

然后我们可以查看到是哪些设备支持的。如图27-2所示：

图27-2

这样一个效果后，相信大家会对sizeClass有了新的理解。这里不再一一演示，给大家举个例子，来设置设备的组合。如图28-1：先选中ipad，然后点击Vary for Traits。

图28-1

选中Width，这里的设备指的就是只有这8种，ipad的横竖屏，以及iPhone7Plus的横屏。如图28-2所示：

图28-2

其他的设备组合，大家可以自己去发现了。

预告

XIB和Storyboard的类关联，XIB和Storyboard类的创建方式，以及Storyboard传值。

有什么疑问可以在评论区留言，我会及时回复你，如果喜欢我的文章，或者帮助到你，大家可以点个赞或者添加个关注。如果你能请我喝瓶可乐或者来包小浣熊，那我就再开心不过了。感谢你对开发界的支持！

可乐or小浣熊