iPhone X 适配(全) (4)

④ “我的Tab” 导航栏上，右边那个按钮全都发生了偏移，导致无法点击。这个问题也是在新的导航栏结构视图下会出现，原因是新的导航栏结构用了 AutoLayout 布局，我们这个并不是用常规的 UIBarButtonItem 方式实现的，而是一个 UIBarButtonItem ，他的 customView 包含了三个 Button，这几个 Button 都是 frame 布局，从而导致了在 AutoLayout 下的布局问题。

正常的解决方式是：修改成一个一个添加 UIBarButtonItem 和 UIBarButtonSystemItemFixedSpace。但是这样引出来另外一个问题，iOS 11 之前那种设置负宽度的 fixedspace 来调整间距的 trick 方式已经失效了！详情见https://forums.developer.apple.com/thread/80075。

我们这边的方式是：依然用那种一个 CustomView 里包含三个 CustomButton 的方式，然后分别加上约束。CustomView 只需要加上宽高，包含的 Button 加上 left、top 和 size。

图 4.7 加约束修正后样式

以下是尝试修复这部分问题的代码：

// offset 问题 if (@available(iOS 11.0, *)) { self.contentViewController.tableView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever; } // UIBarButtonItem 问题 if (@available(iOS 11.0, *)) { [messageButtonsContainerView mas_makeConstraints:^(MASConstraintMaker *make) { make.size.mas_equalTo(CGSizeMake(themeButton.width + settingButton.width + messageButton.width, 44)); }]; [themeButton mas_makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo(messageButtonsContainerView); make.left.equalTo(messageButtonsContainerView); make.size.mas_offset(CGSizeMake(44, 44)); }]; [settingButton mas_makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo(messageButtonsContainerView); make.left.equalTo(themeButton.mas_right); make.size.mas_offset(CGSizeMake(44, 44)); }]; [messageButton mas_makeConstraints:^(MASConstraintMaker *make) { make.top.equalTo(messageButtonsContainerView); make.left.equalTo(settingButton.mas_right).offset(-10); make.size.mas_offset(CGSizeMake(44, 44)); }]; } UIBarButtonItem *rightBarItem = [[UIBarButtonItem alloc] initWithCustomView:messageButtonsContainerView]; self.navigationItem.rightBarButtonItems = @[rightBarItem]; 总结

当前发现这些问题的环境是 Xcode 9 GM版本(9A235)的模拟器。归结起来是三类问题：

StatusBar 变高并且绝对布局。

导航栏的视图层级结构发生变化而导致 UI(titleView、UIBarButtonItem) 问题。（iPhone 6s iOS 11 上依然是旧的结构，是因为现在 AppStore 上的包依然是用 iOS 10 的 SDK 打出来的）。

safeAreaInset 导致 Scrollview 偏移。

至于 Tabbar ，因为我们用的是系统的，所以目前并没有发现什么奇怪的地方。希望我们踩的这些坑可以让各位在适配的过程中少走一些弯路！

源：https://tech.meituan.com/iPhoneX%E5%88%98%E6%B5%B7%E6%89%93%E7%90%86%E6%8C%87%E5%8C%97.html