美文网首页
iOS - 自由控制页面横竖屏展示

iOS - 自由控制页面横竖屏展示

作者: DesmondDAI | 来源:发表于2017-11-06 14:40 被阅读24次

有些时候我们需要用特定方向展示某些页面(例如固定横屏展示),而不影响其它页面。例如一些 app 固定用横屏播放视频。这种情况下,我们就需要在代码中控制。

注:所有代码均使用 Swift 4.0

要点

  1. 涉及的 view controller 属性:shouldAutorotate, supportedInterfaceOrientations, preferredInterfaceOrientationForPresentation
  2. info.plistDevice Orientation 需要把所有会在 app 里出现的页面方向选上,如下图:
info.plist 里的 Device Orientation
  1. 当使用 container controller (UITabBarController, UINavigationController)包裹 view controller 时,系统通过查询 container controller 的
    supportedInterfaceOrientationsshouldAutorotate 属性来决定方向
    • 注意:在 navigation controller push/pop view controller,或在 tab bar controller 里改变 selected view controller时,不应该改变 view controller 的页面方向。因为前后 view controller 页面方向不同的话,会出现不连贯的奇怪过场动画,更重要的是也不符合 container controller 的使用标准。下面会用例子说明。
  2. present view controller 时,系统则通过查询 presented view controller 的 supportedInterfaceOrientations, shouldAutorotate, preferredInterfaceOrientationForPresentation 三个属性来决定方向

官方文档解释

在看代码之前,需要先了解这三个属性的定义。

  • shouldAutorotate: Bool 类型的属性,决定能否切换页面方向。默认情况下返回 true, 需要配合着 supportedInterfaceOrientations 使用,看条目 supportedInterfaceOrientations 的解释。

  • supportedInterfaceOrientations: bit mask 类型的属性,Swift 下可以使用 UIInterfaceOrientation enum 值的 Set 表示。使用情景是当系统检测到设备方向改变时,会访问 container controllerpresented view controller 的这个属性来获取目前所支持的页面方向,当返回值包括设备新的页面方向时,系统会继续访问 shouldAutorotate 来决定是否旋转页面;当返回值不包括时,系统则不会继续访问 shouldAutorotate

  • preferredInterfaceOrientationForPresentation: UIInterfaceOrientation enum 类型的属性,当在 full screen 下 present view controller 时,系统访问此属性来决定 presented view controller 的页面方向。这里要注意两点:

    1. 只有在 modalPresentationStylefull screen 时才适用,其它 style 下不会被访问
    2. preferredInterfaceOrientationForPresentation 必须是 supportedInterfaceOrientations 的子集,否则当 present 此页面时 app 会强退

单纯文字太抽象,以下通过代码来详细描述各个情况下的设定。所有代码均使用 Swift 4 书写,如果是 Objective-C, override 相应方法即可。

使用 container controller 的例子

例子使用 tab bar controller -> navigation controller -> view controller 的层级结构:

view controller 结构

根据所在页面控制是否跟随设备方向来改变页面方向的效果:

在 container controller 里控制页面方向

实现思路是,在所有 container 里实现 shouldAutorotatesupportedInterfaceOrientations,返回展示的最上层的 view controller 的设置。
在 tabbar controller 里:

    override var shouldAutorotate: Bool {
        return selectedViewController?.shouldAutorotate ?? false
    }
    
    override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
        return selectedViewController?.supportedInterfaceOrientations ?? .portrait
    }

在 navigation controller 里:

    override var shouldAutorotate: Bool {
        return topViewController?.shouldAutorotate ?? false
    }
    
    override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
        return topViewController?.supportedInterfaceOrientations ?? .portrait
    }

因此在 view controller 里就可以返回需要的值来决定起页面方向配置。

注意:不建议在同一个 container controller 里前后 view controller 方向不一致的设定,否则会出现不对称的过场动画。
如下例子是竖屏 push横屏 pop 后,下次竖屏 push 完后的竖屏 pop 动画还是会和横屏 pop 一样:

依旧是横屏 pop 的过场动画

目前我知道的解决办法是:在可以变换页面方向的 view controller 里换回竖屏 pop。

Present 例子

Present view controller 相对来说自由很多,个人认为是因为这种方式无论是相互关系和 UI 关联性都比较独立于 container controller。你可以 present 任意方向的 view controller,同时 dismiss 时的方向也不会影响下次 present 后的 dismiss 方向。
一个固定 landscapeLeft present 的例子:

固定 landscapeLeft present

present 需要在 presented view controller 里实现三个属性:

    override var shouldAutorotate: Bool {
        return false
    }
    
    override var preferredInterfaceOrientationForPresentation: UIInterfaceOrientation {
        return .landscapeLeft
    }
    
    override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
        return .landscapeLeft
    }

上文提过,present 的这种使用需要 modalPresentationStylefull screenpreferredInterfaceOrientationForPresentation 必须是 supportedInterfaceOrientations 的子集。

同时这里多实现的 preferredInterfaceOrientationForPresentation 是用于控制 presented view controller 出现时的方向。无论设备或者 presenting view controller 是什么方向,presented view controller 的方向都会根据此属性来设置。

总结

  • view controller 的页面横竖屏通过三个属性控制:shouldAutorotatepreferredInterfaceOrientationForPresentationsupportedInterfaceOrientations
  • info.plistDevice Orientation 需要包括 app 里所有可能出现的页面方向
  • 当使用 container controller 时,系统通过调用 container controller 的 shouldAutorotatesupportedInterfaceOrientations 来决定方向
    • container controller 里的前后 view controllers 的方向建议保持一致
  • 当 present view controller 时,系统通过调用presented view controllershouldAutorotatepreferredInterfaceOrientationForPresentationsupportedInterfaceOrientations 来决定方向

欢迎任何意见交流 :)
实例项目请点 这里

相关文章

  • iOS - 自由控制页面横竖屏展示

    有些时候我们需要用特定方向展示某些页面(例如固定横屏展示),而不影响其它页面。例如一些 app 固定用横屏播放视频...

  • iOS实录11:代码处理iOS的横竖屏旋转

    [这是第11篇] 导语: iOS App中大多数页面是只展示竖屏下的效果,但是少部分页面需要支持横竖屏。本文分别介...

  • iOS的横、竖屏和旋转

    前言: iOS App中大多数页面是只展示竖屏下的效果,但是少部分页面需要支持横竖屏。本文分别介绍监听屏幕旋转方向...

  • 关于iOS横竖屏适配

    关于iOS横竖屏适配 关于iOS横竖屏适配

  • iOS 页面横竖屏

    当App启动的时候需要强制竖屏,进入App后允许横屏或者竖屏的解决办法: 1、修改App-Info.plist文件...

  • iOS 横竖屏总结笔记

    项目APP中总会遇到某些页面需要横屏展示,其他页面默认竖屏展示。所以总结了一套自己使用的横竖屏方法。 首先我查看U...

  • iOS: 手机 支持屏幕 方向

    [经验]iOS app整体是竖屏(横屏),某个页面却支持横竖屏](http://blog.csdn.net/hhe...

  • iOS 切换横竖屏

    参照:iOS强制转换横竖屏和键盘方向控制 实现点击按钮切换横竖屏的功能,设备锁屏无影响。效果如图所示: 然后,就是...

  • [iOS]终极横竖屏切换解决方案

    [iOS]终极横竖屏切换解决方案 [iOS]终极横竖屏切换解决方案

  • iOS 横竖屏

    iOS横竖屏

网友评论

      本文标题:iOS - 自由控制页面横竖屏展示

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