关于刘海打理这种事儿,美团点评的iOS工程师早就有经验了,不信你看!

背景

iPhone X 刘海机于9月13日发布,给科技小春晚带来一波高潮。作为开发人员却多出来一份忧虑,iPhone X 怎么适配?我们 App 的脑袋会不会也长一刘海出来?Tabbar 会不会被圆角?先来看一下美团 App 的表现:

图1.1 启动时的 App 表现

图1.2 下拉刷新之后的表现

图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部分

首先看一下各个机型尺寸的变化。

图2.1 各版本 iPhone 的尺寸

下图是 iPhone X 对比其他机型的变化部分。iPhone X 和 iPhone 8 的宽度一致,在垂直方向上多了145pt,这就意味着首页可以展示更多的内容,多出来的这20%的垂直空间,也许可以挂上更高价值的运营位。

图2.2 iPhone X 和其他设备的尺寸对比

布局

注意图2.2蓝色部分,你会发现这些都算在了展示内容的区域。所以我们在设计的时候,要避免内容被圆角、刘海给挡住。Like this:

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

iPhone X 的坐标系统以及能显示内容的区域如下图所示:

图2.4 iPhone X 的显示区域

Status Bar

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

图2.5 iPhone X 的状态栏高度

"如果你的 App 是隐藏 StatusBar 的,建议重新考虑。iPhone X 为用户在垂直空间上提供了更多展示余地,且状态栏中也包含了用户需要知道的信息,除非能通过隐藏状态栏带给用户额外的价值,否则苹果建议大家将状态栏还给用户。"

另外还有一点,用户在使用 iPhone X 打电话的时候,StatusBar 的高度也不会发生变化了。

屏幕底部

因为没有了 Home 键,iPhone X 的底部是预留给系统功能的一个区域 - Home Indicator,这部分的高度是34pt。

图2.6 iPhone X 的 Home Indicator 区域

“如果你的底部是 TabBar,那么 Home Indicator 背景会来自于 TabBar 背景的延伸,如果我们是一个 feed 流的页面,那么底部会展示 feed 流的局部。”

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

图2.7 有 TabBar 的 Home Indicator 区

SafeArea

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

图2.8 iPhone 的 SafeArea

如果我们用了 AutoLayout,并且开启了 safeAreaLayoutGuide,布局会自动加上这些 safeLayoutGuide,你的视图不会超出这部分 SafeArea。如2.9所示,如果你需要增加 Guide 的区域,那么可以设置 self.additionalSafeAreaInsets 来增加区域。

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

其他

还有其他的一些改变,比如图片的 Aspect Ratio 在 iPhone X 上的表现也会有所不同了;

刘海两边的区域都能响应不同的手势,最好不要和自己的 App 发生冲突。

来自Session 201的建议

① xib 里适配 iPhone X 的话,可以开启 UseSafeAreaLayoutGuides(但是这个是需要在 iOS 9 之后才能用,需要看你的 App 最低支持的版本)。

图3.1 xib 属性

② 如果用的系统 SearchViewController,发现没有灰色蒙层了,可以这么试试。

图3.2 iOS 11 UISearchViewController适配

之所以可以这么改,是因为 iOS 11 的 NavigationBar 和 SearchViewController 集成在一块儿了。

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

图3.3 iOS 11 横屏 Tableview 的作用方式

这个问题的原因是:横屏下的 UITableView,Cell 都是和屏幕一样宽,但是 Cell 的 ContentView 会被 inset 到 SafeArea 区域。

解决方法是:可以通过调整 Tableview 的默认行为,改变 contentView 的属性(如上图 inset To SafeArea)来让 contentview 顶到边缘,弊端是会改变整个 cell 的内容显示,而且 contentView 的 layoutMargin 依然还是相对于 SafeArea 的。

最佳方案是:改变 UITableViewHeaderFooterView.backgroundView 的 backgroundColor。

图3.4 iOS 11 修改前后的样式对比

刘海打理初体验

