XCode中的sizeclass(Vary for Traits)匹配手机的横竖屏

几乎所有的iOS开发者都会遇到屏幕适配的问题，苹果提供了很多方法来做适配，包括Xib、NSLayoutConstraint等。同时，为了更方便的做适配，我们还可以使用一些第三方的框架，如OC中的Masonry（Swift中有对应的SnapKit）。

这里将介绍一种比较特殊的情况 -- 如何应对 差异性布局。

差异性布局

我们日常开发中，经常会遇到下面这种布局方式：

竖屏.png

横屏.png

尽管横竖屏的布局不尽相同，但是从两种的总体布局来看，两者的布局方式是相似的。区别仅仅在于子控件收到父视图的尺寸影响，自身做出了相应的改变。

而这里所说的差异性布局指的是，在横竖屏的情况下，呈现不同的布局方式。

下面两张图片可以解释：

竖屏

横屏

虽然控件是一样的，但是排布的方式却完全不一样了，在竖屏的时候，label在星星的下方，而横屏时，因为屏幕的高度不够，想要做到相同的布局方式无法达到。于是将label放在了星星的右边，这就是 差异性布局。

如何实现差异性布局

有两种方法可以做到差异性布局。

第一种很接地气：给屏幕的方向转动添加一个观察者，当屏幕转动的时候，将布局做相应的改动。

第二种使用Xib中的sizeClass,Xcode8之后更名为Vary for Traits。也是本文主要要介绍的。

先说第一种：添加观察者模式

我们可以在需要做变动的界面中，像下面这样添加一个观察者：

[[NSNotificationCenter defaultCenter] addObserver:self 
selector:@selector(statusBarOrientationChange:) 
name:UIApplicationDidChangeStatusBarOrientationNotification object:nil];

然后调整回调函数statusBarOrientationChange中的实现，在这里改变布局，达到目的。
这种方式的缺点是代码量太多了，面对复杂的界面布局，做起来的会相当的蛋疼的（当然，这中需求的界面一般不会太复杂）。 优点是可以针对任何的设备，包括IPad／IPhone，设置可以细化针对不同的机型，比如说，4S的屏幕跟其他的屏幕比例不一样，单纯是放大缩小界面是达不到效果的，那使用这种方式不失为一个好办法。

第二种，操作SB中的来Vary for Traits实现。其实一听到种方式就联想到简便了。具体操作如下：

1.介绍
进入到我们要操作的界面的Xib中，找到底部的Vary for Traits：

Vary for Traits板块

• 这里左边是各种各样的机型：

  
  
  

  机型

  有手机，也有pad，鼠标左点击之后，上面会显示： view as ：XXXXX，图中显示的iPhoneSE。我们下面称这个区域为机型区域。

• 中间部分：

  
  
  

  横竖屏
  
  

  这个不用说了吧。下面称这个区域为屏幕方向区域。

• 设置参数：

  
  
  

  参数
  
  

  点击之后，会出现一个对话框，有两个选项值：Width和 Height

  
  
  

  参数值选项
  
  下面称这个区域为参数区域。

以上的三个部分结合筛选出我们想要的屏幕样式。 其实和sizeClass一样，只不过现在变成了可视化。

2.操作
我们先对竖屏的手机进行布局，任意选中一个手机，比如iPhone SE，然后选中屏幕方向区域中的竖屏，最后点Vary for Traits按钮（设置区域）。下图：

示例

现在通过选中两个参数来筛选我们要的屏幕。因为组合有很多中，我们一个一个试。
先选中Width，下图：

选择Width

发现整个区域变蓝色了，说明选中了很多的设备，具体有哪些设备，通过点击图中的蓝色圈圈起来的箭头，看到当前支持的设备：

机型

只看手机 手机部分，发现不管是横屏还是竖屏都支持，这样肯定不行。
把 Width取消，选中 Height之后，同样的步骤，看到支持的设备：

机型

这正是我们想要的竖屏。

选完之后，会看到原本的Vary for Traits按钮变成了 Done Varying，这表示当前正处编辑状态。Done Varying表示点击之后就完成，相当于保存的效果。我们下一步是给屏幕做适配，做好了之后再点，就给选中的机型做好了适配。比如给竖屏做好了适配：

适配1

然后点击Done Varying。这样竖屏的适配就做完了。

接下来横屏的适配，同样的方式。

设置

横屏适配

完了之后，运行一下，就发现分别针对横竖屏幕的适配做好了。