iOS autolayout进阶教程，实现视频播放时，横竖屏的自动切换-适配iOS8 sizeClass 和之前的版本

--------------------------------转载请注明出处-----------------------------------

相信有视频播放功能的项目中，同行们在做的时候肯定多少会被横竖屏切换播放界面给折磨的欲仙欲死的。

不过有了autolayout 这一切将变的非常容易，特别是今年出的iOS8 ,又增加了一个sizeClass的概念，让视频横竖屏的实现变的像喝水一样容易。

那么今天就演示一下如何用iOS8 sizeClass 来做这个效果，然后继续讲如何适配低版本，以及不同尺寸的屏幕。

1.首先为了方便建了一个基于Tab 的工程，打开后进入到storyboard（下面简称SB） 中，就看到一个Tab BarController 后面连着一人firstViewController(下面简称VC) 和一个second VC

然后在SB底部会看到这样一栏

然后点击这个wAny hAny(下面简称w-h),会变成下面这样

因为呢是要做横竖屏的操作，所以这里就不能用Any Any了，这里我们把鼠标移动最左边，变成图中这样，这就是ios 8 的sizeclass 的作用，它把所有设备的屏幕分成了九种类型，而现在选中的类型呢，这个上面已经说的很清楚了（for all iPhones in portrait ）就是支持所有的iPhone的竖直方向。

我们点击一下就会变成会发现整个SB 不再是刚才全是方形，而是变成了竖长方形，firstVC 变成了下面这样

这个是我拖一个view 在上面为了便于识别，给它加上一个背景颜色，把它放到上面，根据IB 提供的辅助线放到现在这个位置，设置高为200

然后我们给对它添加约束，选中这个view然后在SB 底部右下会看到四个按钮点击第二个会看到下图这样

注意要把Constrain to margins 这个勾 ，给取消掉，因为这是xcode6 为view 自动添加的边距，只支持ios8 我们不需要这个，去掉之后，会发现上面上、左、右三个方向的约束已经变成了0.这个时侯点击上、左、右，三个方向的虚线，它们就会变成了实线。然后再在Height 前打上对勾，点击Add ,这样就我们就给这个view 添加了一个跟离上、左、右边框距离为0 ，且高度固定为200 的约束了。

如果出现黄色，或者红色的线说明你的约束添加的不成功，那么查看一下，是不是有些步骤做的不对。如果步骤没有错，那么选中View 点击SB底部第三个按钮然后点击Updata frame应该就没有问题了 （这是添加约束的一种方式，下面我将演示第二种）

2. 接下来我们在view 上面添加一个label 设置名字为autolayout ，根据辅助线放到如图这个位置

下面我们为这个label 添加约束。首先选中这个label ，然后按住右键不放，会有一条线像下面这样

在拖的过程中，会有提示，这个约束 是相对于那个view 的，注意不要过界，在这里我们当然是添加到刚才添加的view 上面

，这时候呢view 会加上一层蓝色的蒙层，说明选的就是它了，然后松开鼠标，会看到下面这样

如果你松手后没有发现bottom space to container  这一项，那么一定是你拖的姿势不对，换个姿势再来一次，唉呀，不是让你扭啊，是让你的线扭。

如果出现这张图片呢，点击红色箭头所指的选项，就会添加一个距离view底部一定距离的约束。

同理，按照刚才的姿势再拖一次，这次选Center Horizontally In Container,就是添加一个垂直居中的约束，这样就完成了，如果出现黄色的线，updata下frame.

现在呢我们已经完成了，在竖直方向的约束，添加

3.下面是设置横屏时操作

同样点击w-h,移动鼠标选成这样的

这上面解释的也很清楚，这个就是支持所有的iPhones 横屏时

选择完毕后，会后现firstVC 变成了现在这样，

我擦刚才的view 已经变成了这个熊样，当然不是我们想要的，

这个时候要做以下操作，以确保在横屏的时候会给出我们想要的结果。

我们看SB左侧显示VC 信息的地方，会发现刚才在竖直状态下添加的view 和label 变成了灰色，就像现在这样

这个状态说明此时这个view 以及label 上面的约束是不支持这个横屏的的，所以我们要先让他支持，首先选中这个view  ，那个？当然选中那个灰色的了

