iOS横竖屏旋转内容总结

一、前言

Swift版本 4.0

Xcode版本 9.2

以前接触到的项目需求中,几乎都是全竖屏展现界面,所以我也来得省事,直接在TARGETS中的界面方向选项中只勾选竖屏,这样就满足了需求。

但最近的项目中,产品突然增加了一个需求,需要部分界面支持旋转,这才来研究了一下屏幕旋转的问题!

需要紧急解决问题的道友直接看3.3

二、屏幕旋转相关知识

2.1 三个方向的理解和联系

UIDeviceOrientation: 设备方向

public enum UIDeviceOrientation : Int {
 case unknown
 case portrait // 设备vertically方向, home键在下方
 case portraitUpsideDown // 设备vertically方向, home键在上方
 case landscapeLeft // 设备horizontally方向, home键在右方
 case landscapeRight // 设备horizontally方向, home键在左方
 case faceUp // 设备flat方向, 屏幕朝上
 case faceDown // 设备flat方向, 屏幕朝下
}

从设备方向的命名就能看出来这个枚举的含义,这里指的是物理设备(即iPhone)的方向。

UIInterfaceOrientation: 界面方向

public enum UIInterfaceOrientation : Int {
 case unknown
 case portrait
 case portraitUpsideDown
 case landscapeLeft
 case landscapeRight
}

而界面方向指屏幕中显示内容的方向,它的方向和Home键的方向是一致的。仔细观察一下屏幕旋转就能理解UIDeviceOrientation和UIInterfaceOrientation了,我们把手机转向左边,可以看到界面随之才转向右边。

UIInterfaceOrientationMask: 是用来控制允许转向的方向,对应UIInterfaceOrientation

public struct UIInterfaceOrientationMask : OptionSet {
 public init(rawValue: UInt)
 public static var portrait: UIInterfaceOrientationMask { get }
 public static var landscapeLeft: UIInterfaceOrientationMask { get }
 public static var landscapeRight: UIInterfaceOrientationMask { get }
 public static var portraitUpsideDown: UIInterfaceOrientationMask { get }
 public static var landscape: UIInterfaceOrientationMask { get }
 public static var all: UIInterfaceOrientationMask { get }
 public static var allButUpsideDown: UIInterfaceOrientationMask { get }
}

2.2 观察屏幕旋转并作出响应

2.2.1 观察设备方向并响应

// 没有生成通知
if !UIDevice.current.isGeneratingDeviceOrientationNotifications {
 // 生成通知
  UIDevice.current.beginGeneratingDeviceOrientationNotifications()
}
// 锁定竖屏,依然有效,例如faceUp.
NotificationCenter.default.addObserver(self,
          selector: #selector(handleDeviceOrientationChange(notification:)),       name:NSNotification.Name.UIDeviceOrientationDidChange,
          object: nil)
@objc private func handleDeviceOrientationChange(notification: Notification) {
 // 获取设备方向
 let orientation = UIDevice.current.orientation
 switch orientation {
  case .landscapeRight:
   // iOS8之后,横屏UIScreen.main.bounds.width等于竖屏时的UIScreen.main.bounds.height
   print(UIScreen.main.bounds.width)
   print("landscapeRight")
  default: break
 }
}

注销

deinit {
 NotificationCenter.default.removeObserver(self)
 UIDevice.current.endGeneratingDeviceOrientationNotifications()
}

2.2.2 观察界面方向并响应

和上面类似不过观察的name为

// 锁定竖屏,无效,通知方法不会触发
NSNotification.Name.UIApplicationWillChangeStatusBarOrientation
NSNotification.Name.UIApplicationDidChangeStatusBarOrientation

获取界面方向

let statusBarOrientation = UIApplication.shared.statusBarOrientation

2.2.3 建议

这里建议监听界面方向,原因有二:

监听设备方向,会返回多个方向,例如portrait和faceUp不冲突。

监听设备方向,上面提到,先是设备旋转,随之界面旋转,这里就有一个问题,我们操作界面时,可能界面还没有旋转。

三、问题解决实战

需要实现部分界面可旋转,部分界面锁定竖屏,首先我们需要配置TARGETS中的Device Orientation,这里是总开关,默认勾选了如图方向:

如果你确定整个项目只有竖屏,直接只勾选Protrait完事,不过像我现在这样,可能突然一个需求改变就不得不继续适配,哈哈。

这里的配置不要和代码控制的方向相冲突,不然会引发奔溃。

3.1 控制屏幕旋转的函数

// 默认为true
override var shouldAutorotate: Bool {
 return true
}
// 支持的旋转方向
override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
 return .landscapeLeft
}
// 模态切换的默认方向
override var preferredInterfaceOrientationForPresentation: UIInterfaceOrientation {
 return .landscapeRight
}

