红米 X 适配(全)

HUAWEI X
刘海机于2月一二日公布,给科技(science and technology)小春晚带来壹波高潮。作为开发人士却多出来1份忧虑,索尼爱立信X 怎么适配?大家 App 的脑部会不会也长壹刘海出来?Tabbar
会不会被圆角?先来看一下美团 App 的显现:

红米 X
刘海机于十月1二二十七日发布,给科技(science and technology)小春晚带来壹波高潮。作为开发人士却多出去一份忧虑,三星X 怎么适配?大家 App 的脑瓜儿会不会也长一刘海出来?Tabbar
会不会被圆角?先来看一下美团 App 的显现:

图片 1图片 2

图片 3图片 4

图 1.壹 运营时的 App 表现           图 1.二 下拉刷新之后的显现

图 一.一 运维时的 App 表现           图 一.2 下拉刷新之后的变现

图片 5图片 6

图片 7图片 8

图 一.三 搜索的表现          图 1.四 “小编的Tab”表现

图 1.叁 搜索的呈现          图 一.4 “作者的Tab”表现

在图1.第11中学乍一看表现还行,不过在图一.第22中学,下拉刷新之后,大家的导航栏照旧被刘海挡住了。搜索也中枪,搜索首页未有办法撤消,“热门搜索区域”也多出去壹起空手。此外,“我的Tab”页部分如图一.3、图一.4所示,导航栏回不去了,右上角的多少个UIBarButtonItem也遗落了。其余还有众多UI上的Bug,等着大家去挨家挨户发现并修改。

在图壹.第11中学乍一看表现还不易,可是在图一.第22中学,下拉刷新之后,大家的导航栏依然被刘海挡住了。搜索也中枪,搜索首页未有艺术撤除,“热门搜索区域”也多出来一起空手。其它,“小编的Tab”页部分如图一.三、图1.四所示,导航栏回不去了,右上角的八个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 相比别的机型的变更部分。Nokia X 和 Nokia 八的幅度一致,在笔直方向上多了14五pt,那就象征首页能够来得越来越多的情节,多出来的那二成的垂直空间,恐怕可以挂上更高价值的营业位。

图片 10

图二.二 Samsung X 和任何设施的尺寸比较

HIG部分

率先看一下壹一机型尺寸的更动。

图片 11

图 2.1 各版本 iPhone 的尺寸

下图是 BlackBerry X 比较别的机型的扭转部分。小米 X 和 HTC 八的升幅壹致,在笔直方向上多了1四伍pt,那就表示首页能够显得更加多的剧情,多出去的那2/10的垂直空间,恐怕能够挂上更高价值的运营位。

图片 12

图二.2 一加 X 和任何装备的尺码相比较

布局

留意图二.二水草绿部分,你会发现这几个都算在了体现内容的区域。所以大家在设计的时候,要防止内容被圆角、刘海给挡住。Like
this:

图片 13

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

中兴 X 的坐标系列以及能显得内容的区域如下图所示:

图片 14

图 二.肆 Nokia X 的来得区域

布局

瞩目图二.2木色部分,你会发现那个都算在了体现内容的区域。所以大家在筹划的时候,要防止内容被圆角、刘海给挡住。Like
this:

图片 15

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

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

图片 16

图 二.四 小米 X 的来得区域

Status Bar

一加 X 上的 StatusBar 中度比此前的 酷派高一些,相当于说,大家假若写死20pt中度的 frame
布局,都要大面积修(tu)改(xue)。在 小米 X 上,通过打字与印刷
[[UIApplication sharedApplication] statusBarFrame]
能够看看,低度是4四pt。

图片 17

图 贰.五 HTC X 的意况栏中度

“借使您的 App 是隐藏 StatusBar 的,提议重新思念。红米 X
为用户在笔直空间上提供了更加多体现余地,且情形栏中也蕴藏了用户必要理解的消息,除非能经过隐藏状态栏带给用户额外的价值,不然苹果建议我们将气象栏还给用户。”

此外还有少数,用户在采用 HUAWEI X 打电话的时候,StatusBar
的莫斯科大学也不会暴发变化了。

Status Bar

华为 X 上的 StatusBar 中度比从前的 One plus高1些,也正是说,大家即使写死20pt中度的 frame
布局,都要大面积修(tu)改(xue)。在 魅族 X 上,通过打字与印刷
[[UIApplication sharedApplication] statusBarFrame]
能够看到,中度是44pt。

图片 18

图 2.5 BlackBerry X 的情况栏中度

“借使你的 App 是隐藏 StatusBar 的,提议重新缅怀。红米 X
为用户在笔直空间上提供了更多浮现余地,且情状栏中也含有了用户必要知道的音讯,除非能由此隐藏状态栏带给用户额外的价值,不然苹果建议大家将气象栏还给用户。”

