图 1.3 搜索的显现          图 1.4,图 1.3 搜索的彰显          图 1.4

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

小米 X
刘海机于12月1二二十日公布,给科学技术小春晚带来一波高潮。作为开发职员却多出来一份忧虑,One plusX 怎么适配?我们 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.第11中学乍一看表现还不易,然而在图1.第22中学,下拉刷新之后,大家的导航栏仍然被刘海挡住了。搜索也中枪,搜索首页没有章程撤废,“热门搜索区域”也多出去一起空荡荡。此外,“笔者的Tab”页部分如图1.③ 、图1.4所示,导航栏回不去了,右上角的三个UIBarButtonItem也不见了。其余还有很多UI上的Bug,等着我们去各类发现并修改。

在图1.1中乍一看表现还不易,不过在图1.第22中学,下拉刷新之后,我们的导航栏依然被刘海挡住了。搜索也中枪,搜索首页没有办法撤废,“热门搜索区域”也多出去一起空手。其余,“作者的Tab”页部分如图1.③ 、图1.4所示,导航栏回不去了,右上角的多少个UIBarButtonItem也有失了。其余还有众多UI上的Bug,等着我们去挨家挨户发现并修改。

针对或然出现的题材,苹果在 developer.apple.com 上提交了一些提议。在那之中3个是 HIG
(Human Interface
Guideline)
。其余WWDC 会议官方 App
的小编,也付出了适配时的一对经验

本着大概出现的标题,苹果在 developer.apple.com 上交给了部分提出。当中一个是 HIG
(Human Interface
Guideline)
。其余WWDC 会议官方 App
的撰稿人,也付出了适配时的有的经验

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

大家来看望她们是怎么说的。

HIG部分

首先看一下梯次机型尺寸的生成。

图片 9

图 2.1 各版本 iPhone 的尺寸

下图是 酷派 X 相比其余机型的变动部分。HUAWEI X 和 Nokia 8
的上涨幅度一致,在笔直方向上多了145pt,那就表示首页能够呈现更加多的始末,多出去的那五分之一的垂直空间,或许能够挂上更高价值的运维位。

图片 10

图2.2 OPPO X 和其余设施的尺寸相比较

HIG部分

率先看一下逐项机型尺寸的变动。

图片 11

图 2.1 各版本 iPhone 的尺寸

下图是 Samsung X 比较其余机型的变更部分。金立 X 和 三星 8
的幅度一致,在笔直方向上多了145pt,那就表示首页能够彰显越多的始末,多出去的那二成的垂直空间,或然能够挂上更高价值的营业位。

图片 12

图2.2 Nokia X 和任何设备的尺码比较

布局

只顾图2.2水晶绿部分,你会发现那些都算在了体现内容的区域。所以大家在布署的时候,要幸免内容被圆角、刘海给挡住。Like
this:

图片 13

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

HTC X 的坐标种类以及能显示内容的区域如下图所示:

图片 14

图 2.4 诺基亚 X 的呈现区域

布局

专注图2.2青蓝部分,你会发现这几个都算在了显示内容的区域。所以大家在布署的时候,要防止内容被圆角、刘海给挡住。Like
this:

图片 15

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

酷派 X 的坐标体系以及能展现内容的区域如下图所示:

图片 16

图 2.4 HUAWEI X 的显得区域

Status Bar

金立 X 上的 StatusBar 高度比此前的 酷派高级中学一年级些,也便是说,大家如若写死20pt中度的 frame
布局,都要大面积修(tu)改(xue)。在 三星 X 上,通过打字与印刷
[[UIApplication sharedApplication] statusBarFrame]
可以见见,中度是44pt。

图片 17

图 2.5 HUAWEI X 的场馆栏中度

“假若您的 App 是隐藏 StatusBar 的,提出重新考虑。HUAWEI X
为用户在笔直空间上提供了越多浮现余地,且情状栏中也饱含了用户需求领悟的信息,除非能因而隐藏状态栏带给用户额外的价值,不然苹果提议大家将气象栏还给用户。”

其它还有一些,用户在动用 黑莓 X 打电话的时候,StatusBar
的万丈也不会产生变化了。

Status Bar

