横屏竖屏转换

在App Store上的大部分视频播放App中，都实现了竖屏小屏播放以显示更多相关信息，横屏切换到全屏播放，这样的交互显得优雅而大方。最近项目里有个这样的需求，为全屏视频播放加上竖屏模式。下面，让我们一起来实现这个需求。

iOS中的方向

iOS设备中有两种方向，一种是设备方向，一种是屏幕视图方向。我们可以直接调用

[objc]  view plain  copy

1. [UIDevice currentDevice] setOrientation:UIInterfaceOrientationPartrait];  

强制更改设备方向，但该方法已经在iOS6中废止。另外一种更改设备方向的方法是通过重力感应触发。

那么视图方向是又什么决定的呢?

1. 全局Info.plist
2. iOS6+在UIApplicationDelegate中增加了 - (NSUInteger)supportedInterfaceOrientationsForWindow:(UIWindow *)window;回调
3. UIViewController。并且只在UIWindow的rootViewController或model状态下的UIViewController有效

最终的视图方向取决于 (全局控制 ∩ UIWindow 中的回调 ∩ 单个界面控制) 的交集，如果交集为空，iOS6下抛出 UIApplicationInvalidInterfaceOrientationException 异常后崩溃。

UIController中对视图方向变化的响应

iOS5：

[objc]  view plain  copy

