图 1.3 搜索的变现          图 1.4,图 1.3 搜索的突显          图 1.4

小米 X
刘海机于十一月1二十八日公布,给科学技术小春晚带来一波高潮。作为开发人士却多出去一份忧虑,诺基亚X 怎么适配?大家 App 的脑部会不会也长一刘海出来?Tabbar
会不会被圆角?先来看一下美团 App 的变现:

华为 X
刘海机于11月1二十八日公布,给科学和技术小春晚带来一波高潮。作为开发人士却多出去一份忧虑,SamsungX 怎么适配?大家 App 的脑瓜儿会不会也长一刘海出来?Tabbar
会不会被圆角?先来看一下美团 App 的变现:

图片 1图片 2

图片 3图片 4

图 1.1 运转时的 App 表现           图 1.2 下拉刷新之后的突显

图 1.1 运转时的 App 表现           图 1.2 下拉刷新之后的变现

图片 5图片 6

图片 7图片 8

图 1.3 搜索的表现          图 1.4 “小编的Tab”表现

图 1.3 搜索的突显          图 1.4 “小编的Tab”表现

在图1.1中乍一看表现还不易,然而在图1.2中,下拉刷新之后,我们的导航栏依然被刘海挡住了。搜索也中枪,搜索首页没有章程废除,“热门搜索区域”也多出去一起空手。此外,“小编的Tab”页部分如图1.③ 、图1.4所示,导航栏回不去了,右上角的多少个UIBarButtonItem也有失了。其余还有为数不少UI上的Bug,等着大家去挨家挨户发现并修改。

在图1.1中乍一看表现可以接受,可是在图1.2中,下拉刷新之后,大家的导航栏如故被刘海挡住了。搜索也中枪,搜索首页没有艺术废除,“热门搜索区域”也多出来一起空白。其它,“小编的Tab”页部分如图1.三 、图1.4所示,导航栏回不去了,右上角的三个UIBarButtonItem也不见了。其余还有不少UI上的Bug,等着大家去挨家挨户发现并修改。

针对或然出现的标题,苹果在 developer.apple.com 上交给了某些指出。其中五个是 HIG
(Human Interface
Guideline)
。别的WWDC 会议官方 App
的撰稿人,也交给了适配时的一对经验

针对可能出现的题材,苹果在 developer.apple.com 上付出了有个别指出。其中二个是 HIG
(Human Interface
Guideline)
。其它WWDC 会议官方 App
的小编,也交由了适配时的一些经验

我们来看望她们是怎么说的。

大家来探望他们是怎么说的。

HIG部分

先是看一下梯次机型尺寸的转变。

图片 9

图 2.1 各版本 iPhone 的尺寸

下图是 魅族 X 相比较其他机型的变更部分。摩托罗拉 X 和 索爱 8
的宽度一致,在笔直方向上多了145pt,那就表示首页可以显得越多的情节,多出来的那2/10的垂直空间,大概可以挂上更高价值的营业位。

图片 10

图2.2 一加 X 和其他设备的尺码比较

HIG部分

第叁看一下顺序机型尺寸的变迁。

图片 11

图 2.1 各版本 iPhone 的尺寸

下图是 索爱 X 相比较其他机型的成形部分。One plus X 和 小米 8
的增进率一致,在笔直方向上多了145pt,那就代表首页可以来得更加多的始末,多出去的那二成的垂直空间,或许能够挂上更高价值的营业位。

图片 12

图2.2 HUAWEI X 和其他设备的尺码相比

布局

小心图2.2均红部分,你会发觉那个都算在了浮现内容的区域。所以大家在规划的时候,要幸免内容被圆角、刘海给挡住。Like
this:

图片 13

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

BlackBerry X 的坐标体系以及能突显内容的区域如下图所示:

图片 14

图 2.4 黑莓 X 的显得区域

布局

注意图2.2浅米灰部分,你会发觉那么些都算在了显示内容的区域。所以我们在设计的时候,要避免内容被圆角、刘海给挡住。Like
this:

图片 15

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

One plus X 的坐标序列以及能显得内容的区域如下图所示:

图片 16

