iOS 填坑系列 - 横竖屏切换

概述

写代码就是在不断填坑的过程中慢慢成长,程序员哪有不遇坑的呢?

这篇文章来谈谈iOS中横竖屏切换的一些坑,横竖屏切换在App中很常见,本来我也以为做这个功能是很简单的一件事,但半年前我在做公司项目的过程中就遇到了不少麻烦,使用了一种比较tricky的方法,在屏幕方向切换时程序偶尔会崩掉,虽然后来经过修改解决了,但导致控制屏幕方向的代码散落在不同角落,不易阅读,维护起来更不方便。前阵子在写一个播放器JFPlayer时,采用了另一种比较好的方法,便在此总结一下各种坑吧。

这里分几种情况:

  • 所有界面都支持横竖屏切换
  • 只有一个(或几个)界面固定方向,其他界面支持横竖屏切换
  • 只有一个(或几个)界面支持横竖屏切换,其他界面固定方向

一般情形

所有界面都支持横竖屏切换

这是最简单的,只需要在【General】-->【Deployment Info】-->【Device Orientation】勾选上相应地方向就行了。


这样设备是竖屏时所有界面都是竖屏的,设备是横屏时所以界面都是横屏的。

注意:

这里有一个坑,在 iOS 9 以后,横屏时状态栏会隐藏,如果想要显示状态栏,需要手动控制。

Info.plist 中 设置 View controller-based status bar appearance 值为 YES,在 view controller 中重写 prefersStatusBarHidden 返回 false

override var prefersStatusBarHidden: Bool {
return false
}


## 特殊情形

### 只有一个(或几个)界面固定方向,其他界面支持横竖屏切换

其实这种情况一般比较少见,在【General】-->【Deployment Info】-->【Device Orientation】勾选希望支持的方向,然后在需要固定方向的视图控制器中实现如下两个方法即可。