1. -(BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation  
2. {  
3.     return ((toInterfaceOrientation == UIInterfaceOrientationLandscapeRight) |  
4.            (toInterfaceOrientation == UIInterfaceOrientationLandscapeLeft));  
5. }  

iOS6+:

[objc]  view plain  copy

1. // 支持转屏?  
2. (BOOL)shouldAutorotate  
3. {  
4.     return YES;  
5. }  
6. // 支持的屏幕方向  
7. - (NSUInteger)supportedInterfaceOrientations  
8. {  
9.     return UIInterfaceOrientationMaskLandscape;  
10. }  

实现前后的效果

竖屏:

横屏:

两张横竖屏的图片中，菜单、标题大小都发生了改变。下面我们就来讨论下实现的方法。

实现细节

1. 首先在视频播放所在UIViewController支持横竖屏，并在设备旋转的回调中，通知菜单当前的设备方向发生了改变，代码如下：
   [objc]  view plain  copy

   1. //设备旋转前  
   2. - (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration  
   3. {  
   4. //横竖屏变更菜单等  
   5. if (toInterfaceOrientation == UIInterfaceOrientationPortrait) {  
   6. //竖屏状态  
   7. }  
   8.    
   9. //设备旋转前  
   10. - (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration  
   11. {  
   12. //对视图进行旋转处理,这里通过present一个新的UIViewController,暂不需要处理  
   13. }  
   14.    
   15. //设备旋转完  
   16. - (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation  
   17. {  
   18. //设备旋转完的处理  
   19. }  
   20. // 支持转屏  
   21. (BOOL)shouldAutorotate  
   22. {  
   23.     return YES;  
   24. }  
   25. // 支持的屏幕方向  
   26. - (NSUInteger)supportedInterfaceOrientations  
   27. {  
   28.     return UIDeviceOrientationLandscapeLeft | UIInterfaceOrientationPortrait ;  
   29. }  
   30. -(BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation  
   31. {  
   32.     return ((toInterfaceOrientation == UIInterfaceOrientationPortrait) ||  
   33.            (toInterfaceOrientation == UIInterfaceOrientationLandscapeLeft));  
   34. }  
   willRotateToInterfaceOrientation:duration: 和 willAnimateRotationToInterfaceOrientation:duration:的区别在于调用的顺序。前者在旋转前调用，并且屏幕方向、设备原点、视图大小等都未改变，后者在旋转的动画block中调用，并且屏幕方向、设备原点、视图大小等都已改变。因此在willRotateToInterfaceOrientation:duration:中，应当做变量的更改；在willAnimateRotationToInterfaceOrientation:duration:中，适合做一些重绘工作。
2. 考虑到原来的视频播放器只支持横屏播放，这里采用的方案如下：竖屏状态下，先present一个只支持横屏的UIViewController，再将视频播放器作为横屏UIViewController的子控制器添加进来。这样可以触发iOS进行横竖屏检测。
3. 当竖屏切到横屏时，旋转的动画设置。代码如下：
   [objc]  view plain  copy

   1. [portraitViewController presentViewController:landscapeViewController animated:NO completion:^{  
   2.   
   3.             //mvPlayer原先是作为protraitViewController的子UIViewController  
   4.             [mvPlayer.view removeFromSuperview];   
   5.             [mvPlayer removeFromParentViewController];  
   6.   
   7.             //改为作为landscapeViewController的子UIViewController  
   8.         [landscapeViewController addChildViewController:mvPlayer];  
   9.             [landscapeViewController.view addSubview:mvPlayer.view];   
   10.               
   11.             //改变状态栏方向  
   12.             [[UIApplication sharedApplication] setStatusBarHidden:YES];  
   13.             [[UIApplication sharedApplication] setStatusBarOrientation:UIInterfaceOrientationLandscapeLeft animated:NO];  
   14.               
   15.             //旋转前  
   16.             CGAffineTransform transform = CGAffineTransformMakeRotation(-M_PI_2);  
   17.             transform = CGAffineTransformScale(transform, scale, scale);  
   18.             mvPlayer.view.transform = transform;  
   19.               
   20.             //旋转动画  
   21.             [UIView animateWithDuration:[[UIApplication sharedApplication] statusBarOrientationAnimationDuration] animations:^{  
   22.                 mvPlayer.view.transform = CGAffineTransformIdentity;  
   23.                 mvPlayer.view.frame = landscapeViewController.view.bounds;  
   24.             }completion:^(BOOL finished) {  
   25.                   
   26.                 [[UIApplication sharedApplication] setStatusBarHidden:NO];  
   27.                   
   28.             }];  
   29.         }];  
   
   
4. 横屏切换到竖屏的动画实现如下：
   [objc]  view plain  copy

   1. //更改mvPlayer的父UIController  
   2. [mvPlayer.view removeFromSuperview];  
   3. UIViewController *viewController = strongSelf.player.presentingViewController;  
   4. [mvPlayer removeFromParentViewController];  
   5. [viewController dismissModalViewControllerAnimated:NO];  
   6.   
   7. [portraitViewController addChildViewController:mvPlayer];  
   8. [portraitViewController.view addSubview:mvPlayer.view];  
   9.           
   10. //缩放动画  
   11. CGAffineTransform transform = CGAffineTransformMakeScale(scale, scale);  
   12. mvPlayer.view.transform = transform;  
   13. mvPlayer.view.frame = CGRectMake(0, 0, CGRectGetWidth(mvPlayer.view.frame), CGRectGetHeight(mvPlayer.view.frame));  
   14. mvPlayer.view.transform = CGAffineTransformRotate(transform, M_PI_2);  
   15.           
   16.      [UIView animateWithDuration:[[UIApplication sharedApplication] statusBarOrientationAnimationDuration]  
   17.                       animations:^{  
   18.                           mvPlayer.view.transform = CGAffineTransformMakeScale(scale, scale);  
   19.                       }  
   20.                       completion:^(BOOL finished) {  
   21.                           mvPlayer.view.frame = CGRectMake(0, 0, CGRectGetWidth(mvPlayer.view.frame), CGRectGetHeight(mvPlayer.view.frame));  
   22.                                 
   23.                       }];  
   
   

5. 以上是手动旋转过程。还有一种方法是直接旋转portraitViewController.view。人为旋转过程中，设备的原点并未发生改变，这需要考虑横竖屏布局问题。

总结

本文介绍横竖屏切换的一些基础知识，并实践了类似腾讯视频的横竖屏人为切换方式，达到不同状态下显示不同视图的交互方式。