适配iOS 11与iPhoneX

2017-09-27 本文已影响14373人 mengkeer

前段时间苹果发布新产品，iPhone8、iPhone 8 plus、iPhoneX，同时也发布了iOS 11，之前一直吐槽Android的适配，现在也第一次体会到了面向机型适配的感受了。反正苹果开心了，友商看到所谓的产品也开心了，大家都是买买买，苦逼的只有我们这群开发者了。

ps:以下内容一些引用于它人的博客文章，我都会给出来源的。一些为自己的见解，理解错误麻烦大家指正。
注1：一些需要适配的点可能只在我们公司的APP上出现了，如果你们的APP没有这种情况请忽略
注2：以下图片均来源于网络，如有侵权请告知，我会添加其来源，我怕我赔不起

iOS 11更新的内容(开发)

强烈推荐查看这位大神的文章你可能需要为你的APP适配iOS11
WWDC：Updating Your App for iOS 11
PDF版：Updating Your App For iOS 11

iPhoneX人机交互指南(开发&设计师)

官方iPhoneX人机交互指南
中文版iPhoneX人际交互指南
强烈推荐UI 設計師需要知道的 iPhone X 細節

下文大部分引用自《UI 設計師需要知道的 iPhone X 細節》这篇文章，注意这篇文章原文需要V.P.N翻墙阅读。

iPhoneX屏幕大小

竖屏尺寸：1125px × 2436px(375pt × 812pt @3x)
横屏尺寸：2436px × 1125px(812pt × 375pt @3x)

与其它iOS设备的差异

以下是与iPhone 6、7、8 (375×667pt) 相比。
Status Bar 高度由 20pt 增长为44pt。

status bar

底部需要预留 34pt 给 Home Indicator区域(下面有详细说明)

Home Indicator

宽度不变，高度多出 145pt，但由于 Status Bar 以及 Home Indicator，实际上可有效利用的高度为
145 – 24 (Status Bar) – 34 (Home Indicator) = 87pt

差异对比

键盘高度

键盘高度由 216pt 增长为 291pt，设计文字区域时要小心

键盘高度变化

包含 Home Indicator，Tab Bar 高度由 49pt 增长为 83pt。(下面有详细说明)

Home Indicator区域

注意横屏时Home Indicator的高度为21pt，需要格外注意

横屏时

总结

高度变化	Normal Height	iPhoneX Height
UINavigationBar	64	88
UIStatusBar	20	44
UITabbar	49	83

一般设计原则

如果你的 UI「顶部」有 Navigation Bar 或其它类似的UI控件，那么一般来说，在设计稿将 Navigation Bar 的背景色往上延伸 44pt，「垫在 Status Bar 后方」作为背景色即可（见下图）。
如果你的 UI「底部」有 Tab Bar、Toolbar 或其它类似的UI控件，在设计稿时将背景色往下延伸 34pt，「垫在 Home Indicator 后方」作为背景色即可。

设计原则
注意：若是使用系统原生 (Native) 的 Navigation Bar、Tab Bar 或 Toolbar，以上的行为系统 (UIKit) 都将自动替你完成，设计师不需要特別向开发者说明。。也就是说如果Navigation Bar或者tabbar不是原生的，则都必须重写以适配iPhone X

边距

由于 iPhone X 屏幕四边有圆角，上方有感应区域 (Sensor Housing⋯⋯或俗称刘海)，因此 UI 设计师需要留意，内容在展示、或是随着使用者操作、滑动时，最好要考虑到这些因素，不要让关键的 UI 被圆角剪裁，或是被 Sensor Housing 遮挡。

Safe Area 与 Layout Margins

一般在做 UI 设计，背景色或较不重要的內容可完整地延伸至屏幕边缘；主要的内容呈现区域 (例如 Table View) 会往内缩 (indent) 一层，称为「Safe Area」；而通常文字或是按钮等更加关键的物件，考虑到美观及操作性，會再内缩一层，称之为「Layout Margins」。这边提到的关键字皆是 iOS 开发的专有名词，可用来与开发者沟通。

Layout Margins

竖屏 (Portrait)

竖屏时的 Safe Area 可延伸至屏幕左右两侧，上部留 44pt 給 Status Bar；Layout Margins 通常左右再内缩 16pt。

竖屏

横屏(Landscape)

横屏时的 Safe Area 左右两侧皆内缩 44pt；Layout Margins 通常左右再内缩 16pt。

横屏

需要特別注意的是，横屏时有一侧有 Sensor Housing 挡住，另一側侧是干净的，但做设计时尽可能左右对称内缩，可造成体验的的一致性，帮助使用者建立操作的肌肉记忆 (Muscle Memory)。

Home Indicator