```swift
override var shouldAutorotate: Bool {
    return true
}
    
override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
    return .landscape
}

只有一个(或几个)界面支持横竖屏切换,其他界面固定方向

这是最常见的情况,大多数App都会是这种需求,比如视频直播类App,只有一个界面需要支持横竖屏,其他界面都是竖屏。

这种情况有两种方法来实现。

方法一

设置设备仅支持竖屏,监听屏幕旋转的通知,在收到通知后手动旋转视图。

不推荐!!

在【General】-->【Deployment Info】-->【Device Orientation】勾选方向:


取消屏幕自动旋转:

override var shouldAutorotate: Bool {
    return false
}

viewDidLoad 中监听通知:

NotificationCenter.default.addObserver(self, selector: #selector(didChangeOrientation), name: NSNotification.Name.UIDeviceOrientationDidChange, object: nil)

控制视图旋转:

func didChangeOrientation() {
    if (UIDevice.current.orientation == .portrait) {
        UIView.animate(withDuration: 0.2, animations: {
            self.view.transform = .identity
            self.view.bounds = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
        })
    } else {
        
        UIView.animate(withDuration: 0.2, animations: { 
            self.view.transform = CGAffineTransform(rotationAngle: CGFloat(M_PI_2));
            self.view.bounds = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.height, height: UIScreen.main.bounds.width)
        })
    }
}
填坑一

这种方法需要精确地控制该界面的所有View(包括子View)的旋转以及旋转的方向,设备竖屏时和横屏时旋转的角度不一样,Home键在左和在右旋转的角度也不一样,在界面复杂时,特别麻烦,所以不推荐。

填坑二

因为只设置了竖屏,所以当横屏时,如果有键盘弹出,键盘是竖屏时的样式。

解决办法:在【General】-->【Deployment Info】-->【Device Orientation】中加上横屏时的方向。

注意:

在仅支持竖屏模式下,不能直接重载shouldAutorotate并返回true。程序会崩掉,并抛出这个错误

Terminating app due to uncaught exception 'UIApplicationInvalidInterfaceOrientation', reason: 'Supported orientations has no common orientation with the application, and [Demo.ViewController shouldAutorotate] is returning YES'

原因是,你如果设备仅支持竖屏,不能在view controller中控制界面自动旋转。

方法二

设置设备支持横竖屏,让其自动旋转,实现一个基类控制器只支持一个方向,其他固定方向的界面继承基类,同时监听屏幕旋转通知,处理一些特殊需求。

强烈推荐!!

在【General】-->【Deployment Info】-->【Device Orientation】勾选方向:


在基类控制器中重写两个控制横竖屏的方法:

class BaseViewController: UIViewController {
    override var shouldAutorotate: Bool {
        return true
    }
    
    override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
        return .portrait
    }

}
填坑一

如果VieController 是放在UINavigationController或者UITabBarController中,需要重写它们的方向控制方法。

class RootNavigationController: UINavigationController {
    override var shouldAutorotate: Bool {
        guard let topViewController = topViewController else {
            return true
        }
        return topViewController.shouldAutorotate
    }
    
    override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
        guard let topViewController = topViewController else {
            return .all
        }
        return topViewController.supportedInterfaceOrientations
    }
    
    override var preferredStatusBarStyle: UIStatusBarStyle {
        guard let topViewController = topViewController else {
            return .default
        }
        return topViewController.preferredStatusBarStyle
    }
}
填坑二

播放器中都会有这样一个功能,点击按钮将界面变成全屏,该怎样做呢?

答案是:将设备强制横屏,改变状态栏方向

func fullScreenButtonPressed(_ button: UIButton?) {
        
    // force change device and status bar orientation, that toggle the UIApplicationDidChangeStatusBarOrientation notification
    if isFullScreen {
        
        UIDevice.current.setValue(UIInterfaceOrientation.portrait.rawValue, forKey: "orientation")
        updateStatusBarAppearanceHidden(false)
        UIApplication.shared.statusBarOrientation = .portrait
    } else {
        
        UIDevice.current.setValue(UIInterfaceOrientation.landscapeRight.rawValue, forKey: "orientation")
        updateStatusBarAppearanceHidden(false)
        UIApplication.shared.statusBarOrientation = .landscapeRight
    }
}

其实在 stackoverflow 上你能搜到另外一个答案

- (void)interfaceOrientation:(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];
    }
}

// 横屏
- (IBAction)landscapAction:(id)sender {
    [self interfaceOrientation:UIInterfaceOrientationLandscapeRight];
}

// 竖屏
- (IBAction)portraitAction:(id)sender {
    [self interfaceOrientation:UIInterfaceOrientationPortrait];
}

但我不知道如何将这段代码改为Swift,也不知道这段代码在 iOS 10 下是否仍然奏效。

填坑三

在大多数视频类App中,播放视频的窗口一开始是在界面上方的一小块区域,点击全屏按钮或设备横屏时才全屏的,该如何实现这个功能呢?

可能你们会想,我们可以监听设备旋转的通知,在设备旋转时,判断现在是横屏还是竖屏,然后改变view的约束条件(constraint)来改变大小。

这里有一个小技巧,我们只需要设置好view的长宽比与屏幕的长宽比一致就可以了,一切交给 auto layout,不用我们去操心。

// push入这个控制器的上一个控制器必须只支持竖屏,不然在手机横着时,push入这个控制器时视频的尺寸有问题。
player.snp.makeConstraints { (make) in
    make.top.equalTo(view.snp.top)
    make.left.equalTo(view.snp.left)
    make.right.equalTo(view.snp.right)
    make.height.equalTo(view.snp.width).multipliedBy(UIScreen.main.bounds.width/UIScreen.main.bounds.height)
    // 宽高比也可以为 16:9
}

注意:

使用上述技巧时,push入这个控制器的上一个控制器必须只支持竖屏,不然在手机横着时,push入这个控制器时视频的尺寸有问题。

其他方法

本来还有另外一种方法的,但只在 iOS 9下有效,半年前我用的就是这个方法。我在写这篇文章时重新试了下,发现在iOS 10下已经行不通了,也在这里记录下吧。

AppDelegate 中声明一个属性 allowRotation 来标记是否允许旋转,实现如下方法控制横竖屏:

func application(_ application: UIApplication, supportedInterfaceOrientationsFor window: UIWindow?) -> UIInterfaceOrientationMask {
    if allowRotation {
        return .landscape
    }
    return .portrait
}

然后在控制器的viewWillAppear方法中,把 allowRotation 设为 true,这样界面就会横屏显示了。

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    
    let appDelegate = UIApplication.shared.delegate as? AppDelegate
    appDelegate?.allowRotation = true
}

这里也有一个坑,在view退出前,要把 allowRotation 设为 false, 不然退出后,之前竖屏显示的界面会变成横屏。

override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)
    
    let appDelegate = UIApplication.shared.delegate as? AppDelegate
    appDelegate?.allowRotation = false
}

其实在 iOS 9下还有其他坑的,需要在这个控制器的界面显示或消失是精确地修改 allowRotation 的值,比如在该界面横屏时弹出竖屏的登录窗口、在该界面横屏时退回来竖屏的界面等,不然随时会闪退,总之就是会有一些乱七八糟意料之外的错误出现,但现在我的系统已经升级为 iOS 10 了,已经无法重现了。

这不是一个好方法,也不推荐使用!!

总结

  • 控制横竖屏切换还是使用系统默认的方式最好,不用去操心子view是否旋转,旋转的方向等,也可以避免一些奇奇怪怪的问题发生,少踩一些坑!!故推荐方法二
  • iOS 每升级一个版本都会有一些方法不能用,导致频频闪退,巨坑!!
  • 使用的方法不对必然会踩一些莫名其妙的坑,在此谨记。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容

  • iOS 中横竖屏切换的功能,在开发iOS app中总能遇到。以前看过几次,感觉简单,但是没有敲过代码实现,最近又碰...
    零度_不结冰阅读 2,149评论 0 0
  • IOS 设备横竖屏情况 一般情形 所有界面都支持横竖屏切换如果App的所有切面都要支持横竖屏的切换,那只需要勾选【...
    leonardni阅读 1,762评论 0 0
  • 关于横竖屏适配,有一句说一句,坑挺深的。之前做Vision和毕设的时候就处理过横竖屏问题,不过当时的功力太浅,明显...
    HarwordLiu阅读 37,190评论 26 137
  • 现在是深圳12点的夜 窗外时不时飘来落雨的声音 窸窸窣窣 下下停停 或许这是深圳的气候特色 又或许这只是夏雨惯用的...
    佛曳香阅读 143评论 1 1
  • 可以开始写了吗 这和印象笔记好像没区别 好像还不能加表情包
    知娱之乐阅读 184评论 0 0