除此以外还有少数,用户在应用 索爱 X 打电话的时候,StatusBar
的冲天也不会产生变化了。

显示屏底边

因为从没了 Home 键,HTC X 的平底是预留给系统机能的三个区域 – Home
Indicator,那部分的冲天是34pt。

图片 19

图 2.6 iPhone X 的 Home Indicator 区域

“假如您的底部是 TabBar,那么 Home Indicator 背景会来自于 TabBar
背景的延长,假使我们是三个 feed 流的页面,那么底部会来得 feed
流的1对。”

情趣是只要有 TabBar,那么那多少个区域会延展你的
barTintColor;未有的话,就显得透明的(参照
Setting)。之所以如此设计,是为着让 indicator
清晰可知,告诉用户你能够滑动这一部分区域。所以苹果不建议咱们的 UI
成分过于靠近那部分区域。

图片 20

图 2.7 有 TabBar 的 Home Indicator 区

显示器底边

因为尚未了 Home 键,Nokia X 的底层是留住给系统功用的一个区域 – Home
Indicator,那有的的可观是3肆pt。

图片 21

图 2.6 iPhone X 的 Home Indicator 区域

“借使你的最底层是 TabBar,那么 Home Indicator 背景会来自于 TabBar
背景的延伸,若是我们是三个 feed 流的页面,那么底部会展现 feed
流的1部分。”

趣味是借使有 TabBar,那么那一个区域会延展你的
barTintColor;未有的话,就呈现透明的(参照
Setting)。之所以这么设计,是为着让 indicator
清晰可知,告诉用户你能够滑动那有个别区域。所以苹果不提议我们的 UI
元素过于靠近那壹部分区域。

图片 22

图 2.7 有 TabBar 的 Home Indicator 区

SafeArea

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

图片 23图片 24

图2.8 iPhone 的 SafeArea

设若我们用了 AutoLayout,并且打开了
safeAreaLayoutGuide,布局会活动抬高那些safeLayoutGuide,你的视图不会超过那部分
SafeArea。如2.九所示,若是您须要充实 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。如二.九所示,假使您须求充实 Guide 的区域,那么能够安装
self.additionalSafeAreaInsets 来充实区域。

图片 29图片 30

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

其他

还有此外的有的变动,比如图片的 Aspect Ratio 在 魅族 X
上的显现也会迥然不相同了;

刘海两边的区域都能响应区别的手势,最佳不要和友爱的 App 发生争辩。

其他

还有别的的有的转移,比如图片的 Aspect Ratio 在 HUAWEI X
上的显示也会迥然差别了;

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

来自Session 201的建议

壹 xib 里适配 Motorola X 的话,能够打开 UseSafeAreaLayoutGuides(但那需求在
iOS 玖 之后才能用,须求看您的 App 最低支持的本子)。

图片 31

图3.1 xib 属性

2 就算用的系统 SearchViewController,发现并未有黑古铜色蒙层了,能够如此试试。

图片 32

图3.2 iOS 11 UISearchViewController适配

从而能够如此改,是因为 iOS 1壹 的 NavigationBar 和 SearchViewController
集成在同步了。

三 横屏下的 UITableView,SenctionHeader 的背景颜色不是安装的不胜颜色。

图片 33

图3.三 iOS 1一 横屏 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 1一 修改前后的体制比较

来自Session 201的建议

1 xib 里适配 三星 X 的话,能够开启 UseSafeAreaLayoutGuides(但这亟需在
iOS 九 之后才能用,供给看你的 App 最低辅助的本子)。

图片 36

图3.1 xib 属性

二 假设用的种类 SearchViewController,发现未有橙褐蒙层了,可以如此试试。

图片 37

图3.2 iOS 11 UISearchViewController适配

所以得以如此改,是因为 iOS 11 的 NavigationBar 和 SearchViewController
集成在联合了。

三 横屏下的 UITableView,SenctionHeader 的背景颜色不是安装的尤其颜色。

图片 38

图三.叁 iOS 1一 横屏 Tableview 的效率格局

这么些难题的案由是:横屏下的 UITableView,Cell 都是和荧屏1样宽,但是Cell 的 ContentView 会被 inset 到 SafeArea 区域。
消除措施是:能够透过调整 Tableview 的暗许行为,改变 contentView
的性质(如上海教室 inset To SafeArea)来让 contentview
顶到边缘,弊端是会转移总体 cell 的始末呈现,而且 contentView 的
layoutMargin 依然还是相对于 SafeArea 的。
拔尖方案是:改变 UITableViewHeaderFooterView.backgroundView 的
backgroundColor。

图片 39图片 40

图3.4 iOS 11 修改前后的体制相比