① 我们来看下开头说的那个刷新之后首页顶上去的问题怎么处理。经过排查,这个问题属于“状态栏变高系列”,解决方案就是把固定的20pt高度改成 [[UIApplication sharedApplication] statusBarFrame].size.height]。

② 搜索页面输入框的位置发生了偏移,这是因为 iOS 11 的导航栏的视图层级结构发生了变化,和 iPhone X 的并无直接关系。iOS 11 导航栏的视图层级关系如下:

图4.1 iOS 11 之后的 NavigationBar

图4.2 iOS 11 之前的 NavigationBar

适配方式是:取到这个 _UIButtonBarStackView 的位置和尺寸信息,然后更改 PFBNavigationBarContainerView 的 X 坐标。

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

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

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

图4.4 iOS 11下 ScrollView 的新属性

通过打印这个值,我们发现正好和 contentoffset.y 相符合。

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

那为什么会发生偏移?这个偏移的值又是怎么确定的?其实是当 Tableview 的 frame 超出了 safeArea 范围之后,系统会调整内容的位置。系统通过设置 adjustedContentInset 为 safeAreaInset 的值让 Tableview 偏移。

图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。

图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 ,因为我们用的是系统的,所以目前并没有发现什么奇怪的地方。希望我们踩的这些坑可以让各位在适配的过程中少走一些弯路!

原文发布于微信公众号 - 美团点评技术团队(meituantech)

原文发表时间:2017-09-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小樱的经验随笔

关于前端的photoshop初探的学习笔记

写在前边 这还是高三的时候暑假的时候学习这个软件时记的笔记呢,今天又在电脑上找到了它,总觉得不应该让他尘封在我的硬盘上,于是挂了出来。 温馨提示:比较乱,写给自...

2776
来自专栏ytkah

如何实现大图居中超过的部分两边自动隐藏

  现在大多数用的显示器都是大屏的,所以我们美工在设计海报时都会用大图,但还是有一部分朋友是用小屏幕,那么,如何实现大图居中超过的部分两边自动隐藏呢?ytkah...

34211
来自专栏非著名程序员

一个类似于进度和打卡进度的自定义view

一个类似于进度和打卡进度的自定义view ---- 如下图: ? 看GIF岂不是更好 ? ---- 这个view在现在的app中挺常见的,基本都是这个套路, -...

1878
来自专栏HTML5学堂

几个前端工程师应当掌握的“词语”

HTML5学堂-码匠:W3C、BFC、FOUC、Hack、GPU、Sprite、UA……各类前端术语知多少? 有不少前端开发工程师,可能并不清楚下面的部分词语,...

3436
来自专栏我分享我快乐

响应式jquery小效果实现思路

有很多同学在实现jquery效果时,不知道怎样符合响应式布局。我写了个小案例,帮大家找找思路,希望能帮到你。 效果如下: ? 代码如下: <!doct...

36511
来自专栏编程之旅

iOS开发——影响图形性能的因素以及检测方法

我想各位攻城狮们肯定听过一句话:“过早的优化是万恶之源”。若是你有着丰富的项目经验,一定会对这句话有着自己的体会,而若是编程新手,那么,请牢记这句话。在一个项目...

862
来自专栏进步博客

深入理解视觉格式化模型( VISUAL FORMATTING MODEL)

“理论不懂就实践,实践不会就学理论”,非常赞同bluedavy的这句话。实践过程中经常会遇到某个属性的使用,浏览器渲染效果与预期效果不符,虽然通过死记硬背能避免...

1203
来自专栏小灰灰

Css实战训练之图片点击放大

Css实战训练之图片点击放大 I. 背景 非常常见的一个功能了,一般网站上显示的都是缩略图,等你点击缩略图之后,会在一个弹框中显示放大的图片 那么这个功能是怎么...

4364
来自专栏hbbliyong

Extjs 项目中常用的小技巧,也许你用得着(2)

接着来,也是刚刚遇到的 panel怎么进行收缩 这会panel就会出现这个 ? 点这个就可以收缩了 collapsible: true, pa...

2966
来自专栏知无涯

PS给照片换背景的小技巧[易学易用]

38617

扫码关注云+社区