关于iOS横竖屏适配

作者: HarwordLiu | 来源:发表于2017-02-20 17:46 被阅读11061次

    关于横竖屏适配,有一句说一句,坑挺深的。之前做Vision和毕设的时候就处理过横竖屏问题,不过当时的功力太浅,明显没有处理明白。所以这次在公司项目中又一次遇到了这种横竖屏的需求,自然要认真的搞一哈,顺便总结一下分享给大家。其实在我理解上,只要明白以下几点,横竖屏处理上并不是问题。大家按需跳转吧:

    1.横竖屏方向枚举

    2.开启横竖屏权限

    3.在VC中如何开启横竖屏

    4.横竖屏控制优先级

    5.横竖屏适配

    6.总结

    1.横竖屏方向枚举

    关于横竖屏一共有三种枚举,UIInterfaceOrientation,UIInterfaceOrientationMask,UIDeviceOrientation。

    1.1 UIInterfaceOrientation与UIDeviceOrientation

    为什么这两个放在一起说,好吧,你看看下面这个枚举定义:

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

    我相信你应该看出了点东西了把,对于iOS设备来讲,屏幕状态由以上五种状态。上下翻转还是很好区分的,左右旋转可能就不是很好区分。

    这里有个坑!!!
    高能预警:
    请仔细观察上面的枚举值。

    在处于竖屏和上下翻转的状态下这两个枚举值是一样的,而当处于横屏时,这两个值刚好相反。

    所以在有时你发现跟你预期的翻转方向不一样的时候,可能你用错了枚举。

    UIDeviceOrientation 是设备的当前所处的方向,而且事实上它有6个值,

    typedef NS_ENUM(NSInteger, UIDeviceOrientation) {
        UIDeviceOrientationUnknown,
        UIDeviceOrientationPortrait,            // Device oriented vertically, home button on the bottom
        UIDeviceOrientationPortraitUpsideDown,  // Device oriented vertically, home button on the top
        UIDeviceOrientationLandscapeLeft,       // Device oriented horizontally, home button on the right
        UIDeviceOrientationLandscapeRight,      // Device oriented horizontally, home button on the left
        UIDeviceOrientationFaceUp,              // Device oriented flat, face up
        UIDeviceOrientationFaceDown             // Device oriented flat, face down
    }
    

    分别对应iPhone未知方向,竖直,上下反转,向左旋转,向右旋转,屏幕朝上,屏幕朝下。关于横屏如何去分左右,其实API中的注释已经说明,当处于UIDeviceOrientationLandscapeLeft,home键在右侧,当处于UIDeviceOrientationLandscapeRight,home键在左侧。

    所以,UIDevice顾名思义,事实上是用来判断设备方向的。

    UIInterfaceOrientation 即当前页面的方向。

    在设备进行横屏旋转的时候,为了横屏时上下不翻转,所以当Device处于Left时,界面应该是Right旋转。这样才不会使横屏时内容上下翻转。所以我想你应该明白了为什么在处于横屏时为什么他们俩的值是刚好相反的。

    所以对于横竖屏适配,使用的枚举大家一定要看好,使用UIInterfaceOrientation。不要搞反。

    1.2 UIInterfaceOrientationMask

    其实苹果大大还是给了我们更清晰和方便的枚举如下:

    typedef NS_OPTIONS(NSUInteger, UIInterfaceOrientationMask) {
        UIInterfaceOrientationMaskPortrait = (1 << UIInterfaceOrientationPortrait),
        UIInterfaceOrientationMaskLandscapeLeft = (1 << UIInterfaceOrientationLandscapeLeft),
        UIInterfaceOrientationMaskLandscapeRight = (1 << UIInterfaceOrientationLandscapeRight),
        UIInterfaceOrientationMaskPortraitUpsideDown = (1 << UIInterfaceOrientationPortraitUpsideDown),
        UIInterfaceOrientationMaskLandscape = (UIInterfaceOrientationMaskLandscapeLeft | UIInterfaceOrientationMaskLandscapeRight),
        UIInterfaceOrientationMaskAll = (UIInterfaceOrientationMaskPortrait | UIInterfaceOrientationMaskLandscapeLeft | UIInterfaceOrientationMaskLandscapeRight | UIInterfaceOrientationMaskPortraitUpsideDown),
        UIInterfaceOrientationMaskAllButUpsideDown = (UIInterfaceOrientationMaskPortrait | UIInterfaceOrientationMaskLandscapeLeft | UIInterfaceOrientationMaskLandscapeRight),
    }
    

    事实上我们在横竖屏适配时,最常用的是这个枚举。这个枚举详细的列举了各种你需要的情况。我就不赘述了。官方的命名还是很舒服很好理解的。

    2.开启横竖屏权限

    开启横竖屏的方式有两种,一种是在项目中直接进行勾选,

    image 1

    可以看到这种勾选方式允许你进行四个方向的配置,并且这种勾选方式会直接在你的项目plist文件中添加

    image 2

    但是由于在这里配置是对项目启动时lanuch界面产生影响,而往往我们又没有对lanuch进行横竖屏适配,所以在这个时候我们就需要使用第二种方式进行配置。

    在项目中的AppDelegate文件中进行配置。

    #pragma mark - InterfaceOrientation //应用支持的方向
    - (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window {
        return UIInterfaceOrientationMaskAllButUpsideDown;
    }
    

    搭配UIInterfaceOrientationMask使用,你可以很方便的让你项目开启你所需要的横竖屏权限和限制条件。

    3.在VC中如何控制横竖屏

    我们都知道MVC架构,那么显而易见,在我们开启了项目的横竖屏的限制之后,需要在ViewController进行相应的配置,才能真正实现横竖屏。

    开启横竖屏,我们需要在VC中添加如下代码:

    // 设备支持方向
    - (UIInterfaceOrientationMask)supportedInterfaceOrientations {
        return UIInterfaceOrientationMaskAll;
    }
    // 默认方向
    - (UIInterfaceOrientation)preferredInterfaceOrientationForPresentation {
        return UIInterfaceOrientationPortrait; // 或者其他值 balabala~
    }
    

    而对于横竖屏,手机端一般有两种情况,一种是手机没有开启横竖屏锁定,用户将手机横屏时触发的。对于第一种情况,我们只需要在VC中添加:

    // 开启自动转屏
    - (BOOL)shouldAutorotate {
        return YES;
    }
    

    另一种是我们在项目中的某些条件下强行让屏幕横屏,例如大图预览,视频播放,等等。而对于这种情况,我们可以使用下面👇这两种方法,都可以实现效果:

    - (void)setInterfaceOrientation:(UIInterfaceOrientation)orientation {
        if ([[UIDevice currentDevice] respondsToSelector:@selector(setOrientation:)]) {
            SEL selector = NSSelectorFromString(@"setOrientation:");
            NSInvocation *invocation = [NSInvocation invocationWithMethodSignature:[UIDevice instanceMethodSignatureForSelector:selector]];
            [invocation setSelector:selector];
            [invocation setTarget:[UIDevice currentDevice]];
            int val = orientation;
            [invocation setArgument:&val atIndex:2];
            [invocation invoke];
        }
    }
    
    
    - (void)setInterfaceOrientation:(UIDeviceOrientation)orientation {
        if ([[UIDevice currentDevice] respondsToSelector:@selector(setOrientation:)]) {
            [[UIDevice currentDevice] setValue:[NSNumber numberWithInteger:orientation] forKey:@"orientation"];
        }
    }
    

    PS:这两个方法只有在- (BOOL)shouldAutorotate( return YES; )时,才会生效。并且请注意使用的枚举值的不同。

    4.横竖屏控制优先级

    在我们接手一个项目后,说要添加一个某个界面横竖屏需求时,发现按照上面的方式配置了一圈,发现还是转!不!成!功!What F***!!!

    事实上在这里我们要了解一个问题,就是关于横竖屏控制的优先级。对于限于VC范围来讲优先级最高的是当前的windowrootViewController,而往往我们的项目结构是容器视图控制器控制VCtabBarController控制navigationController之后是VC,而横竖屏控制的优先级也是跟你的项目架构一样。而且是一旦优先级高的关闭了横竖屏配置,优先级低的无论如何配置都无法做到横竖屏。所以在你接受这个需求的时候,你需要看一下根视图的配置。

    对于这种情况,我们有两种处理方式,一种是通过模态的方式跳转的下个VC,这个VC是隔离出来的,不在你之前的容器里,不会受到rootViewController的影响。

    而另一种我们需要改造一下根视图的配置:

    -(BOOL)shouldAutorotate {  
        return [[self.viewControllers lastObject] shouldAutorotate];  
    }  
    
    - (UIInterfaceOrientationMask)supportedInterfaceOrientations {  
         return [[self.viewControllers lastObject] supportedInterfaceOrientations];  
    }  
    
    - (UIInterfaceOrientation)preferredInterfaceOrientationForPresentation {  
        return [[self.viewControllers lastObject] preferredInterfaceOrientationForPresentation];  
    }
    

    或者

    -(BOOL)shouldAutorotate {
        if ([[self.viewControllers lastObject]isKindOfClass:[NewViewController class]]) {
            return YES;
        }
        return NO;
    }
    
    - (UIInterfaceOrientationMask)supportedInterfaceOrientations {
        if ([[self.viewControllers lastObject]isKindOfClass:[NewViewController class]]) {
            return UIInterfaceOrientationMaskLandscapeLeft;
        }
        return UIInterfaceOrientationMaskPortrait;
    }
    
    - (UIInterfaceOrientation)preferredInterfaceOrientationForPresentation {
        if ([[self.viewControllers lastObject]isKindOfClass:[NewViewController class]]) {
            return UIInterfaceOrientationLandscapeLeft;
        }
        return UIInterfaceOrientationPortrait;
    }
    

    可以看到我们通过获取push栈中的最后一个VC的属性,或指定特殊的VC来进行rootViewController的横竖屏设置。

    当然也可以通过NSNotificationCenter或者NSUserDefaults的方式对这里的值进行设置,在这里我就不过多赘述了。

    总之要知道优先级的问题,general == appDelegate >> rootViewController >> nomalViewController

    明白了权限的优先级以及开启的方法我想转屏就很显而易见了。

    5.横竖屏适配

    事实上旋转屏幕成功,对于iOS横竖屏问题我们只是完成了一半。另一半就是UI适配问题,其实这个要说起来就比较麻烦了,有些时候有很多case需要针对对应的业务条件来定制。但是无外乎几种实现思路。这里博主给大家抛几块砖哈:

    首先我们要知道,当发生转屏事件时,系统的回调方法是:

    - (void)viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
        
        if (size.width > size.height) { // 横屏
            // 横屏布局 balabala
        } else {
            // 竖屏布局 balabala
        }
    }
    

    首推的方式是使用约束布局,在使用约束布局时,横竖屏转换时,在通常情况下约束条件会很相似,所以在布局上会极大的减少代码量。其次如果有个别的特殊问题,可以在上面的回调方法里面进行微调。

    其次,对于转屏后,[UIScreen mainScreen].bounds.size以及self.view.frame.size的宽高系统会自动调换。即在横屏的时候width > height。所以在我们进行常规布局的时候我们可以选择控件的frame属性都与这两个属性进行比例换算。这样在当横竖屏转换的时候,重布局时,也会适应成对应屏幕下的布局。同样有需要特殊处理的布局,在上面的回调方法中进行细节微调即可。

    对于子视图,在横竖屏切换时,会触发子视图重布局的方法:

    - (void)layoutSubviews {
        [super layoutSubviews];
        // 通过状态栏电池图标来判断屏幕方向
        if ([UIApplication sharedApplication].statusBarOrientation == UIInterfaceOrientationMaskPortrait) {
            // 竖屏 balabala
        } else {
            // 横屏 balabala
        }
    }
    

    当然我只是说了几种比较简单的处理方式,和应对方法,对于整个项目都需要横竖屏适配的,我想还是一个比较复杂的过程。在实在处理不了的问题上,也可以通过写两套布局的方式来处理。至于过场动画,理论上如果你用约束和我说的比例布局的方式来写,基本系统会自动帮你这个问题给处理掉。但如果两种布局差距很大,你用了两套完全不同的布局,那这个你可能就要伤脑筋了。哈哈哈。不过有一些情况处理要求不严格的话可以使用截图过场大法来解决。不过这个就不是本文的设计范围了。大家如果感兴趣可以自己google一下。当然我日后的文章也可能会写到这了。到时候再来这里修改。

    6.总结

    iOS横竖屏适配,确实有很多坑,当然,有些坑是系统的;而有些坑,是因为我们的无知而造成的。所以多看多学多做多理解,必然能让你学到更多,增强填坑的硬实力。而对于横竖屏适配这块,转屏并不难,难的是横竖屏布局适配。博主只是简单的说了一些思路,至于实现起来,还是要针对对应的需求来进行处理。下面👇给大家链接几个博主觉得还不错的关于适配的文章,大家可以看看:

    iPad横竖屏下的代码适配

    iOS 屏幕适配,autoResizing autoLayout和sizeClass图文详解

    博主私人博客@HarwordLiu

    相关文章

      网友评论

      • 61a13fde3f8e:作者你好,当前我遇到一个横竖屏问题正好看到作者你的文章,想请教下作者;
        我模态到一个强制横屏的页面,点击某个事件触发跳转到appstore之类的会将屏幕强制竖屏,回来后界面就是竖屏界面,请问怎么再手动将页面强制回到原来的横屏呢
      • Mr_yinwei:怎么监测系统竖排按钮的关闭打开呢
        HarwordLiu:https://www.jianshu.com/p/4acdf1d25319
        HarwordLiu:这个是可以的,请看这篇文章
      • 47e2b53b72da:我在项目中设置了4个方向都支持,然后某个导航控制器中,我重写了以下方法:
        -(BOOL)shouldAutorotate
        {
        return YES;
        }

        -(UIInterfaceOrientationMask)supportedInterfaceOrientations
        {
        return UIInterfaceOrientationMaskLandscape;
        }

        这时候界面方向只支持横左和横右,但是状态栏却4个方向都支持,导致有时候状态栏方向与界面方向不符,请问这种情况有解决方案吗?
        47e2b53b72da:@HarwordLiu 经过一个上午的测试,发现这是ios9到11的一个bug,这个bug还存在于真机上,并不是代码或者项目配置有问题。现在界面方向与状态栏方向是一致的了。
        HarwordLiu:刚刚我在iOS 11的环境下进行了测试,按照你的配置,并不会出现你所说的问题。建议你捋一下你的视图控制器的继承逻辑,以及所有的控制器,VC的方向设置。测试demo如下https://github.com/HarwordLiu/RotationDemo,还有问题可以继续沟通。
        47e2b53b72da:我的是iOS11
      • 不辣先生:为啥我的旋转不了,老铁
      • unhangcorn:感谢,好人一生平安
      • ae45426ed2a5:大神厉害的,一语中的。小本本记下了。哪天月薪一万的时候,给大神赞赏10元。
      • 伦敦乡下的小作家:楼主,整个工程设置了横屏,但是某个页面强制竖屏,强制成功后,这个页面在手机横屏的状态下,页面是竖屏,但是状态栏横过来了,求解。
        HarwordLiu:能po一下 你强制竖屏的代码么?
      • 1c50fd446dcc:我的屏幕旋转之后self.view.frame的宽高并没有反过来啊。。 为什么?
        HarwordLiu:我亲测是会转的,如下面的示例图,
        http://orsg2lmcy.bkt.clouddn.com/QQ20170721-141814.png
        如果你的没有转换,可以给我提供更详细的信息,我帮你分析一下。
      • 89848af90932:请问为啥Pop回去的时候没有恢复之前的方向
        HarwordLiu: 可以在你横屏的VC中,在viewWillDisappeare中,使用上文setInterfaceOrientation:这条自定义方法,将屏幕方向转回。
      • 柳絮风微:请问为什么我在VC实现了- (void)viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator这个方法,然后屏幕也旋转了,但是这个方法还是没有回调的?
        HarwordLiu:@柳絮风微 可以的
        柳絮风微:@HarwordLiu 这两个就会调用,那直接在这两个方法搞横竖屏适配吗?
        HarwordLiu:正常情况下,发生屏幕翻转就会回调你提到的那个方法,但是由于你提供的信息太少,我无法判断,你可以尝试一下下面的这两个方法:
        - (void)viewWillLayoutSubviews; / - (void)viewDidLayoutSubviews;

      本文标题:关于iOS横竖屏适配

      本文链接:https://www.haomeiwen.com/subject/gqpewttx.html