One plus X 上的 StatusBar 高度比从前的 Nokia高级中学一年级些,相当于说,大家只要写死20pt中度的 frame
布局,都要大面积修(tu)改(xue)。在 华为 X 上,通过打印
[[UIApplication sharedApplication] statusBarFrame]
可以见到,中度是44pt。

图片 18

图 2.5 魅族 X 的动静栏中度

“假若你的 App 是隐藏 StatusBar 的,建议重新考虑。三星 X
为用户在笔直空间上提供了更多呈现余地,且状态栏中也富含了用户须求理解的音信,除非能通过隐藏状态栏带给用户额外的市场股票总值,不然苹果提出大家将状态栏还给用户。”

除此以外还有某个,用户在采取 三星 X 打电话的时候,StatusBar
的可观也不会发生变化了。

荧屏底边

因为从没了 Home 键,一加 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 在 魅族 X
上的变现也会有所不一致了;

刘海两边的区域都能响应分裂的手势,最好不要和和谐的 App 爆发争辩。

来自Session 201的建议

① xib 里适配 小米 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
的导航栏的视图层级结构产生了变通,和 索爱 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 多出去一个adjustedContentInset 区域。

图片 44

图 4.4 iOS 11下 ScrollView 的新属性

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

图片 45

图 4.5 这一个新属性在 红米 X 上的值

那干什么会生出偏移?那些偏移的值又是怎么规定的?实则是当 Tableview 的
frame 超出了 safeArea 范围之后,系统会调动内容的岗位。系统经过设置
adjustedContentInset 为 safeAreaInset 的值让 Tableview 偏移

图片 46

图 4.6 iPhone X 上 safeAreaInset 的值

专注一下以此 adjustedContentInset 是 readOnly
的属性。大家得以因而安装 Tableview.contentInsetAdjustmentBehavior=UIScrollViewContentInsetAdjustmentNever 来改进那个职分。当然还足以因此设置
tableview.contentOffset 来抵消那些值,但照旧引进第①种。

④ “我的Tab”
导航栏上,左侧那二个按钮全都产生了偏移,导致力不从心点击。这么些标题也是在新的导航栏结构视图下会产出,原因是新的导航栏结构用了
AutoLayout 布局,大家这么些并不是用健康的 UIBarButtonItem
格局贯彻的,而是三个 UIBarButtonItem ,他的 customView 包蕴了四个Button,这多少个 Button 都以 frame 布局,从而导致了在 AutoLayout
下的布局难题。

正规的缓解措施是:修改成贰个一个添加 UIBarButtonItem 和
UIBarButtonSystemItemFixedSpace。可是那样引出来此外2个标题,iOS 11
以前那种设置负宽度的 fixedspace 来调动间距的 trick
格局已经失效了!详情见https://forums.developer.apple.com/thread/80075

大家那边的艺术是:一如既往用那种1个 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
的导航栏的视图层级结构爆发了变动,和 Nokia 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 那么些新属性在 HUAWEI X 上的值

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

图片 53

图 4.6 iPhone X 上 safeAreaInset 的值

专注一下这些 adjustedContentInset 是 readOnly
的本性。咱们得以因此设置 Tableview.contentInsetAdjustmentBehavior=UIScrollViewContentInsetAdjustmentNever 来纠正这几个岗位。当然还足以由此设置
tableview.contentOffset 来平衡这几个值,但依然引进第贰种。

④ “笔者的Tab”
导航栏上,左边那几个按钮全都产生了偏移,导致力不从心点击。那个难点也是在新的导航栏结构视图下会冒出,原因是新的导航栏结构用了
AutoLayout 布局,大家这些并不是用健康的 UIBarButtonItem
格局达成的,而是1个 UIBarButtonItem ,他的 customView 包蕴了三个Button,那多少个 Button 都以 frame 布局,从而造成了在 AutoLayout
下的布局难题。

常规的化解办法是:修改成3个1个添加 UIBarButtonItem 和
UIBarButtonSystemItemFixedSpace。然则这么引出来其它一个难点,iOS 11
以前那种设置负宽度的 fixedspace 来调整间距的 trick
形式已经失效了!详情见https://forums.developer.apple.com/thread/80075

咱俩那边的法子是:还是用那种三个 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