图 2.4 魅族 X 的显得区域

Status Bar

小米 X 上的 StatusBar 中度比从前的 OPPO高一些,也等于说,大家只要写死20pt中度的 frame
布局,都要大面积修(tu)改(xue)。在 诺基亚 X 上,通过打印
[[UIApplication sharedApplication] statusBarFrame]
可以看看,中度是44pt。

图片 17

图 2.5 Motorola X 的意况栏中度

“即使您的 App 是隐藏 StatusBar 的,提议重新考虑。索爱 X
为用户在笔直空间上提供了越多显示余地,且状态栏中也蕴藏了用户须要驾驭的音讯,除非能通过隐藏状态栏带给用户额外的市值,否则苹果指出我们将情形栏还给用户。”

此外还有一些,用户在利用 Nokia X 打电话的时候,StatusBar
的万丈也不会爆发变化了。

Status Bar

酷派 X 上的 StatusBar 中度比从前的 Nokia高一些,相当于说,我们只要写死20pt中度的 frame
布局,都要大面积修(tu)改(xue)。在 One plus X 上,通过打印
[[UIApplication sharedApplication] statusBarFrame]
可以看来,中度是44pt。

图片 18

图 2.5 金立 X 的情状栏中度

“如若你的 App 是隐藏 StatusBar 的,提出重新考虑。OPPO X
为用户在笔直空间上提供了越多显示余地,且情状栏中也包括了用户须要明白的音讯,除非能通过隐藏状态栏带给用户额外的市值,否则苹果指出大家将景况栏还给用户。”

别的还有某个,用户在动用 中兴 X 打电话的时候,StatusBar
的可观也不会发生变化了。

显示器底边

因为尚未了 Home 键,Motorola X 的尾部是留给给系统机能的五个区域 – Home
Indicator,那某个的冲天是34pt。

图片 19

图 2.6 iPhone X 的 Home Indicator 区域

“就算您的最底层是 TabBar,那么 Home Indicator 背景会来自于 TabBar
背景的延长,如果大家是壹个 feed 流的页面,那么底部会展现 feed
流的一部分。”

趣味是一旦有 TabBar,那么那么些区域会延展你的
barTintColor;没有的话,就突显透明的(参照
Setting)。之所以这么设计,是为了让 indicator
清晰可知,告诉用户你可以滑动这一部分区域。所以苹果不提出大家的 UI
成分过于靠近那部分区域。

图片 20

图 2.7 有 TabBar 的 Home Indicator 区

屏幕底边

因为尚未了 Home 键,红米 X 的最底层是预留给系统机能的一个区域 – Home
Indicator,那部分的高度是34pt。

图片 21

图 2.6 iPhone X 的 Home Indicator 区域

“即便你的底部是 TabBar,那么 Home Indicator 背景会来自于 TabBar
背景的拉开,倘使大家是三个 feed 流的页面,那么尾部会展现 feed
流的一些。”

情趣是假如有 TabBar,那么那么些区域会延展你的
barTintColor;没有的话,就体现透明的(参照
Setting)。之所以那样设计,是为着让 indicator
清晰可知,告诉用户你可以滑动那有个别区域。所以苹果不指出大家的 UI
成分过于接近这一部分区域。

图片 22

图 2.7 有 TabBar 的 Home Indicator 区

SafeArea

iOS 11 屏弃了 iOS 7 之后出现的
topLayoutGuide/bottomLayoutGuide,取而代之的是safeLayoutGuide
概念。大家的UI成分都应有布局在那一个区域之内,幸免被各个bar(NavgationBar、ToolBar、TabBar、StatusBar)遮挡。

图片 23图片 24

图2.8 iPhone 的 SafeArea

设若大家用了 AutoLayout,并且打开了
safeAreaLayoutGuide,布局会活动抬高那几个safeLayoutGuide,你的视图不会胜出这一部分
SafeArea。如2.9所示,借使你须求增加 Guide 的区域,那么可以设置
self.additionalSafeAreaInsets 来增添区域。

图片 25图片 26

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

SafeArea

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

图片 27图片 28

图2.8 iPhone 的 SafeArea

