有些时候我们需要用特定方向展示某些页面(例如固定横屏展示),而不影响其它页面。例如一些 app 固定用横屏播放视频。这种情况下,我们就需要在代码中控制。
注:所有代码均使用 Swift 4.0
要点
- 涉及的 view controller 属性:
shouldAutorotate
,supportedInterfaceOrientations
,preferredInterfaceOrientationForPresentation
- info.plist 的 Device Orientation 需要把所有会在 app 里出现的页面方向选上,如下图:
- 当使用 container controller (
UITabBarController
,UINavigationController
)包裹 view controller 时,系统通过查询 container controller 的
supportedInterfaceOrientations
和shouldAutorotate
属性来决定方向- 注意:在 navigation controller push/pop view controller,或在 tab bar controller 里改变 selected view controller时,不应该改变 view controller 的页面方向。因为前后 view controller 页面方向不同的话,会出现不连贯的奇怪过场动画,更重要的是也不符合 container controller 的使用标准。下面会用例子说明。
- 当 present view controller 时,系统则通过查询 presented view controller 的
supportedInterfaceOrientations
,shouldAutorotate
,preferredInterfaceOrientationForPresentation
三个属性来决定方向
官方文档解释
在看代码之前,需要先了解这三个属性的定义。
shouldAutorotate: Bool 类型的属性,决定能否切换页面方向。默认情况下返回 true, 需要配合着
supportedInterfaceOrientations
使用,看条目supportedInterfaceOrientations
的解释。supportedInterfaceOrientations: bit mask 类型的属性,Swift 下可以使用
UIInterfaceOrientation
enum 值的 Set 表示。使用情景是当系统检测到设备方向改变时,会访问 container controller 或 presented view controller 的这个属性来获取目前所支持的页面方向,当返回值包括设备新的页面方向时,系统会继续访问shouldAutorotate
来决定是否旋转页面;当返回值不包括时,系统则不会继续访问shouldAutorotate
。-
preferredInterfaceOrientationForPresentation:
UIInterfaceOrientation
enum 类型的属性,当在 full screen 下 present view controller 时,系统访问此属性来决定 presented view controller 的页面方向。这里要注意两点:- 只有在
modalPresentationStyle
为 full screen 时才适用,其它 style 下不会被访问 -
preferredInterfaceOrientationForPresentation
必须是supportedInterfaceOrientations
的子集,否则当 present 此页面时 app 会强退
- 只有在
单纯文字太抽象,以下通过代码来详细描述各个情况下的设定。所有代码均使用 Swift 4 书写,如果是 Objective-C, override 相应方法即可。
使用 container controller 的例子
例子使用 tab bar controller -> navigation controller -> view controller 的层级结构:
根据所在页面控制是否跟随设备方向来改变页面方向的效果:
实现思路是,在所有 container 里实现 shouldAutorotate
和 supportedInterfaceOrientations
,返回展示的最上层的 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 一样:
目前我知道的解决办法是:在可以变换页面方向的 view controller 里换回竖屏 pop。
Present 例子
Present view controller 相对来说自由很多,个人认为是因为这种方式无论是相互关系和 UI 关联性都比较独立于 container controller。你可以 present 任意方向的 view controller,同时 dismiss 时的方向也不会影响下次 present 后的 dismiss 方向。
一个固定 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 的这种使用需要 modalPresentationStyle
为 full screen 且 preferredInterfaceOrientationForPresentation
必须是 supportedInterfaceOrientations
的子集。
同时这里多实现的 preferredInterfaceOrientationForPresentation
是用于控制 presented view controller 出现时的方向。无论设备或者 presenting view controller 是什么方向,presented view controller 的方向都会根据此属性来设置。
总结
- view controller 的页面横竖屏通过三个属性控制:
shouldAutorotate
,preferredInterfaceOrientationForPresentation
,supportedInterfaceOrientations
- info.plist 的 Device Orientation 需要包括 app 里所有可能出现的页面方向
- 当使用 container controller 时,系统通过调用 container controller 的
shouldAutorotate
和supportedInterfaceOrientations
来决定方向- container controller 里的前后 view controllers 的方向建议保持一致
- 当 present view controller 时,系统通过调用presented view controller 的
shouldAutorotate
,preferredInterfaceOrientationForPresentation
,supportedInterfaceOrientations
来决定方向
欢迎任何意见交流 :)
实例项目请点 这里