这三个属性都重写的UIViewController的属性。哎,看到模态切换,这里再给自己挖坑一个,以前研究了一会模态切换,只不过没写成总结,后面会写出来(:。

并且这三个方法会受到控制器层级的影响,也就是如果当前控制器配置支持旋转,如果他的导航控制器,乃至Tabbar控制器不支持旋转,当前控制器的配置也不会生效。

3.2 不同根控制器情况下的解决

核心问题: 需要旋转的界面是少数,大多界面需要锁定竖屏。

3.2.1 根控制器为UIViewController

对应Demo配置:

这种情况的APP可以说是非常少了,不过还是对后面的情况有所帮助。

设置BaseVC,在其中的配置锁定竖屏:

class BaseVC: UIViewController {
 override var shouldAutorotate: Bool {
  return false
 }
 override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
  return .portrait
 }
 override var preferredInterfaceOrientationForPresentation: UIInterfaceOrientation {
  return .portrait
 }
 override func viewDidLoad() {
  super.viewDidLoad()
 }
}

然后其余控制器继承BaseVC,需要旋转的控制器单独再次重写方法。

3.2.2 根控制器为UINavigationController

对应Demo配置:

我们可以获取到当前显示层级的控制器,并拿出它的属性赋给UINavigationController

class BaseNavC: UINavigationController {
 override var shouldAutorotate: Bool {
  return self.viewControllers.last?.shouldAutorotate ?? false
 }
 override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
  return self.viewControllers.last?.supportedInterfaceOrientations ?? .portrait
 }
 override var preferredInterfaceOrientationForPresentation: UIInterfaceOrientation {
  return self.viewControllers.last?.preferredInterfaceOrientationForPresentation ?? .portrait
 }
 override func viewDidLoad() {
  super.viewDidLoad()
 }
}

3.2.3 根控制器为UITabBarController

对应Demo配置:

class BaseTabBarC: UITabBarController {
 override var shouldAutorotate: Bool {
  return self.selectedViewController?.shouldAutorotate ?? false
 }

 override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
  return self.selectedViewController?.supportedInterfaceOrientations ?? .portrait
 }

 override var preferredInterfaceOrientationForPresentation: UIInterfaceOrientation {
  return self.selectedViewController?.preferredInterfaceOrientationForPresentation ?? .portrait
 }

 override func viewDidLoad() {
  super.viewDidLoad()
 }
}

同理,我们只需要获取当前选中的控制器的配置赋给UITabBarController,这样一层一层就配置好了!

3.3 最简单的实现方式

对应Demo配置:

在查询屏幕旋转相关资料的时候我发现屏幕旋转时会最后调用Appdelegate中的:

func application(_ application: UIApplication, supportedInterfaceOrientationsFor window: UIWindow?)
-> UIInterfaceOrientationMask {
}

然后我立马想到一个超级简单的方法,那就是定义一个全局变量或者缓存一个bool值来进行判断,如下:

func application(_ application: UIApplication, supportedInterfaceOrientationsFor window: UIWindow?)
-> UIInterfaceOrientationMask {
 if isAllowAutorotate {
  return [.portrait, .landscapeLeft, .landscapeRight]
 }
 else {
  return .portrait
 }
}

然后默认isAllowAutorotate这个全局变量为false,在需要旋转的控制器中:

override func viewWillAppear(_ animated: Bool) {
  super.viewWillAppear(animated)
  isAllowAutorotate = false
 }

 override func viewWillDisappear(_ animated: Bool) {
  super.viewWillDisappear(animated)
  isAllowAutorotate = true
 }
}

这样就不用麻烦的去搞那些继承什么的了!

四、后记和Demo

https://github.com/swordjoy/ScreenRotationDemo

以上就是本次小编整理的全部内容,感谢大家的支持,如果还有任何相关问题可以在下方的留言区讨论。

(0)

