iPhoneX适配笔记

发表于 | 更新于

本文简单记录iPhone X适配过程中存在的一些问题，同时关注了iOS11的一些系统层面改动，可能涉及交互、视觉，目的是符合新的交互规范，界面美观友好。
我将按照一个项目的适配顺序来讲解

Safe Area

iOS11提出的概念，处于Safe Area范围内的视图保证不会被遮挡，Safe Area默认尺寸如图：

avatar

Masonry最新版本更新了对应的API，iOS11下，可以相对于safeAreaLayoutGuide...进行约束

1
2
3
4
5
6
7
8
9
#if (__IPHONE_OS_VERSION_MAX_ALLOWED >= 110000) || (__TV_OS_VERSION_MAX_ALLOWED >= 110000)

@property (nonatomic, strong, readonly) MASViewAttribute *mas_safeAreaLayoutGuide API_AVAILABLE(ios(11.0),tvos(11.0));
@property (nonatomic, strong, readonly) MASViewAttribute *mas_safeAreaLayoutGuideTop API_AVAILABLE(ios(11.0),tvos(11.0));
@property (nonatomic, strong, readonly) MASViewAttribute *mas_safeAreaLayoutGuideBottom API_AVAILABLE(ios(11.0),tvos(11.0));
@property (nonatomic, strong, readonly) MASViewAttribute *mas_safeAreaLayoutGuideLeft API_AVAILABLE(ios(11.0),tvos(11.0));
@property (nonatomic, strong, readonly) MASViewAttribute *mas_safeAreaLayoutGuideRight API_AVAILABLE(ios(11.0),tvos(11.0));

#endif

如果父视图处于Safe Area内，以上部约束为例，父视图的mas_safeAreaLayoutGuideTop与mas_top属性保持一致

在iPhone 8上可能Safe Area这个概念可能比较抽象，但是在iPhone X上表现得比较明显

启动图

第一次运行你的APP会发现上下部缺了一部分，跟苹果每次发不同的尺寸手机时一样，你都要为她添加启动图，如图：

进去后

iPhone X的Launch图尺寸是1125*2436

配置代码

1
2
3
4
5
6
7
8
9
{
      "extent" : "full-screen",
      "idiom" : "iphone",
      "subtype" : "2436h",
      "filename" : "xxx-1125*2436@3x.png",
      "minimum-system-version" : "11.0",
      "orientation" : "portrait",
      "scale" : "3x"
    }

TabBar

在iPhone X下，push新的控制器进入界面，tab栏会有一个高度偏移44个单位

目前解决方案在TabbarController添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
- (void)viewDidLayoutSubviews {

	[super viewDidLayoutSubviews];
    CGFloat tabbarHeight = __IS_IPHONE_X ? 83 : 49; // 适配iPhone x 底栏高度
    

    CGRect frame = self.tabBar.frame;
    frame.size.height = tabbarHeight;
    frame.origin.y = self.view.frame.size.height - frame.size.height;
    self.tabBar.frame = frame;
    
}

避开危险区

iPhone X在顶部多出了44个像素的圆角显示状态栏，底部多出了34个像素用于home键操作，我们应该避开他们：

底部工具栏

此处原方案是使用safeAreaLayoutGuide进行布局，但实际效果上来看并不理想，所以此处判断在iPhone X下固定高度，自外向内布局，为home留出操作空间

sheet弹框

取消cell，遮挡住home键

这种样式的弹框不可避免遮挡home键，可以将控件整体提高34个像素，留出home操作空间