会在右侧看到它的信息，就是这个东西

看到箭头所指的地方了吗？这里面可以看到，wC-hR 对勾打上了，说明在竖直条件下，约束是起作用的，这个时候呢我们点击，箭头所指的+号，会出现这个界面

因为我们已经把SB 调到了wA-hC 的状态了，所以这里它会为你提供一种选择，直接点击箭头所指的就行了，点击完成后

就变成了现在这样

把对勾打上，现在就要吧对view 操作了，这个时候把长成这样的view 

通过改变大小，拖拽改变大小变成下图这样

然后呢添加四个约束，这个时候添加的约束跟上面不太一样，变成下面这四个

 添加完成后，再对变灰了的label 在它身上，重复一下刚才对view 的操作

让它可以在view 中显示出来，当然这个label 你可能无法直接拖动它，因为你看不见它，这个时候可以点击SB左侧VC信息栏上的label,

通过这里来改变它的位置

然后添加约束，跟在竖直状态下一样就不再多写。

label 也设置完成后运行一下吧，首先是这样

切换横屏，就是下面这样

4.弄成现在这模样，最基本的已经弄好了，然后就是在first VC 里，往view上添加一个MPMoviePlayViewController的一个对象了，然后就可以根据URL 播放视频了，这个是关于autolayout  的教程，至于视频播放的代码就不贴了，当然，系统自带的视频播放一般不能满足开发需求，我们一般需要去自定义一个播放器，在上面添加组件，去自己实现功能了，自定义视频界面以及怎样根据系统提供的通知来控制视频，后面会专门写一篇讲。 

5.上面的操作呢，基本就实现了，iOS8 下横竖屏切换，但是并完美因为，在竖直状态下的view 的高度是固定的，我们刚才设置的是200 这个高度在4s 上面是完美的，但是在5系，6系上是太短的，很不好看，而且是不支持iOS8以下的版本的，下面呢我们就一并解决这两个问题。

首先先点击w-h 把视图切换到竖直状态，然后SB左侧找到view (我们自己添加的view)展开它会看到view 下有一个label 有约束信息，再展开约束里面的内容，会看到

看红框框住的地方了吗，这个就是view在竖直状态下的固定height 的高度的约束。找到它之后，点击SB 右上幽灵面具的图标

，你可能已经猜到我们要干什么了，对，就是把它拖到代码里面去。像这样

然后取个名字，这里我取的是viewHeightConstraint，这个时候我们就可以代码控制它的大小了。

假设我们的需求是，竖直状态下，在所有不同屏幕上高度占整个比为42%，那么我们就在view did appear  里修改这个约束的值像这样

-(void)viewDidAppear:(BOOL)animated{
    [super viewDidAppear:YES];
    self.viewHeightConstraint.constant = BoundsHeight * 0.42;//BoudsHeight 是一个宏，self.view.bouds.size.height

}

现在呢已经可以装有iOS 8 的所有设备上，都适配了，那么不是iOS8 的设备怎么办呢，iOS 8 上的约束，并不是完全不管用在低版本上面，而是wC-hR 上的约束在低版本的系统上面都是适用的，也就是说现在所有可以应用autolayout 的设备在竖直状态下都是没问题的，那么我们只需要在横屏的时候把这个值才变成BoundsHeight 就可以了，所以在下面这个方法里加上以下代码

//视图转向时，调用的方法
-(void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duratio{
    //当视图转到横向时的操作
    if (UIInterfaceOrientationIsLandscape(toInterfaceOrientation)) {
        NSLog(@"land");
        self.viewHeightConstraint.constant =BoundsHeight-20;//横屏里把约束的值设为boundsHeight
        [self.tabBarController.tabBar setHidden:YES];//把tabbar 隐藏掉
    }
    else if (UIInterfaceOrientationIsPortrait(toInterfaceOrientation)){
        NSLog(@"portrait");
        self.viewHeightConstraint.constant = BoundsHeight*0.42;;//竖屏时把约束的值再变回来
        [self.tabBarController.tabBar setHidden:NO];//把tabbar 显示出来
    }
}

这样就完成了，这个可以适用于所有的支持autolayout 的版本了。