刘海打理初体验

1大家来看下初阶说的分外刷新之后首页顶上去的难题怎么处理。经过排查,那些题材属于“状态栏变高连串”,解决方案正是把稳定的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

图四.三 iOS1一 下“笔者的Tab” 页面 Tableview 产生偏移

现身这些的由来是:iOS 1一 之后 scrollview 多出来3个adjustedContentInset 区域。

图片 44

图 4.肆 iOS 1一下 ScrollView 的新属性

经过打字与印刷这几个值,大家发现正好和 contentoffset.y 相符合。

图片 45

图 肆.五 这几个新属性在 酷派 X 上的值

这怎么会爆发偏移?那么些偏移的值又是怎么规定的?实在是当 Tableview 的
frame 超出了 safeArea 范围之后,系统会调动内容的职位。系统通过安装
adjustedContentInset 为 safeAreaInset 的值让 Tableview 偏移

图片 46

图 4.6 iPhone X 上 safeAreaInset 的值

只顾一下那些 adjustedContentInset 是 readOnly
的性质。我们得以经过设置 Tableview.contentInsetAdjustmentBehavior=UIScrollViewContentInsetAdjustmentNever 来改良这一个职位。当然还是能通过安装
tableview.contentOffset 来平衡那几个值,但要么引进第一种。

4 “笔者的Tab”
导航栏上,左边那几个按钮全都发生了偏移,导致力不从心点击。那么些标题也是在新的导航栏结构视图下会见世,原因是新的导航栏结构用了
AutoLayout 布局,大家以此并不是用常规的 UIBarButtonItem
方式完结的,而是3个 UIBarButtonItem ,他的 customView 包括了四个Button,那多少个 Button 都是 frame 布局,从而导致了在 AutoLayout
下的布局难点。

常规的消除措施是:修改成八个叁个添加 UIBarButtonItem 和
UIBarButtonSystemItemFixedSpace。然而这么引出来其它2个难点,iOS 1一从前那种设置负宽度的 fixedspace 来调整间距的 trick
格局已经失效了!详情见https://forums.developer.apple.com/thread/80075

笔者们那边的章程是:照旧用那种一个 CustomView 里含有多个 CustomButton
的不二法门,然后分别拉长约束。CustomView 只供给丰裕宽高,包罗的 Button 加上
left、top 和 size。

图片 47

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

刘海打理初体验

1大家来看下伊始说的越发刷新之后首页顶上去的难点怎么处理。经过排查,那一个题材属于“状态栏变高类别”,消除方案正是把稳定的20pt中度改成 [[UIApplication
sharedApplication] statusBarFrame].size.height]

贰 搜索页面输入框的职位产生了偏移,那是因为 iOS 1一的导航栏的视图层级结构发生了变化,和 Motorola X 的并无一向关乎。iOS 1一导航栏的视图层级关系如下:

图片 48图片 49

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

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

3 “笔者的Tab” 页面多出来壹起深红的区域,经过排查发现那几个是 Tableview
的背景观。也正是说其实是 Tableview 向下偏移了。

图片 50

图4.三 iOS1一 下“小编的Tab” 页面 Tableview 产生偏移

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

图片 51

图 四.4 iOS 1一下 ScrollView 的新属性

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

图片 52

图 四.五 那几个新属性在 索爱 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
下的布局难点。

健康的消除办法是:修改成二个二个添加 UIBarButtonItem 和
UIBarButtonSystemItemFixedSpace。但是如此引出来此外叁个难题,iOS 11此前那种设置负宽度的 fixedspace 来调动间距的 trick
格局已经失效了!详情见https://forums.developer.apple.com/thread/80075

小编们那边的章程是:一如既往用那种贰个 CustomView 里含有多个 CustomButton
的方式,然后分别增加约束。CustomView 只需求丰富宽高,包涵的 Button 加上
left、top 和 size。

图片 54

图 四.七 加约束核查后样式

以下是尝试修复那有个别题材的代码:

// 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 玖青霉素版本(9A23五)的模拟器。归咎起来是3类难点:

  1. StatusBar 变高而且相对布局。
  2. 导航栏的视图层级结构暴发变化而造成 UI(titleView、UIBarButtonItem)
    难题。(华为 6s iOS 1一 上照旧是旧的构造,是因为明天 AppStore
    上的包依然是用 iOS 十 的 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 9GM版本(9A235)的模拟器。归纳起来是3类难题:

  1. StatusBar 变高而且绝对布局。
  2. 导航栏的视图层级结构发生变化而招致 UI(titleView、UIBarButtonItem)
    难点。(黑莓 6s iOS 1一 上照旧是旧的协会,是因为后天 AppStore
    上的包依旧是用 iOS 十 的 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