相关推荐

  • iOS横竖屏旋转内容总结

    一.前言 Swift版本 4.0 Xcode版本 9.2 以前接触到的项目需求中,几乎都是全竖屏展现界面,所以我也来得省事,直接在TARGETS中的界面方向选项中只勾选竖屏,这样就满足了需求. 但最近的项目中,产品突然增加了一个需求,需要部分界面支持旋转,这才来研究了一下屏幕旋转的问题! 需要紧急解决问题的道友直接看3.3 二.屏幕旋转相关知识 2.1 三个方向的理解和联系 UIDeviceOrientation: 设备方向 public enum UIDeviceOrientation : I

  • Android 横竖屏处理的知识小结

    Android 手机一般都支持横竖屏旋转,系统也会提供一个设置,控制允不允许旋转.这里对如何在 App 中控制界面的旋转方向做一个小结. 界面旋转方向的决定因素 决定一个界面显示为横屏/竖屏的因素有几个: 系统的设置项,一般可以设置为只允许竖屏或可旋转切换. 设备的物理传感器感应到的设备方向. 不同 App 里的代码对横竖屏的设置. 需要注意的一点是,这三个因素没有固定的优先级.所以即使系统的设置项中设置了固定为竖屏,App 里的代码也可以将界面设置为横屏,当然影响的范围仅限于 App 内部界面

  • vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)

    对于vue-video-player,从github上找到一段代码,直接放页面!可以了,视频展示出来了!开始下一个功能.... 这可能是大部分前端开发者一贯的思维模式,拿来一个插件,看着demo就做出来了,功能展示正常就OK了,但是一旦出了bug,就会面向百度编程或者面向Google编程! 其实,我也是这样的,哈哈哈哈..... 废话不多说,最近在做一个视频播放的功能,找到vue-video-player插件后,咔咔咔完事,拿着我的爱疯,完美演绎!但是其他人的国产某牌手机,展示的完全不一样,打开

  • js判断移动端横竖屏视口检测实现的几种方法

    目录 1.不同视口的获取方法 2.JavaScript检测横竖屏 3.CSS检测横竖屏 4.meta标签属性设置 5.meta标签属性设置设置刘海屏&底部小黑条 1.不同视口的获取方法 // 获取视觉视口大小(包括垂直滚动条) let iw = window.innerWidth, ih = window.innerHeight; console.log(iw, ih); // 获取视觉视口大小(内容区域大小,包括侧边栏.窗口镶边和调整窗口大小的边框) let ow = window.outer

  • android中Activity横竖屏切换的那些事

    讲解之前需要说明的是 旋转屏幕:在系统的自动旋转屏幕开启的情况下,我们旋转屏幕 手动设置屏幕:我们自己去调用Activity的 setRequestedOrientation 方法. 设置屏幕的方向 简介 值 描述 unspecified 默认值.系统自动选择屏幕方向 behind 跟activity堆栈中的下面一个activity的方向一致 landscape 横屏方向,显示的宽比高长 portrait 竖屏方向,显示的高比宽长 sensor 由设备的物理方向传感器决定,如果用户旋转设备,这屏

  • JS检测移动端横竖屏的代码

    使用media来判断屏幕宽度遇到的问题: ios上当我旋转屏幕的时候可行,但是安卓机上没反应,横屏显示的还是我竖屏的样式. 查了一下资料,css3的media如果要在移动端有较好的显示效果,需要在页头加上这段代码 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 可是这段代码我不能用.因为我

  • 解决Android手机屏幕横竖屏切换

    Android中当屏幕横竖屏切换时,Activity的生命周期是重新加载(说明当前的Activity给销毁了,但又重新执行加载), 怎么使屏幕横竖屏切换时,当前的Activity不销毁呢? 1. 在AndroidManifest.xml中为Activity设置configChanges属性, application android:icon="@drawable/icon" android:label="@string/app_name"> <activ

  • Android 实现视频字幕Subtitle和横竖屏切换示例

    系统自带的VideoView有些视频格式不支持,那么我们可以用第三方实现的VideoView替代系统的来播放视频,比较流行的有ijkplayer.vitamio. 最近有个需求就是需要给视频添加字幕,其实也挺简单的.字幕比较常用的格式是srt,实际它就是文本,把它解析出来,然后根据时间再展示就OK.还有就是实现了即使旋转按钮关闭,根据方向感应器也能做到横竖屏切换. 本文用的是系统VideoView,然后播放sd卡中的视频来作为演示(源码中带有f2.mp4和f2.srt,运行时拷贝到sd卡就行).

  • Android开发使用Activity嵌套多个Fragment实现横竖屏切换功能的方法

    本文实例讲述了Android开发使用Activity嵌套多个Fragment实现横竖屏切换功能的方法.分享给大家供大家参考,具体如下: 一.上图 二.需求 近期项目遇到个横竖屏切换的问题,较为复杂,在此记之. 1.Activity中竖屏嵌套3个Fragment,本文简称竖屏FP1,FP2,FP3. 2.其中竖屏FP1与FP2可以切换为横屏的FL1,FL2,即竖屏FP1切换到对应的横屏FL1,竖屏FP2对应切换到横屏FL2. 3.FP3不允许横竖屏切换. 4.竖屏FP1,FP2,FP3用ViewP

  • Android横竖屏切换及其对应布局加载问题详解

    本文为大家分享了Android横竖屏切换及其对应布局加载问题,供大家参考,具体内容如下 第一,横竖屏切换连带横竖屏布局问题: 如果要让软件在横竖屏之间切换,由于横竖屏的高宽会发生转换,有可能会要求不同的布局. 可以通过以下两种方法来切换布局: 1)在res目录下建立layout-land和layout-port目录,相应的layout文件名不变,比如:layout-land是横屏的layout,layout-port是竖屏的layout,其他的不用管,横竖屏切换时程序调用Activity的onC

随机推荐