手机QQ空间iPhone X适配总结

自去年9月12日苹果发布会发布iPhone X之后，新颖的设计虽然引来不少骂声，但也给iOS设计和开发者带来了新的挑战，本文总结了iOS QQ空间对iPhone X适配过程遇到的问题和解决手段。

iPhone X尺寸说明

根据苹果iPhone X适配规范，iPhone X屏幕尺寸为375 x 812pt，宽度和iPhone 6/6s/7/8一样，但高度比它们高了145pt，如下图所示。

image.png

image.png

主要有两部分需要注意，一个是顶部状态栏（俗称刘海）高度高了24pt，而且中间的刘海部分不能显示内容。另一个就是底部的Home Indicator，用以取代原来的Home物理按键，高度为34pt。

除此之外，屏幕不再是方形的，而是圆角矩形，使用的图标也是@3x，和现在的plus机型一样。屏幕的比例也和现在机型不再一样，所以在做全屏的渲染时需要考虑裁剪加黑边的情况，如下图所示。

image.png

适配过程

NeXT，下面开始填坑过程。

应用全屏化

如果应用不做修改直接运行在iPhone X上，程序只能获取到和iPhone 6一样的展示界面，通过UIScreen获取到得宽高为375 *667。而全屏化主要修改的是启动页，如果启动页使用storyboard或者xib文件，那么全屏化无需添加任何操作，同时也推荐使用该方式，但是如果之前使用的images.xassets放置启动页，那么需要把原来的xassets删除了，重新创建一个，就会出现一个iPhone X的启动图占位符，然后将1125*2436的启动图填入。

状态栏到底还要不要隐藏

在完成全屏化后我们得到的界面如下图所示。

image.png

由上图可知，状态栏展示内容其实非常少，而且不完整。因此对于一般的界面，如列表页，tab页等具有大量内容的页面应该是不推荐将状态栏隐藏，不然反而让信息显得不完整。但是一些追求沉浸体验的页面，如视频浮层、图片浮层例外。

OK，那么我们该如何适配状态栏高度呢？首先，假如之前代码中控件布局将状态栏高度写死20pt，那么很高兴地告诉你，以前挖过的坑，现在跪着也要填完。不过庆幸的是，空间代码大部分都用宏来获取状态栏高度，然后我们现在将宏改为通过函数返回高度即可，如下图所示。

CGFloat qzLib_getStatusBarHeight()
{
    return [UIApplication sharedApplication].statusBarFrame.size.height;
}

不过需要注意的是，当我们在全屏界面隐藏了状态栏之后，statusBarFrame获取到的size为0，可能会出现控件布局错乱，因此最稳妥的方法还是判断是否iPhone X返回一个常数，如下所示。

#define STATUS_BAR_HEIGHT			(isIPHONEX? 44: 20)

至于如何判断设备是否iPhone X，目前好像没有什么好方法，只好用比较设备宽高来判断了。

BOOL qzLib_isIPhoneX()
{
    return CGSizeEqualToSize([UIScreen mainScreen].bounds.size, CGSizeMake(375.0f, 812.0f)) || CGSizeEqualToSize([UIScreen mainScreen].bounds.size, CGSizeMake(812.0f, 375.0f));
}

底部黑条区域要不要显示内容

从刚才全屏化的界面中可以看到，界面底部多了一条黑条，我们将其称为Home Indicator，这是iPhone X新添加的虚拟按键，以替代原来的Home键，它支持的操作有上滑退至多任务界面，左滑和右滑切换当前程序。那么我们到底要不要在该区域展示界面内容呢？根据官方设计规范，我们需要将界面内容分为两类：纯展示类的和可交互类的。前者可能是图片、文字等信息，而后者大多是button等控件，如上图的tabbar，我们就需要将其往上提，该区域高度为34pt，获取方法如下所示，由于用到了safeArea，需要加上iOS11的判断。

CGFloat qzLib_getHomeBarHeight()
{
    CGFloat homeBarHeight = 0;
    if (@available(iOS 11.0, *)) {
        homeBarHeight = [UIApplication sharedApplication].keyWindow.safeAreaInsets.bottom;
    }
    return homeBarHeight;
}

关于底部区域中一些toolbar的显示现在适配比较纠结，那就是到底要不要修改toolbar的高度，如下面输入面板中表情滑动条的高度，根据内部适配规范我们只是把它往上提而不修改其高度，但这看上去悬空的感觉可能会有点奇怪。

image.png

但如果我们参考一些系统应用如相册中设置wallpaper时，它的底部toolbar显示为高度也变高了，然后再修改每个button的contentInsets，如下图所示。

image.png

因此有一些界面我们也是这么修改的，如feed详情页的底部输入框。

image.png

此外，对于底部HomeIndicator区域的适配还有tableview的contentInsets需要设置bottom值为该区域的高度，不然最后一个cell可能会被黑条遮挡住。

需要注意的坑

1. 关于TabBar高度，在VC的viewWillAppear中获取到的是默认原始高度49，而到了viewDidAppear时获取到的高度为83，这就导致了在popVC时可能底部tabbar发生一个从下到上的跳动，这时我们需要在viewWillAppear重新设置一下tabbar的高度。
2. 这个坑可能不能算是iPhone X的坑，应该是iOS11的坑，也可以说是被弃用的UIWebView的坑，就是调整UIScrollView内部偏移的方法改为设置contentInsetAdjustmentBehavior，如果想不受系统导航栏的影响，我们通常会设置其为UIScrollViewContentInsetAdjustmentNever。然而，对于UIWebView，我们通过一般方法只能设置其最外层的UIScrollView的behavior，对于里层的UIScrollView就无能为力了，因此我们需要hook系统创建UIWebView内部UIScrollView的方法，然后再修改其behavior。
3. 应用启动时，在初始化rootViewController的过程中，通过[UIApplication sharedApplication].keyWindow获取的keywindow是nil，这时window还未makeKeyAndVisible，因此获取homeIndicator高度改用 [UIApplication sharedApplication].delegate.window。