iOS之横屏那些事

github Demo 链接

0. 横屏应用领域

1. 游戏
2. 视频播放、直播
3. 展示内容较多且有较多细节的，VR、全景、摄影教学、股市数据等App

1. UI适配

iOS6开始禁止使用setOrientation:私有方法，开发人员仅能通过project->Device Orientation设置对应方向，然而对于大量采用frame形式组织页面布局的App来说，适配横屏简直就是灾难。
那么原先仅支持竖屏的App如何快速适配横屏呢？

1. 根据需求，Device Orientation中新增设备支持方向
2. 保持原先App结构，BasicViewController 默认支持Portrait，业务VC自行适配横屏逻辑
3. 测试LandscapeViewController，dismiss or pop or push 各种形式，对于其他页面的影响，对StatusBar的影响
4. 测试横屏模式冷、热启动App是否导致页面布局错乱，比如，横屏H5页面唤起App，plus横屏模式唤起App

如果全新的一个项目想要支持横竖屏&Universal App 需要符合autolayout，也可以用Masonry。

2. 方向类型

1. 方向类型：

• Device Orientation
• Interface Orientation

typedef NS_ENUM(NSInteger, UIInterfaceOrientation) {
    UIInterfaceOrientationUnknown            = UIDeviceOrientationUnknown,
    UIInterfaceOrientationPortrait           = UIDeviceOrientationPortrait,
    UIInterfaceOrientationPortraitUpsideDown = UIDeviceOrientationPortraitUpsideDown,
    UIInterfaceOrientationLandscapeLeft      = UIDeviceOrientationLandscapeRight,
    UIInterfaceOrientationLandscapeRight     = UIDeviceOrientationLandscapeLeft
} __TVOS_PROHIBITED;

注意InterfaceLandscape与DeviceLandscape取反

2. 方向类型获取：

Orientation获取方式、区别

3. 如何支持横屏

1. 方法一：

transition, 通过选择View的形式达到横屏效果，判断依据：键盘，上拉快捷方式方向不一致。适合简单不需要键盘输入交互，比如简单的视频播放。

 CGAffineTransform transform = CGAffineTransformMakeRotation(-M_PI_2);
 CGFloat scale = 0.5;
 transform = CGAffineTransformScale(transform, scale, scale);
 self.xxView.transform = transform;
 
 [UIView animateWithDuration:[[UIApplication sharedApplication] statusBarOrientationAnimationDuration] animations:^{
            self.xxView.transform = CGAffineTransformIdentity;
            self.xxView.frame = fullScreenVC.view.bounds;
        }completion:^(BOOL finished) {
        }];

2. 方法二：

通过私有API形式调用

 SEL selector  = NSSelectorFromString(@"setOrientation:");
        NSInvocation *invocation = [NSInvocation invocationWithMethodSignature:[UIDevice instanceMethodSignatureForSelector:selector]];
        [invocation setSelector:selector];
        [invocation setTarget:[UIDevice currentDevice]];
        int val                  = orientation;
                // 从2开始是因为0 1 两个参数已经被selector和target占用
        [invocation setArgument:&val atIndex:2];
        [invocation invoke];

这种形式可行，但是存在被拒审的风险，被否决掉！

3. 方法三：

如果是 TabBarController & NavigationController结构的，为了支持页面的横屏需要做如下改造，工程设置支持对应的方向，默认ViewController只支持竖屏模式，只需要presentViewController即可，缺点在于无法适用之前push的导航容器，如有需要可以自行创建：

• TabBarController:

  1. supportedInterfaceOrientations 需要向上抛到NavigationController的supportedInterfaceOrientations
  2. shouldAutorotate也是同理

• NavigationController

  1. return self.topviewcontroller supportedInterfaceOrientations
  2. return self.topViewController shouldAutorotate

• viewController

  1. 默认不用设置方向，前提基于BasicVC，默认竖屏
  2. 有需要再去设置supportInterfaceOrientation & shouldAutorotate

• 注意事项：

  1. shouldAutorotate 设置为NO后，当前VC只支持默认UIInterfaceOrientationMaskPortrait方向

4. 方法四：

• iOS8~iOS10+目前都有效：

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
    
    NSNumber *orientationUnknown = [NSNumber numberWithInt:UIInterfaceOrientationUnknown];
    [[UIDevice currentDevice] setValue:orientationUnknown forKey:@"orientation"];
    
    NSNumber *orientationTarget = [NSNumber numberWithInt:UIInterfaceOrientationLandscapeRight];
    [[UIDevice currentDevice] setValue:orientationTarget forKey:@"orientation"];

}

- (void)viewWillDisappear:(BOOL)animated
{
    
    [super viewWillDisappear:animated];

    NSNumber *orientationUnknown = [NSNumber numberWithInt:UIInterfaceOrientationUnknown];
    [[UIDevice currentDevice] setValue:orientationUnknown forKey:@"orientation"];
    
    NSNumber *orientationTarget = [NSNumber numberWithInt:UIInterfaceOrientationPortrait];
    [[UIDevice currentDevice] setValue:orientationTarget forKey:@"orientation"];

}

