iOS开发iOS UI

iOS Swift5从0到1系列（七）：不得不了解的知识——Sa

2021-03-13  本文已影响0人  青叶小小

一、前言

苹果在出了刘海屏后（iPhoneX），我们就需要考虑如何来适配竖屏、横屏的边界情况了。如果你百度过，你会发现非常多的，各种根据分辨率来判断是否是刘海屏而调整 UI 布局。然而，我们需要结合着应用的实际情况、使用人群、产品or公司要求，来考虑需要从哪个系统版本开始支持，例如：微信目前就是从 iOS 11 开始支持（IM 这块基本算是其一家独大），而对于电商APP这块，竞争非常的激烈，天猫、淘宝、pdd都还是从 iOS 9开始；站在这些APP的角度出发，电商是尽量不放过每一位用户，而微信是你周围朋友家人都使用，你如果系统低于 iOS 11，就可能『失联』，只能被迫升级至 iOS 11。本系列都是从 iOS 11开始，只是分享给大家学习。

二、适配考虑

2.1、iOS 11 前后差别

正如我在前言中所说，苹果第一款刘海屏手机是 iPhoneX，其搭载的 iOS 系统就是 11，因此，我们有如下适配选择：

2.2、为何需要考虑有无刘海屏的情况？

当我们开发无导航栏页面（一级页面）或自定义导航栏时，我们要关注的点是：

苹果在出刘海机型之前，内部肯定早就有了屏幕如何适配的解决方案，而其给出的方案就是：『SafeArea』，又称安全区域。对于 iOS 11+的系统，我们只需要拿到 UIViewController.view.safeAreaInsets，就能知道当前四周的边界值，然后，我们就能正确去约束我们的视图和控件。

\color{red}{因此，正确的适配方案是：}
我们应当通过获取 SafeArea 后来考虑适配，而不是采用硬编码的方式来适配（这种方式是无穷无尽，无法100%满足的）。

diff-screen-safe-area.png

上图通过 XIB 来更加直观的列举了两种屏幕在竖、横屏时的 SafeArea（安全区域），分别是：有刘海屏的（左一、二）和无刘海屏的（左三、四）XIB 。

如果你现在就动手去 coding，比如，尝试在 viewDidLoad 中去拿 SafeArea，实际上你拿出来的结果永远是 4 个 0；想要正确的获取 SafeArea 的值，我们需要先来理解一下 iOS 11 后，UIViewController 的生命周期方法及变动（大家先不看下一小节，也别百度谷歌，你能正确的说出来 UIViewController 的生命周期方式么？以及两个 VC 在 push & pop 后，生命周期又会调用哪些方法么？）。

三、UIViewController 生命周期

下图给出了正常的、完整的 UIViewController 生命周期方法流程图：

我们需要注意或了解的是：

lifecycle.png

图中已经给出了如何获取 SafeArea 的正确方法，下图将是举例如何设置一个 view 的两种方式：

two-ways-use-safe-area.png

源码如下：

class ViewController: BaseViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        title = "二级页面"
    }
    
    override func viewSafeAreaInsetsDidChange() {
        super.viewSafeAreaInsetsDidChange()
        
        print("view.safeAreaLayoutGuide = \(view.safeAreaLayoutGuide)")
        print("\n")
        print("view.safeAreaInsets = \(view.safeAreaInsets)")
        
        // 两种方法使用 SafeArea：
        // 1. safeAreaLayoutGuide: 就是 frame
        let area = UIView(frame: view.safeAreaLayoutGuide.layoutFrame)
        area.backgroundColor = UIColor(hexVal: 0x00007F7F)
        view.addSubview(area)


        // 2. safeAreaInsets: 就是四周边界，分别是 top, bottom, left, right
//        let area = UIView(frame: CGRect.zero)
//        area.backgroundColor = UIColor(hexVal: 0x00007F7F)
//        area.translatesAutoresizingMaskIntoConstraints = false
//        view.addSubview(area)
//
//        NSLayoutConstraint.activate([
//            area.topAnchor.constraint(equalTo: view.topAnchor, constant: view.safeAreaInsets.top),
//            area.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: view.safeAreaInsets.left),
//            area.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -view.safeAreaInsets.bottom),
//            area.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -view.safeAreaInsets.right)
//        ])
    }
}

四、附录（生命周期方法解析）

上一篇下一篇

猜你喜欢

热点阅读