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

酷派 X
刘海机于12月13日布告,给科学技术小春晚带来一波高潮。作为开发人士却多出去一份忧虑,一加X 怎么适配?大家 App 的头颅会不会也长一刘海出来?Tabbar
会不会被圆角?先来看一下美团 App 的显示:

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

betvictor1946 1betvictor1946 2

betvictor1946 3betvictor1946 4

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

图 1.1 启动时的 App 表现           图 1.2 下拉刷新之后的显示

betvictor1946 5betvictor1946 6

betvictor1946 7betvictor1946 8

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

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

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

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

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

本着可能出现的难题,苹果在 developer.apple.com 上交给了有些指出。其中一个是 HIG
(Human Interface
Guideline)
。其它WWDC 会议官方 App
的撰稿人,也交给了适配时的有些经验

咱俩来看看她们是怎么说的。

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

HIG部分

先是看一下梯次机型尺寸的浮动。

betvictor1946 9

图 2.1 各版本 iPhone 的尺寸

下图是 魅族 X 相比较其他机型的扭转部分。酷派 X 和 黑莓 8
的宽窄一致,在笔直方向上多了145pt,那就代表首页可以来得愈来愈多的情节,多出去的那20%的垂直空间,也许可以挂上更高价值的营业位。

betvictor1946 10

图2.2 索尼爱立信 X 和其他设施的尺码相比较

HIG部分

率先看一下各样机型尺寸的变通。

betvictor1946 11

图 2.1 各版本 iPhone 的尺寸

下图是 Nokia X 相比其余机型的转移部分。华为 X 和 Samsung 8
的增幅一致,在笔直方向上多了145pt,这就表示首页可以显示更加多的内容,多出去的那20%的垂直空间,也许可以挂上更高价值的运营位。

betvictor1946 12

图2.2 一加 X 和任何装置的尺寸相比较

布局

在意图2.2蓝色部分,你会意识这一个都算在了浮现内容的区域。所以大家在设计的时候,要防止内容被圆角、刘海给挡住。Like
this:

betvictor1946 13

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

BlackBerry X 的坐标连串以及能显得内容的区域如下图所示:

betvictor1946 14

图 2.4 Nokia X 的显得区域

布局

留神图2.2灰色部分,你会意识那么些都算在了体现内容的区域。所以我们在筹划的时候,要幸免内容被圆角、刘海给挡住。Like
this:

betvictor1946 15

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

One plus X 的坐标连串以及能突显内容的区域如下图所示:

betvictor1946 16

图 2.4 摩托罗拉 X 的呈现区域

Status Bar

One plus X 上的 StatusBar 高度比以前的 Motorola高一些,也就是说,大家假若写死20pt高度的 frame
布局,都要大面积修(tu)改(xue)。在 诺基亚 X 上,通过打印
[[UIApplication sharedApplication] statusBarFrame]
可以看出,中度是44pt。

betvictor1946 17

图 2.5 诺基亚 X 的景观栏中度

“假诺你的 App 是隐藏 StatusBar 的,指出重新考虑。HTC X
为用户在笔直空间上提供了越多浮现余地,且状态栏中也含有了用户要求了解的新闻,除非能通过隐藏状态栏带给用户额外的市值,否则苹果提出大家将气象栏还给用户。”

别的还有少数,用户在采纳 一加 X 打电话的时候,StatusBar
的莫大也不会暴发变化了。

Status Bar

索尼爱立信 X 上的 StatusBar 中度比以前的 Motorola高一些,也就是说,大家只要写死20pt中度的 frame
布局,都要大面积修(tu)改(xue)。在 摩托罗拉 X 上,通过打印
[[UIApplication sharedApplication] statusBarFrame]
可以看出,中度是44pt。

betvictor1946 18

图 2.5 小米 X 的景象栏中度

“借使您的 App 是隐藏 StatusBar 的,指出重新考虑。HUAWEI X
为用户在笔直空间上提供了越来越多体现余地,且状态栏中也包罗了用户须要精通的音讯,除非能经过隐藏状态栏带给用户额外的价值,否则苹果提议大家将情形栏还给用户。”

别的还有某些,用户在采纳 HTC X 打电话的时候,StatusBar
的中度也不会爆发变化了。

显示器底边

因为从没了 Home 键,红米 X 的底层是留下给系统效能的一个区域 – Home
Indicator,那有的的莫大是34pt。

betvictor1946 19

图 2.6 iPhone X 的 Home Indicator 区域

“倘诺您的平底是 TabBar,那么 Home Indicator 背景会来自于 TabBar
背景的延长,借使我们是一个 feed 流的页面,那么底部会显得 feed
流的一对。”

情趣是一旦有 TabBar,那么那一个区域会延展你的
barTintColor;没有的话,就体现透明的(参照
Setting)。之所以那样设计,是为了让 indicator
清晰可见,告诉用户你可以滑动那有的区域。所以苹果不提议大家的 UI
元素过于接近那部分区域。