Home Indicator 为 iPhone X 屏幕下方的一个操控區域，外观是一条粗线 (手把)，由屏幕底部往上滑动可返回主界面 (Home Screen)，或进入多任务管理界面 (App Switcher)。

注意：该“粗线”不可自定义外观，系统会自动判断背景颜色，深色背景时显示浅色 Bar，浅色背景时则显示深色 Bar。

Edge Protection

如果你的 UI 带有由屏幕底部往上滑动 (Swipe) 的手势，可能会与系统的手势冲突，这时可告诉开发者该 UI界面需要启用「Edge Protection」。
启用时，Home Indicator 将会变得较为透明，并下降位置 (但还在)，让全屏体验更为完整。当使用者第一次由下往上滑动时，此手势将保留给你的 App 使用，而不会触发 Home Indicator；当使用者在这时进行第二次滑动，才会触发。
注意：此选项将造成使用者不便，因此当真的有需要时再考虑启用

Auto-Hide

UI 中若是有影片播放等需要降低干扰的情况，需要完全隐藏 Home Indicator，可启用「Auto-Hide」选项，启用时，若是使用者数秒内沒有操纵行为，Home Indicator 将自动隐藏，直到使用者触碰界面才会再度出现。
注意：此选项将造成使用者困惑，因此當真的有需要时再考虑启用。

适配iOS11与iPhoneX过程中遇到的问题

问题 1 app上下为黑色区域，不是全屏（iPhoneX）

你可能需要添加新的LaunchImage
编辑LaunchImage的Contents.json文件，在前面添加如下代码
注意替换文件名

{
        "extent" : "full-screen",
        "idiom" : "iphone",
        "subtype" : "2436h",
        "filename" : "iPhoneX.png",
        "minimum-system-version" : "11.0",
        "orientation" : "portrait",
        "scale" : "3x"
     },
     {
        "extent" : "full-screen",
        "idiom" : "iphone",
        "subtype" : "2436h",
        "filename" : "iPhoneX.png",
        "minimum-system-version" : "11.0",
        "orientation" : "landscape",
        "scale" : "3x"
     },

问题2 UITableView，cell，header，footer高度异常

在iOS 11中默认启用Self-Sizing，，Headers, footers, and cells都默认开启了Self-Sizing，所有estimated 高度默认值从iOS11之前的 0 改变为UITableViewAutomaticDimension
要解决此类异常的话，可通过以下代码解决

    _tableView.estimatedRowHeight = 0;
    _tableView.estimatedSectionHeaderHeight = 0;
    _tableView.estimatedSectionFooterHeight = 0;

问题3 tabbar或navigation Bar异常（iPhoneX）

根据上面所述，iPhoneX的导航栏高度为88，tabbar高度为83的，如果你的界面看起来不是这样的话，那么应该是tabbar 或 navigationBar为自定义的，你需要重写你的代码以适配iPhoneX

问题4 导航栏按钮间距变化(UIBarButtonItem) (iPhoneX & iOS 11)

原因是iOS11以后，导航栏的层级发生了变化，也无法时使导航栏左右按钮边距为0了。
建议参考一下这篇文章
App界面适配iOS11（包括iPhoneX的奇葩尺寸）

问题5 适配安全区域的问题

安全区域时iOS11新增的概念，基本每个APP都得或多或少地适配安全区域，我自己也花了很长时间来适配，但都是基于这位大神的文章来适配的，强烈建议阅读这篇文章iOS 11 安全区域适配总结

问题6 textField问题

设置textFiled的左边文字偏移距离一般用用一个leftView，但是有的是设置一个paddingLeft，如下代码

    [self.textField setValue:[NSNumber numberWithInt:16] forKey:@"paddingLeft"];

然而！！这个代码在iOS11下失效了，没有间距了，所以还是老老实实用leftView吧

    self.textField.leftView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 16, 44)];
    self.textField.leftViewMode = UITextFieldViewModeAlways;

问题7 push或pop时UITableView下移的问题

其实不单单是UITableView，只要是UIScrollView的子类也会发生此类问题,该类问题比较特殊，在我们的APP里，有些界面发生了此类问题，有些界面没有，所以我也不清楚是怎么产生此类问题的。ps:前段时间我看支付宝大量界面有这个bug，后来不知道什么时候修复了，但至今还有很多app有这个bug

以下是我的解决方案：
首先为了解决UITableView push或pop时下移，需要设置

self.tableView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;

这是为了避免SafeAreaInsets影响到UITableView的内边距，此时push或pop时就不会发生偏移了
但是这就引发了另一个问题，在iPhone X下，底部是有一块高度为34的Home Indicator区域，按照苹果的交互设计原则， Home Indicator区域不应存在任何手势或点击事件，且当UITableView滑到底部时这块区域应该留出来。

