酷派 X 适配(全)

三星 X
刘海机于六月13日发布,给科技小春晚带来一波高潮。作为开发人士却多出去一份忧虑,SamsungX 怎么适配?大家 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 的尺寸

下图是 HTC X 比较其他机型的更动部分。HUAWEI X 和 索尼爱立信 8
的幅度一致,在笔直方向上多了145pt,这就意味着首页可以显示更多的内容,多出来的这20%的垂直空间,也许可以挂上更高价值的营业位。

图片 6

图2.2 HTC X 和另外设备的尺寸比较

布局

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

图片 7

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

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

图片 8

图 2.4 Motorola X 的呈现区域

Status Bar

One plus X 上的 StatusBar 低度比此前的 中兴高一些,也就是说,我们只要写死20pt低度的 frame
布局,都要大面积修(tu)改(xue)。在 BlackBerry X 上,通过打印
[[UIApplication sharedApplication] statusBarFrame]
可以见到,中度是44pt。

图片 9

图 2.5 vivo X 的情事栏低度

“假使你的 App 是隐藏 StatusBar 的,提出重新考虑。中兴 X
为用户在笔直空间上提供了更多显示余地,且状态栏中也带有了用户需要掌握的信息,除非能通过隐藏状态栏带给用户额外的市值,否则苹果提出我们将情形栏还给用户。”

另外还有少数,用户在行使 HTC X 打电话的时候,StatusBar
的莫大也不会暴发变化了。

屏幕底边

因为从没了 Home 键,HTC 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 在 vivo X
上的呈现也会有所不同了;

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

来自Session 201的建议

① xib 里适配 三星 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
的导航栏的视图层级结构暴发了转变,和 OPPO 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