航天科技iPhone X 适配(全)

iPhone X
刘海机为9月13日颁发,给科技小春晚带来一波高潮。作为开发人员却大都下一卖忧虑,iPhone
X 怎么适配?我们 App 的脑部会无会见为添加平刘海出来?Tabbar
会不会见为圆角?先来拘禁一下抖团 App 的呈现:

航天科技 1航天科技 2

图 1.1 启动时的 App 表现           图 1.2 下拉刷新后的展现

航天科技 3航天科技 4

图 1.3 搜索的变现          图 1.4 “我之Tab”表现

于觊觎1.1吃新一拘禁表现还不易,可是每当祈求1.2挨,下拉刷新之后,我们的导航栏还是吃刘海挡已了。搜索也中枪,搜索首页没有章程取消,“热门搜索区域”也差不多出一起空荡荡。另外,“我之Tab”页部分要图1.3、图1.4所著,导航栏回不错过矣,右上比赛的老三单UIBarButtonItem也不见了。其他还有不少UI上的Bug,等着咱错过各个发现并修改。

对可能出现的问题,苹果在 developer.apple.com 上受来了片建议。其中一个凡 HIG
(Human Interface
Guideline)。另外
WWDC 会议官方 App
的作者,也吃有了适配时之部分经验。

俺们来探视她们是怎么说之。

HIG部分

第一看一下依次机型尺寸的变更。

航天科技 5

图 2.1 各版本 iPhone 的尺寸

产图是 iPhone X 对比其他机型的转有。iPhone X 和 iPhone 8
的增长率一致,在直方向上多矣145pt,这虽代表首页可以来得更多的始末,多下的及时20%之直空间,也许可以悬挂上再胜似值之运营位。

航天科技 6

贪图2.2 iPhone X 和其余设施的尺寸比

布局

留神图2.2蓝色部分,你会意识这些都算在了展示内容的区域。所以我们于设计之时段,要避内容被圆角、刘海于挡。Like
this:

航天科技 7

图 2.3 CGRectMake(0,0,100,100)

iPhone X 的坐标体系跟能显内容之区域如下图所示:

航天科技 8

贪图 2.4 iPhone X 的示区域

Status Bar

iPhone X 上的 StatusBar 高度比较前的 iPhone
高一些,也就是说,我们要写深20pt高度的 frame
布局,都使大面积修(tu)改(xue)。在 iPhone X 上,通过打印
[[UIApplication sharedApplication] statusBarFrame]
可以视,高度是44pt。

航天科技 9

图 2.5 iPhone X 的状态栏高度

“如果您的 App 是隐藏 StatusBar 的,建议重新考虑。iPhone X
为用户在直空间上提供了双重多展示余地,且状态栏中也蕴藏了用户用知道之信,除非能够通过隐藏状态栏带吃用户额外的值,否则苹果建议大家以状态栏还为用户。”

除此以外还有某些,用户以运用 iPhone X 打电话的上,StatusBar
的冲天为无见面发生变化了。

屏幕底边

因为没有了 Home 键,iPhone X 的脚是留给给系统功能的一个区域 – Home
Indicator,这有之冲天是34pt。

航天科技 10

图 2.6 iPhone X 的 Home Indicator 区域

“如果你的最底层是 TabBar,那么 Home Indicator 背景会来自于 TabBar
背景的延长,如果我们是一个 feed 流的页面,那么底部会显 feed
流的一对。”

意思是一旦来 TabBar,那么稀区域会延展你的
barTintColor;没有的话,就显示透明底(参照
Setting)。之所以如此设计,是为吃 indicator
清晰可见,告诉用户若得滑动这有的区域。所以苹果不建议我们的 UI
元素过于靠近就片区域。

航天科技 11

图 2.7 有 TabBar 的 Home Indicator 区

SafeArea

iOS 11 废弃了 iOS 7 之后出现的
topLayoutGuide/bottomLayoutGuide,取而代之的是safeLayoutGuide
概念。我们的UI元素都应布局在这些区域中,避免受各种
bar(NavgationBar、ToolBar、TabBar、StatusBar)遮挡。

航天科技 12航天科技 13

图2.8 iPhone 的 SafeArea

如果我们因而了 AutoLayout,并且被了
safeAreaLayoutGuide,布局会活动抬高这些
safeLayoutGuide,你的视图不会见压倒这一部分
SafeArea。如2.9所显示,如果你用多 Guide 的区域,那么得装
self.additionalSafeAreaInsets 来多区域。