- (UIInterfaceOrientationMask)supportedInterfaceOrientations
{
    return UIInterfaceOrientationMaskLandscapeRight;
}

- (BOOL)shouldAutorotate
{
    return YES;
}

在viewWillAppear && viewWillDisAppear时，强制通过KVC设置Orientation,这里并没有涉及到私有API，不会被拒审，只能说这是一种不安全的方式来实现屏幕旋转。

• 扩展：
  1. 强制改变当前页面的Orientation:

- (void)landscapeAction:(UIButton *)button
{
    if (self.supportedInterfaceOrientations == UIInterfaceOrientationMaskPortrait) {
        [self blackMagicChangeOrientation:UIInterfaceOrientationLandscapeRight];
    } else {
        [self blackMagicChangeOrientation:UIInterfaceOrientationPortrait];
    }
}

- (void)blackMagicChangeOrientation:(UIInterfaceOrientation)orientation
{
    UIViewController *viewController = [[UIViewController alloc] init];
    [viewController setModalPresentationStyle:UIModalPresentationCurrentContext];
    viewController.view.frame = CGRectZero;
    [self.navigationController pushViewController:viewController animated:NO];
    
    NSNumber *orientationUnknown = [NSNumber numberWithInt:UIInterfaceOrientationUnknown];
    [[UIDevice currentDevice] setValue:orientationUnknown forKey:@"orientation"];
    
    NSNumber *orientationTarget = [NSNumber numberWithInt:orientation];
    [[UIDevice currentDevice] setValue:orientationTarget forKey:@"orientation"];
    
    [self.navigationController popViewControllerAnimated:NO];
    
    NSLog(@"current self.view. x: %f, y: %f, width: %f, height: %f", self.view.frame.origin.x, self.view.frame.origin.y, self.view.frame.size.width, self.view.frame.size.height);
}

看到一坨代码是否想吐，的确，这种方式实际上通过push、pop一个viewController来触发Orientation的改动已影响现有的ViewController，目前测试结果有效。

• 注意事项：
  • iOS8及以上版本以下代码失效：

 UIViewController *vc = [[UIViewController alloc]init]; 
 [self presentModalViewController:vc animated:NO]; 
 [self dismissModalViewControllerAnimated:NO];

• viewWillDisappear、viewWillAppear等VC生命周期内self.view.frame变化，会影响页面布局。

5. 坑爹的交互逻辑

• 横屏push横屏
  采用上述方法四即可实现横屏push横屏效果。

LandscapeViewController *newLandscapeVC = [LandscapeViewController new];
 [self.navigationController pushViewController:newLandscapeVC animated:YES];
 

详情可参考Demo中的LandscapeViewController中pushVC实现。

6. 横屏遇到的一些问题：

0. Plus 横屏冷启动App

为了避免以横屏模式直接启动App，需要在appdidFinishLaunch中先设置好：

   [UIApplication sharedApplication].statusBarOrientation = UIInterfaceOrientationPortrait;

这行代码需要在放在window之前。
可以参考这个解决方案

1. iOS10 横屏BUG

估计是系统的bug，在各大视频软件均遇到过这种情况，特别是在未开启锁方向的情况下。

2. 开启App支持方向，且只支持一个角度,需要UIViewController支持方向收敛

为了解决为了解决iOS8及以上首次装机横屏进来的时候出现Alert的时候应用出现错乱情况，收敛支方向，通过UIViewController的Category来实现默认的Orientation。因为iOS8以后系统默认的使用的Altert均为UIViewController，但并没有设置Orientation，结果首次安装用户横屏状态下，页面都错乱了。

3. StatusBarFrame监听通知

TabBarController接受了StatusBarFrame的通知，MainTab上的后面几个ViewController没有展示的情况下，先走到了viewDidLoad，这时View拿到的屏幕Frame都是横屏比例，结果页面就错乱了，最终通过监听StatusBarFrameChange中异常处理解决了提前走到viewDidLoad的情况。

7. 想法：

1. 在一个运行数年之久的竖屏App开启横屏模式的确有很大挑战，页面布局，页面跳转原有的逻辑在新模式下都需要改造，也许还有更好的办法解决横屏问题，有待继续研究。

2. 横屏push横屏，非官方推荐交互逻辑，一般采用present形式且无push下个页面的形式，这样设计有点反人类。

3. 参考YouTube、腾讯视频，均采用页面自刷新形式来更新数据源。这样可以减少横屏模式下push方式，减少采坑点。

8.参考：

1. cocoachina屏幕旋转
2. stackoverflow iOS8 force change view controller orientation
3. 腾讯视频全屏转换Demo
4. different orientation