此时会造成错误效果，如图

image.png

为了解决该问题必须手动设置UITableView的底部内边距为34

self.tableView.contentInset = UIEdgeInsetsMake(0, 0, 34, 0);

注意：此时还有一个小问题，那就是滚动条scrollIndicator，发现滚动条已经到了屏幕底部，当然只是由于屏幕四周是圆角的，所以下面那以小部分没有显示出来，被圆角给截掉了。为了达成一致效果，滚动条也需要设置内边距
即

self.tableView.scrollIndicatorInsets =  UIEdgeInsetsMake(0, 0, 34, 0);

最终代码为：

#ifdef __IPHONE_11_0
    if ( [self respondsToSelector:@selector(setContentInsetAdjustmentBehavior:)]) {
        if (@available(iOS 11.0, *)) {
            self.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
        } else {
            // Fallback on earlier versions
        }
    }
    if(IS_IPHONE_X && CGRectGetHeight(self.frame) == SCREEN_HEIGHT - PHONE_NAVIGATIONBAR_HEIGHT){
        self.contentInset = UIEdgeInsetsMake(0, 0, PHONEX_HOME_INDICATOR_HEIGHT, 0);
        self.scrollIndicatorInsets = self.contentInset;
    }
#endif
//PHONE_NAVIGATIONBAR_HEIGHT为导航栏高度宏定义，PHONEX_HOME_INDICATOR_HEIGHT为Home Indicator的高度宏定义

这样就达到正确效果了，如图

image.png

ps: 关于这个bug，我能想到的解决方法就是这个，如果大家有什么好的办法，欢迎留言。

其它一些坑

1.相册访问权限

iOS11上系统默认打开了用户相册的访问权限，但是当你保存图片时APP就会crash，原因是需要在info.plist再申明一个NSPhotoLibraryAddUsageDescription的key，同时为了兼容iOS11以前的机型，保留以前NSPhotoLibraryUsageDescription的key

2.twitter

今天刚发现的一个坑，那就是iOS11设置里并没有集成twitter等第三方应用了，如下图，这是iOS10的截图，iOS11就没有这些选项了。

image.png

一些系统的关于这些APP的API也申明被废弃了，并推荐使用官网SDK，如图

image.png

另外访问twitter官网查阅资料得知

iOS 11 no longer supports using Twitter through the built-in social framework.
Instead,you can use Twitter Kit 3 to Tweet, log in users, and use the Twitter API.

所以APP里集成twitter分享同学要注意了，一定要检查下twitter分享功能。其它APP分享如Facebook，微博分享功能等应该是完好的。

如果大家好的适配iOS与iPhoneX的文章，欢迎大家在下面留言

真蛋疼
最后的图片引用自适配iOS11&iPhoneX的一些坑

适配iOS 11与iPhoneX

iOS 11更新的内容(开发)

iPhoneX人机交互指南(开发&设计师)

与其它iOS设备的差异

键盘高度

总结

一般设计原则

边距

Safe Area 与 Layout Margins

竖屏 (Portrait)

横屏(Landscape)

Home Indicator

Edge Protection

Auto-Hide

适配iOS11与iPhoneX过程中遇到的问题

问题 1 app上下为黑色区域，不是全屏（iPhoneX）

问题2 UITableView，cell，header，footer高度异常

问题3 tabbar或navigation Bar异常（iPhoneX）

问题4 导航栏按钮间距变化(UIBarButtonItem) (iPhoneX & iOS 11)

问题5 适配安全区域的问题

问题6 textField问题

问题7 push或pop时UITableView下移的问题

其它一些坑

1.相册访问权限

2.twitter

猜你喜欢

热点阅读

适配iOS 11与iPhoneX

iOS 11更新的内容(开发)

iPhoneX人机交互指南(开发&设计师)

与其它iOS设备的差异

键盘高度

总结

一般设计原则

边距

Safe Area 与 Layout Margins

竖屏 (Portrait)

横屏(Landscape)

Home Indicator

Edge Protection

Auto-Hide

适配iOS11与iPhoneX过程中遇到的问题

问题 1 app上下为黑色区域，不是全屏（iPhoneX）

问题2 UITableView，cell，header，footer高度异常

问题3 tabbar或navigation Bar异常 （iPhoneX）

问题4 导航栏按钮间距变化(UIBarButtonItem) (iPhoneX & iOS 11)

问题5 适配安全区域的问题

问题6 textField问题

问题7 push或pop时UITableView下移的问题

其它一些坑

1.相册访问权限

2.twitter

猜你喜欢

热点阅读

问题3 tabbar或navigation Bar异常（iPhoneX）