航天科技 14航天科技 15

图 2.9 默认的 SafeArea 和 self.additionalSafeAreaInsets =
UIEdgeInsetsMake(64, 0, 0, 0);

其他

尚发生另的片改,比如图片的 Aspect Ratio 在 iPhone X
上的呈现吧会见迥然不同了;

刘海两限的区域都能响应不同的手势,最好不要跟和谐之 App 发生冲突。

来自Session 201的建议

① xib 里适配 iPhone X 的言语,可以被 UseSafeAreaLayoutGuides(但这得在
iOS 9 之后才会就此,需要看你的 App 最低支持的本子)。

航天科技 16

图3.1 xib 属性

② 如果因此的体系 SearchViewController,发现并未灰色蒙层了,可以这么试试。

航天科技 17

图3.2 iOS 11 UISearchViewController适配

就此可以这样转,是以 iOS 11 的 NavigationBar 和 SearchViewController
集成在联名了。

③ 横屏下的 UITableView,SenctionHeader 的背景颜色不是设置的好颜色。

航天科技 18

贪图3.3 iOS 11 横屏 Tableview 的打算方式

是题目的来头是:横屏下的 UITableView,Cell 都是与屏幕一样方便,但是
Cell 的 ContentView 会被 inset 到 SafeArea 区域。
釜底抽薪方式是:得经过调整 Tableview 的默认行为,改变 contentView
的性质(如齐图 inset To SafeArea)来叫 contentview
顶到边缘,弊端是碰头转总体 cell 的始末展示,而且 contentView 的
layoutMargin 依然还是相对于 SafeArea 的。
至上方案是:改变 UITableViewHeaderFooterView.backgroundView 的
backgroundColor。

航天科技 19航天科技 20

图3.4 iOS 11 修改前后的体裁对比

刘海打理初体验


我们来拘禁下开说之百般刷新后首页顶上去的题材怎么处理。经过排查,这个题目属于“状态栏变高系列”,解决方案虽是拿稳定的20pt高度改成为 [[UIApplication
sharedApplication] statusBarFrame].size.height]

② 搜索页面输入框的位置有了偏移,这是以 iOS 11
的导航栏的视图层级结构产生了变通,和 iPhone X 的连任直接关乎。iOS 11
导航栏的视图层级关系如下:

航天科技 21航天科技 22

图4.1 iOS 11 之后的 NavigationBar     图4.2 iOS 11 之前的 NavigationBar

适配方式是:得到到航天科技这 _UIButtonBarStackView
的岗位及尺寸信息,然后再度改 PFBNavigationBarContainerView 的 X 坐标。

③ “我的Tab” 页面多出去一起灰的区域,经过排查发现这个是 Tableview
的背景色。也就是说其实是 Tableview 向下偏移了。

航天科技 23

贪图4.3 iOS11 下“我之Tab” 页面 Tableview 发生偏移

出现这个的原因是:iOS 11 之后 scrollview 多出去一个
adjustedContentInset 区域。

航天科技 24

图 4.4 iOS 11下 ScrollView 的新属性

透过打印是价,我们发现正好和 contentoffset.y 相符合。

航天科技 25

图 4.5 这个新属性在 iPhone X 上的值

那么干什么会起偏移?这个偏移的值又是怎规定的?实在是当 Tableview 的
frame 超出了 safeArea 范围后,系统会调整内容的职务。系统通过设置
adjustedContentInset 为 safeAreaInset 的值为 Tableview 偏移

航天科技 26

图 4.6 iPhone X 上 safeAreaInset 的值

小心一下是 adjustedContentInset 是 readOnly
的习性。我们好透过安装 Tableview.contentInsetAdjustmentBehavior=UIScrollViewContentInsetAdjustmentNever 来纠正之岗位。当然还可以通过设置
tableview.contentOffset 来平衡这个价,但还是引进第一种植。

④ “我的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。

航天科技 27

图 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)的模拟器。归结起来是三类问题:

  1. StatusBar 变高又绝对布局。
  2. 导航栏的视图层级结构发生变化而招致 UI(titleView、UIBarButtonItem)
    问题。(iPhone 6s iOS 11 上仍是原始的组织,是盖今天 AppStore
    上之承保还是是因此 iOS 10 的 SDK 打出来的)。
  3. 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

发表评论

电子邮件地址不会被公开。 必填项已用*标注