横屏竖屏转换

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

iOS中的方向

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

[objc]  view plain copy  
 [UIDevice currentDevice] setOrientation:UIInterfaceOrientationPartrait];  

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

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

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

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

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

iOS5：

[objc]  view plain copy  
 -(BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation  
 {  
     return ((toInterfaceOrientation == UIInterfaceOrientationLandscapeRight) |  
            (toInterfaceOrientation == UIInterfaceOrientationLandscapeLeft));  
 }  

iOS6+:

[objc]  view plain copy  
 // 支持转屏?  
 (BOOL)shouldAutorotate  
 {  
     return YES;  
 }  
 // 支持的屏幕方向  
 - (NSUInteger)supportedInterfaceOrientations  
 {  
     return UIInterfaceOrientationMaskLandscape;  
 }  

实现前后的效果

竖屏:

横屏:

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

实现细节

首先在视频播放所在UIViewController支持横竖屏，并在设备旋转的回调中，通知菜单当前的设备方向发生了改变，代码如下：
[objc] view plain copy
1. //设备旋转前
2. - (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
3. {
4. //横竖屏变更菜单等
5. if (toInterfaceOrientation == UIInterfaceOrientationPortrait) {
6. //竖屏状态
7. }
9. //设备旋转前
10. - (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
11. {
12. //对视图进行旋转处理,这里通过present一个新的UIViewController,暂不需要处理
13. }
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:中，适合做一些重绘工作。
考虑到原来的视频播放器只支持横屏播放，这里采用的方案如下：竖屏状态下，先present一个只支持横屏的UIViewController，再将视频播放器作为横屏UIViewController的子控制器添加进来。这样可以触发iOS进行横竖屏检测。
当竖屏切到横屏时，旋转的动画设置。代码如下：
[objc] view plain copy
1. [portraitViewController presentViewController:landscapeViewController animated:NO completion:^{
3. //mvPlayer原先是作为protraitViewController的子UIViewController
4. [mvPlayer.view removeFromSuperview];
5. [mvPlayer removeFromParentViewController];
7. //改为作为landscapeViewController的子UIViewController
8. [landscapeViewController addChildViewController:mvPlayer];
9. [landscapeViewController.view addSubview:mvPlayer.view];
11. //改变状态栏方向
12. [[UIApplication sharedApplication] setStatusBarHidden:YES];
13. [[UIApplication sharedApplication] setStatusBarOrientation:UIInterfaceOrientationLandscapeLeft animated:NO];
15. //旋转前
16. CGAffineTransform transform = CGAffineTransformMakeRotation(-M_PI_2);
17. transform = CGAffineTransformScale(transform, scale, scale);
18. mvPlayer.view.transform = transform;
20. //旋转动画
21. [UIView animateWithDuration:[[UIApplication sharedApplication] statusBarOrientationAnimationDuration] animations:^{
22. mvPlayer.view.transform = CGAffineTransformIdentity;
23. mvPlayer.view.frame = landscapeViewController.view.bounds;
24. }completion:^(BOOL finished) {
26. [[UIApplication sharedApplication] setStatusBarHidden:NO];
28. }];
29. }];
横屏切换到竖屏的动画实现如下：
[objc] view plain copy
1. //更改mvPlayer的父UIController
2. [mvPlayer.view removeFromSuperview];
3. UIViewController *viewController = strongSelf.player.presentingViewController;
4. [mvPlayer removeFromParentViewController];
5. [viewController dismissModalViewControllerAnimated:NO];
7. [portraitViewController addChildViewController:mvPlayer];
8. [portraitViewController.view addSubview:mvPlayer.view];
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);
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));
23. }];
以上是手动旋转过程。还有一种方法是直接旋转portraitViewController.view。人为旋转过程中，设备的原点并未发生改变，这需要考虑横竖屏布局问题。