即使大家用了 AutoLayout,并且打开了
safeAreaLayoutGuide,布局会自行抬高那些safeLayoutGuide,你的视图不会超越那有的
SafeArea。如2.9所示,倘使您须求充实 Guide 的区域,那么能够安装
self.additionalSafeAreaInsets 来充实区域。

图片 29图片 30

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

其他

还有此外的一对改观,比如图片的 Aspect Ratio 在 索尼爱立信 X
上的表现也会有所不一样了;

刘海两边的区域都能响应不相同的手势,最好不要和融洽的 App 发生争执。

其他

还有其余的有些变动,比如图片的 Aspect Ratio 在 Nokia X
上的表现也会迥然不一样了;

刘海两边的区域都能响应不相同的手势,最好不用和协调的 App 爆发争执。

来自Session 201的建议

① xib 里适配 HTC X 的话,可以开启 UseSafeAreaLayoutGuides(但那亟需在
iOS 9 之后才能用,必要看你的 App 最低协助的本子)。

图片 31

图3.1 xib 属性

② 若是用的系统 SearchViewController,发现没有中蓝蒙层了,可以如此试试。

图片 32

图3.2 iOS 11 UISearchViewController适配

从而可以如此改,是因为 iOS 11 的 NavigationBar 和 SearchViewController
集成在一道了。

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

图片 33

图3.3 iOS 11 横屏 Tableview 的效益方式

以此标题标缘由是:横屏下的 UITableView,Cell 都是和显示器一样宽,可是Cell 的 ContentView 会被 inset 到 SafeArea 区域。
焚薮而田办法是:能够通过调整 Tableview 的暗许行为,改变 contentView
的习性(如上图 inset To SafeArea)来让 contentview
顶到边缘,弊端是会改变一切 cell 的情节显示,而且 contentView 的
layoutMargin 依旧照旧绝对于 SafeArea 的。
极品方案是:改变 UITableViewHeaderFooterView.backgroundView 的
backgroundColor。

图片 34图片 35

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

来自Session 201的建议

① xib 里适配 诺基亚 X 的话,可以打开 UseSafeAreaLayoutGuides(但那亟需在
iOS 9 之后才能用,要求看你的 App 最低帮忙的版本)。

图片 36

图3.1 xib 属性

② 若是用的系统 SearchViewController,发现没有米色蒙层了,可以如此试试。

图片 37

图3.2 iOS 11 UISearchViewController适配

因而能够如此改,是因为 iOS 11 的 NavigationBar 和 SearchViewController
集成在一起了。

③ 横屏下的 UITableView,SenctionHeader 的背景颜色不是安装的极度颜色。

图片 38

图3.3 iOS 11 横屏 Tableview 的效率格局

本条难题的缘故是:横屏下的 UITableView,Cell 都以和屏幕一样宽,然则Cell 的 ContentView 会被 inset 到 SafeArea 区域。
涸泽而渔办法是:可以经过调整 Tableview 的暗中认同行为,改变 contentView
的性格(如上图 inset To SafeArea)来让 contentview
顶到边缘,弊端是会改变一切 cell 的内容呈现,而且 contentView 的
layoutMargin 还是照旧相对于 SafeArea 的。
至上方案是:改变 UITableViewHeaderFooterView.backgroundView 的
backgroundColor。

图片 39图片 40

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

刘海打理初体验


我们来看下开端说的百般刷新之后首页顶上去的题材怎么处理。经过排查,那几个题目属于“状态栏变高体系”,消除方案就是把稳定的20pt高度改成 [[UIApplication
sharedApplication] statusBarFrame].size.height]

② 搜索页面输入框的职位发生了偏移,那是因为 iOS 11
的导航栏的视图层级结构发生了转移,和 BlackBerry X 的并无一贯关乎。iOS 11
导航栏的视图层级关系如下:

图片 41图片 42

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

适配方式是:取到这么些 _UIButtonBarStackView
的岗位和尺寸音讯,然后更改 PFBNavigationBarContainerView 的 X 坐标。

③ “小编的Tab” 页面多出去一起桃红的区域,经过排查发现那几个是 Tableview
的背景象。也等于说其实是 Tableview 向下偏移了。

