iPhoneX 刘海儿打理指南

概述

iOS11 中增加了 SafeArea 的概念，规定了苹果建议的最合适的内容展示区域。

在iPhoneX中

• 状态栏高度由 20pt 变为 44pt
• 导航栏以上高度由 64pt 变为 88pt
• 底部工具栏需要为 home indicator 留出 34pt 边距

Frame 布局

UIView

UIView 中新增了以下属性，我们可以利用此属性来知道当前 view 所需要下移以及加高的值。

@property(nonatomic, readonly) UIEdgeInsets safeAreaInsets;

• 通常在 - (void)layoutSubviews 方法中使用 safeAreaInsets 布局

- (void)layoutSubviews {
    [super layoutSubviews];
     if (@available(iOS 11.0, *)) {
         self.titleLabel.frame = CGRectMake(0, self.view.safeAreaInsets.top, 100, 100);
     }
}

UIViewController

UIViewController 中新增了以下属性来设置 safeAreaInsets

@property(nonatomic) UIEdgeInsets additionalSafeAreaInsets;

viewSafeAreaInsetsDidChange 的调用顺序：

- (void)viewDidLoad
- (void)viewWillAppear
- (void)viewSafeAreaInsetsDidChange // safeArea 改变时调用
- (void)viewWillLayoutSubviews
- (void)viewDidLayoutSubviews
- (void)viewDidAppear

• 只有在调用 viewSafeAreaInsetsDidChange 及以后的方法才能获得 view 和 Controller 的UIEdgeInsets(44,0,34,0)。所以在 viewDidLoad 中根据 safeAreaInsets 设置界面会有问题。

AutoLayout 布局

UIView 中还有一个用于 AutoLayout 布局的属性

@property(nonatomic, readonly, strong) UILayoutGuide *safeAreaLayoutGuide;

• Masonry 1.1.0 已更新了 SafeArea 相关的用法

// 尽量使用这种方式
[self.label mas_makeConstraints:^(MASConstraintMaker *make) {
    make.right.equalTo(self.penBtn.mas_left);
    make.top.equalTo(self.view.mas_top).priorityMedium();
    if (@available(iOS 11.0, *)) {
        make.top.greaterThanOrEqualTo(self.view.mas_safeAreaLayoutGuideTop);
    }
 }];

// 如果 iphoneX 和其他机型偏移量不同且无法用 SafeArea 相关属性解决，再用这样的方式
[view mas_makeConstraints:^(MASConstraintMaker *make) {
    if ([UIDevice awe_isIPhoneX]) {
        if (@available(iOS 11.0, *)) {
            make.top.greaterThanOrEqualTo(self.view.mas_safeAreaLayoutGuideTop).offset(12);
        }
    } else {
        make.top.equalTo(self.view).offset(30);
    }
    make.right.lessThanOrEqualTo(self.view.mas_left).offset(10);
    make.centerX.equalTo(self.view);
}];

一些Tips

• 适配时尽量使用 SafeArea 相关的属性，不要简单粗暴的直接指定偏移量的大小

// 错误示范！！！不要这样搞！！！
[self.cancelButton mas_makeConstraints:^(MASConstraintMaker *make) {
        make.width.equalTo(@(74));
        make.height.equalTo(@(74));
        if ([UIDevice awe_isIPhoneX]) {
            make.top.equalTo(@(20));
        } else {
            make.top.equalTo(@(0));
        }
        make.right.equalTo(@(0));
}];

// 这样才是对哒～！
[self.cancelButton mas_makeConstraints:^(MASConstraintMaker *make) {
        make.width.equalTo(@(74));
        make.height.equalTo(@(74));
        make.right.equalTo(@(0));
        make.top.equalTo(self.view.mas_top).priorityMedium();
        if (@available(iOS 11.0, *)) {
            make.top.greaterThanOrEqualTo(self.view.mas_safeAreaLayoutGuideTop);
        }
}];

• 常用的宏
  • 一般用于 frame 的改变，AutoLayout 中尽量不要用

#define STATUS_BAR_HEIGHT [UIApplication sharedApplication].statusBarFrame.size.height
#define STATUS_BAR_NORMAL_HEIGHT ([UIDevice isIPhoneX] ? STATUS_BAR_HEIGHT : 20)
#define TAB_BAR_HEIGHT          49
#define NAVIGATION_BAR_HEIGHT   ([UIDevice isIPhoneX] ? 88 : 64)
#define NAVIGATION_BAR_OFFSET   ([UIDevice isIPhoneX] ? 24 : 0)
#define IPHONE_X_BOTTOM_OFFSET   ([UIDevice isIPhoneX] ? 34 : 0)         

• 判断机型 : 不到万不得已不要用这个方法！不到万不得已不要用这个方法！不到万不得已不要用这个方法！

#import 

+ (BOOL)isIPhoneX {
    struct utsname systemInfo;
    uname(&systemInfo);
    NSString *platform = [NSString stringWithCString:systemInfo.machine encoding:NSUTF8StringEncoding];
    if ([platform isEqualToString:@"iPhone10,3"] || [platform isEqualToString:@"iPhone10,6"]) {
        return YES;
    }
    return NO;
}