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

有些时候我们需要用特定方向展示某些页面(例如固定横屏展示),而不影响其它页面。例如一些 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 来决定方向

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,561评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,218评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,162评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,470评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,550评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,806评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,951评论 3 407
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,712评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,166评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,510评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,643评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,306评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,930评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,745评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,983评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,351评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,509评论 2 348

推荐阅读更多精彩内容