betvictor1946 20

图 2.7 有 TabBar 的 Home Indicator 区

显示器底边

因为从没了 Home 键,索尼爱立信 X 的底层是留住给系统功效的一个区域 – Home
Indicator,这一部分的莫大是34pt。

betvictor1946 21

图 2.6 iPhone X 的 Home Indicator 区域

“假设你的平底是 TabBar,那么 Home Indicator 背景会来自于 TabBar
背景的延长,如果大家是一个 feed 流的页面,那么尾部会显得 feed
流的一部分。”

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

betvictor1946 22

图 2.7 有 TabBar 的 Home Indicator 区

SafeArea

iOS 11 甩掉了 iOS 7 之后出现的
topLayoutGuide/bottomLayoutGuide,取而代之的是safeLayoutGuide
概念。大家的UI元素都应当布局在那么些区域之内,防止被各个bar(NavgationBar、ToolBar、TabBar、StatusBar)遮挡。

betvictor1946 23betvictor1946 24

图2.8 iPhone 的 SafeArea

若果大家用了 AutoLayout,并且打开了
safeAreaLayoutGuide,布局会自行抬高那几个safeLayoutGuide,你的视图不会压倒这一部分
SafeArea。如2.9所示,即使你必要充实 Guide 的区域,那么可以安装
self.additionalSafeAreaInsets 来扩充区域。

betvictor1946 25betvictor1946 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)遮挡。

betvictor1946 27betvictor1946 28

图2.8 iPhone 的 SafeArea

只要我们用了 AutoLayout,并且打开了
safeAreaLayoutGuide,布局会自行抬高这几个safeLayoutGuide,你的视图不会压倒这有些
SafeArea。如2.9所示,假使你须要追加 Guide 的区域,那么可以设置
self.additionalSafeAreaInsets 来增加区域。

betvictor1946 29betvictor1946 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 最低辅助的版本)。

betvictor1946 31

图3.1 xib 属性

② 即便用的系列 SearchViewController,发现没有红色蒙层了,可以如此试试。

betvictor1946 32

图3.2 iOS 11 UISearchViewController适配

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

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

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

betvictor1946 34betvictor1946 35

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

来自Session 201的建议

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

betvictor1946 36

图3.1 xib 属性

② 假诺用的系统 SearchViewController,发现并未粉色蒙层了,可以如此试试。

betvictor1946 37

图3.2 iOS 11 UISearchViewController适配

由此可以那样改,是因为 iOS 11 的 NavigationBar 和 SearchViewController
集成在联合了。

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

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

betvictor1946 39betvictor1946 40

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

刘海打理初体验


大家来看下起先说的不得了刷新之后首页顶上去的标题怎么处理。经过排查,这些难题属于“状态栏变高体系”,解决方案就是把稳定的20pt中度改成 [[UIApplication
sharedApplication] statusBarFrame].size.height]

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

betvictor1946 41betvictor1946 42

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

适配格局是:取到这么些 _UIButtonBarStackView
的职责和尺寸音信,然后更改 PFBNavigationBarContainerView 的 X 坐标。

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

betvictor1946 43

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

出现那么些的因由是:iOS 11 之后 scrollview 多出去一个
adjustedContentInset 区域。

betvictor1946 44

图 4.4 iOS 11下 ScrollView 的新属性

由此打印那个值,大家发现正好和 contentoffset.y 相符合。

betvictor1946 45

图 4.5 那个新属性在 HUAWEI X 上的值

那干什么会生出偏移?这么些偏移的值又是怎么确定的?骨子里是当 Tableview 的
frame 超出了 safeArea 范围之后,系统会调整内容的义务。系统经过安装
adjustedContentInset 为 safeAreaInset 的值让 Tableview 偏移

betvictor1946 46

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

betvictor1946 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
的导航栏的视图层级结构爆发了扭转,和 摩托罗拉 X 的并无直接关系。iOS 11
导航栏的视图层级关系如下:

betvictor1946 48betvictor1946 49

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

适配方式是:取到这些 _UIButtonBarStackView
的职位和尺寸新闻,然后更改 PFBNavigationBarContainerView 的 X 坐标。

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

betvictor1946 50

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

并发那几个的缘故是:iOS 11 之后 scrollview 多出去一个
adjustedContentInset 区域。

betvictor1946 51

图 4.4 iOS 11下 ScrollView 的新属性

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

betvictor1946 52

图 4.5 那么些新属性在 Samsung X 上的值

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

betvictor1946 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

大家那边的法子是:反之亦然用这种一个 CustomView 里含有八个 CustomButton
的法门,然后分别增进约束。CustomView 只需求丰盛宽高,包括的 Button 加上
left、top 和 size。

betvictor1946 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

相关文章