001 iOS 11 Safe Area(安全距离) 是个什么屎

• 检索词条:safeAreaInsets iOS 11 安全距离 适配iPhoneX viewSafeAreaInsetsDidChange iOS 11安全距离什么时候被改变
• 环境 iOS 11 Xcode9.0 以上(这里也会介绍如果你和你的同事两个人的Xcode一个是9.0以上 一个是9.0以下情况的解决办法)

iOS 7 之后苹果给 UIViewController 引入了 topLayoutGuide 和 bottomLayoutGuide 两个属性来描述不希望被透明的状态栏或者导航栏遮挡的最高位置(status bar, navigation bar, toolbar, tab bar 等)。这个属性的值是一个 length 属性( topLayoutGuide.length)。 这个值可能由当前的 ViewController 或者 NavigationController 或者 TabbarController 决定。

• 一个独立的ViewController，不包含于任何其他的ViewController。如果状态栏可见，topLayoutGuide表示状态栏的底部，否则表示这个ViewController的上边缘。
• 包含于其他ViewController的ViewController不对这个属性起决定作用，而是由容器ViewController决定这个属性的含义：
• 如果导航栏（Navigation Bar）可见，topLayoutGuide表示导航栏的底部。
• 如果状态栏可见，topLayoutGuide表示状态栏的底部。
• 如果都不可见，表示ViewController的上边缘。
  这部分还比较好理解，总之是屏幕上方任何遮挡内容的栏的最底部。

iOS 11 开始弃用了这两个属性， 并且引入了 Safe Area 这个概念。苹果建议: 不要把 Control 放在 Safe Area 之外的地方

// These objects may be used as layout items in the NSLayoutConstraint API
    @available(iOS, introduced: 7.0, deprecated: 11.0)
    open var topLayoutGuide: UILayoutSupport { get }
    @available(iOS, introduced: 7.0, deprecated: 11.0)
    open var bottomLayoutGuide: UILayoutSupport { get }

那么今天我们就来研究一下这个iOS 11的新 API

UIView 中的 safe area

• iOS 11 中 UIViewController 的 topLayoutGuide 和 bottonLayoutGuide 两个属性被 UIView 中的 safe area 替代了。

@available(iOS 11.0, *)
    open var safeAreaInsets: UIEdgeInsets { get }
    @available(iOS 11.0, *)
    open func safeAreaInsetsDidChange()

safeAreaInsets

    这个属性表示相对于屏幕四个边的间距， 而不仅仅是顶部还有底部。这么说好像没有什么感觉, 我们来看一看这个东西分别在 iPhone X 和 iPhone 8 中是什么样的吧！
    什么都没有做, 只是新建了一个工程然后在 Main.storyboard 中的 UIViewController 中拖了一个浅蓝色的 View 并且设置约束为:

Snip20171104_3.png

运行结果:
iPhone 8 VS iPhone X Safe Area (竖屏)

Snip20171104_4.png

iPhone 8 VS iPhone X Safe Area (横屏)

Snip20171104_5.png

这样对比可以看出, iPhone X 同时具有上下, 还有左右的 Safe Area。

注意

安全距离改变时机

• 这里有一个坑要踩踩了一开始笔者也是在这个坑了踩了很久 还以为苹果搞个安全距离的概念来忽悠我们的 如果我们在ViewController - (void)viewDidLoad来打印self.view.safeAreaInsets会发现始终 显示 self.view.safeAreaInsets = {0, 0, 0, 0} 这里有一个新的APIviewSafeAreaInsetsDidChange调用顺序 也就是我们之前所了解到的控制器View的生命周期的调用顺序(这里只列出View被加载时的顺序)
  viewDidLoad
  viewWillAppear
  viewSafeAreaInsetsDidChange
▿ UIEdgeInsets - top : 44.0 - left : 0.0 - bottom : 34.0 - right : 0.0 // 在iPhoneX 中竖屏模式下的显示效果
  viewWillLayoutSubviews
  viewDidAppear
  只有在调用viewSafeAreaInsetsDidChange及以后的方法才能获得view和Controller的UIEdgeInsets。所以在viewDidLoad中根据Safe Area设置界面会有问题。

横竖屏状态下的安全距离

• 明白了安全距离的改变时机我们再来说说iPhoneX以下的机型 在 iOS 11中的安全距离问题 笔者发现iPhone8在竖屏下 其顶部的安全距离 == 状态栏的高度 在横屏下四个反向的安全距离均为0
  

  

  Snip20171104_7.png

• 同样的我们来看看iPhoneX 中的横竖屏情况

Snip20171104_8.png

通过打印 我们验证了之前说的 iPhoneX 在 左右方向上也是有安全距离的 而且距离为 21当然这种距离只有在iPhoneX 在横屏的模式下才会出现 在竖屏模式下其左右的安全距离为0

笔者心得

笔者在开发中由于要自定义导航栏 又不想麻烦准确的说是习惯了自己之前的开发方式会在viewDidLoad中来布局自定义的导航条 而在以上的讲解中 我们又在viewDidLoad中拿不到安全距离准确的说这个时候安全距离还没有改变这个时候要布局导航栏时 我们可以使用获取系统状态栏高度的方式来获得顶部安全距离 这个时候我们在布局反面就轻松多了 笔者的APP只不支持旋转屏 只支持竖屏一个反向 状态栏宏定义拿走不谢

/**  获取状态栏高度 */
#define kStatusH  MIN([UIApplication sharedApplication].statusBarFrame.size.height, [UIApplication sharedApplication].statusBarFrame.size.width)

示例:

+ (instancetype)redEnvelopeListNavView{

YBSRedEnvelopeListNavView *navView = [[YBSRedEnvelopeListNavView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, kStatusH + 44)]; // 状态栏的高度始终为44 从未改变过 只是在iPhoneX 中 状态栏的高度为44 其他的为20
    navView.backgroundColor = [UIColor whiteColor];

// 这个时候在左侧增加一个按钮
 // 返回键
    YBS_BaseButton *popBtn = [YBS_BaseButton baseButtonNormaImage:@"taba_2_001" selectImage:@"taba_2_001" target:navView action:@selector(clickPopBtn:) normalTitleColor:nil selectTitleColor:nil titleEdgeInsets:UIEdgeInsetsZero titleFont:0 normalTitle:nil selectTitle:nil];
    popBtn.size = CGSizeMake(navView.height - kStatusH , navView.height - kStatusH);
    popBtn.left = 5;
    popBtn.top = kStatusH; // 按钮的顶部从 状态栏的底部开始布局 
    [navView addSubview:popBtn];
    return navView;
}

到这里你应该知道 安全距离的改变时机 安全距离会应该横竖屏的不同而改变原来为0 的可能会变为大于0 原来大于0的可能会变为0 在iPhoneX上以及在其他机型上安全距离上是不相等的
最后如果你也像笔者这样需要自定义导航栏 采用笔者的方法 会比较灵活 状态栏的高度在任何地方都可以拿到 如笔者就是定义了个导航类 在需要的控制器中直接addSubview就好了 当然你也可以在viewDidLoad定义 在viewSafeAreaInsetsDidChange及以后的方法中布局