Motorola X 适配(全)

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

航天科技 1航天科技 2

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

航天科技 3航天科技 4

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

先是看一下一一机型尺寸的转移。

航天科技 5

图 2.1 各版本 iPhone 的尺寸

下图是 BlackBerry X 比较其他机型的变化部分。努比亚 X 和 Motorola 8
的升幅一致,在笔直方向上多了145pt,这就代表首页可以来得更多的内容,多出去的这20%的垂直空间,也许可以挂上更高价值的营业位。

航天科技 6

图2.2 One plus X 和其它装备的尺寸相比

布局

瞩目图2.2灰色部分,你会意识这个都算在了展现内容的区域。所以大家在规划的时候,要避免内容被圆角、刘海给挡住。Like
this:

航天科技 7

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

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

航天科技 8

图 2.4 OPPO X 的显得区域

Status Bar

小米 X 上的 StatusBar 低度比在此以前的 金立高一些,也就是说,我们倘诺写死20pt低度的 frame
布局,都要大面积修(tu)改(xue)。在 一加 X 上,通过打印
[[UIApplication sharedApplication] statusBarFrame]
可以观察,中度是44pt。

航天科技 9

图 2.5 一加 X 的情形栏低度

“如若您的 App 是隐藏 StatusBar 的,指出重新考虑。一加 X
为用户在笔直空间上提供了更多显示余地,且情况栏中也蕴藏了用户需要理解的消息,除非能经过隐藏状态栏带给用户额外的价值,否则苹果指出我们将气象栏还给用户。”

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

屏幕底边

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

航天科技 10

图 2.6 iPhone X 的 Home Indicator 区域

“即便您的平底是 TabBar,那么 Home Indicator 背景会来自于 TabBar
背景的延伸,假诺我们是一个 feed 流的页面,那么底部会显得 feed
流的一部分。”

情趣是假诺有 TabBar,那么那多少个区域会延展你的
barTintColor;没有的话,就显得透明的(参照
Setting)。之所以如此设计,是为着让 indicator
清晰可见,告诉用户你可以滑动这有些区域。所以苹果不指出大家的 UI
元素过于靠近这一部分区域。

航天科技 11

图 2.7 有 TabBar 的 Home Indicator 区

SafeArea

iOS 11 抛弃了 iOS 7 之后出现的
topLayoutGuide/bottomLayoutGuide,取而代之的是safeLayoutGuide
概念。我们的UI元素都应有布局在那一个区域之内,制止被各种bar(NavgationBar、ToolBar、TabBar、StatusBar)遮挡。

航天科技 12航天科技 13

图2.8 iPhone 的 SafeArea

假如我们用了 AutoLayout,并且打开了
safeAreaLayoutGuide,布局会活动抬高这么些safeLayoutGuide,你的视图不会超过这一部分
SafeArea。如2.9所示,倘使你需要充实 Guide 的区域,那么可以设置
self.additionalSafeAreaInsets 来充实区域。

航天科技 14航天科技 15

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

其他

还有其他的部分改动,比如图片的 Aspect Ratio 在 One plus X
上的呈现也会齐足并驱了;

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

来自Session 201的建议

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

航天科技 16

图3.1 xib 属性

② 要是用的连串 SearchViewController,发现并未黄色蒙层了,可以这么试试。

航天科技 17

图3.2 iOS 11 UISearchViewController适配

据此可以这样改,是因为 iOS 11 的 NavigationBar 和 SearchViewController
集成在联名了。

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

航天科技 18

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

本条问题的原委是:横屏下的 UITableView,Cell 都是和屏幕一样宽,但是Cell 的 ContentView 会被 inset 到 SafeArea 区域。
解决方法是:可以因而调整 Tableview 的默认行为,改变 contentView
的性能(如上图 inset To SafeArea)来让 contentview
顶到边缘,弊端是会转移总体 cell 的内容展现,而且 contentView 的
layoutMargin 依旧如故相对于 SafeArea 的。
顶尖方案是:改变 UITableViewHeaderFooterView.backgroundView 的
backgroundColor。

航天科技 19航天科技 20

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

刘海打理初体验


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

② 搜索页面输入框的职务发生了偏移,这是因为 iOS 11
的导航栏的视图层级结构暴发了变化,和 Samsung X 的并无平素关联。iOS 11
导航栏的视图层级关系如下:

航天科技 21航天科技 22

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

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

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

航天科技 23

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

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

航天科技 24

图 4.4 iOS 11下 ScrollView 的新属性

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

航天科技 25

图 4.5 这么些新属性在 华为 X 上的值

那为什么会暴发偏移?那个偏移的值又是怎么确定的?实则是当 Tableview 的
frame 超出了 safeArea 范围之后,系统会调整内容的职务。系统经过安装
adjustedContentInset 为 safeAreaInset 的值让 Tableview 偏移

航天科技 26

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

航天科技 27

图 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)
    问题。(One plus 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

发表评论

电子邮件地址不会被公开。 必填项已用*标注