图片 43

图4.3 iOS11 下“作者的Tab” 页面 Tableview 爆发偏移

并发那一个的由来是:iOS 11 之后 scrollview 多出来1个adjustedContentInset 区域。

图片 44

图 4.4 iOS 11下 ScrollView 的新属性

经过打印那些值,大家发现正好和 contentoffset.y 相符合。

图片 45

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

那为啥会发出偏移?那几个偏移的值又是怎么规定的?骨子里是当 Tableview 的
frame 超出了 safeArea 范围之后,系统会调整内容的职位。系统通过安装
adjustedContentInset 为 safeAreaInset 的值让 Tableview 偏移

图片 46

图 4.6 iPhone X 上 safeAreaInset 的值

小心一下那些 adjustedContentInset 是 readOnly
的习性。大家得以经过设置 Tableview.contentInsetAdjustmentBehavior=UIScrollViewContentInsetAdjustmentNever 来更正那么些职位。当然还是能通过安装
tableview.contentOffset 来平衡那些值,但要么引进第3种。

④ “我的Tab”
导航栏上,左边那一个按钮全都发生了偏移,导致力不从心点击。那么些题材也是在新的导航栏结构视图下见面世,原因是新的导航栏结构用了
AutoLayout 布局,大家以此并不是用常规的 UIBarButtonItem
格局达成的,而是1个 UIBarButtonItem ,他的 customView 包罗了三个Button,那多少个 Button 都以 frame 布局,从而造成了在 AutoLayout
下的布局难题。

平常的化解办法是:修改成二个二个添加 UIBarButtonItem 和
UIBarButtonSystemItemFixedSpace。不过这么引出来其它2个难题,iOS 11
之前这种设置负宽度的 fixedspace 来调动间距的 trick
形式已经失效了!详情见https://forums.developer.apple.com/thread/80075

我们那边的格局是:照例用那种二个 CustomView 里含有多少个 CustomButton
的点子,然后分别拉长约束。CustomView 只须要丰硕宽高,包涵的 Button 加上
left、top 和 size。

图片 47

图 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];

刘海打理初体验


大家来看下初叶说的不胜刷新之后首页顶上去的标题怎么处理。经过排查,那么些难点属于“状态栏变高连串”,化解方案就是把稳定的20pt高度改成 [[UIApplication
sharedApplication] statusBarFrame].size.height]

② 搜索页面输入框的任务爆发了偏移,那是因为 iOS 11
的导航栏的视图层级结构暴发了扭转,和 Motorola X 的并无直接关系。iOS 11
导航栏的视图层级关系如下:

图片 48图片 49

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

适配形式是:取到那几个 _UIButtonBarStackView
的地方和尺寸新闻,然后更改 PFBNavigationBarContainerView 的 X 坐标。

③ “我的Tab” 页面多出来一起鲜蓝的区域,经过排查发现那几个是 Tableview
的背景观。也等于说其实是 Tableview 向下偏移了。

图片 50

图4.3 iOS11 下“俺的Tab” 页面 Tableview 暴发偏移

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

图片 51

图 4.4 iOS 11下 ScrollView 的新属性

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

图片 52

图 4.5 那个新属性在 索尼爱立信 X 上的值

那为啥会暴发偏移?这么些偏移的值又是怎么鲜明的?实际上是当 Tableview 的
frame 超出了 safeArea 范围之后,系统会调整内容的岗位。系统通过安装
adjustedContentInset 为 safeAreaInset 的值让 Tableview 偏移

图片 53

图 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

咱俩那边的不二法门是:照旧用那种1个 CustomView 里带有八个 CustomButton
的办法,然后分别拉长约束。CustomView 只须要添加宽高,包括的 Button 加上
left、top 和 size。

图片 54

图 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)
    难点。(诺基亚 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

总结

当下发觉这一个难题的环境是 Xcode 9
GM版本(9A235)的模拟器。归咎起来是三类难点:

  1. StatusBar 变高而且相对布局。
  2. 导航栏的视图层级结构发生变化而致使 UI(titleView、UIBarButtonItem)
    难点。(诺基亚 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