ios 11及iPhone X的那些事

太过爱你忘了你带给我的痛 2022-05-27 00:12 216阅读 0赞

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

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

## iOS 11更新的内容(开发) ##

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

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

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

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

![Image 1][]

iPhoneX屏幕大小

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

### 与其它iOS设备的差异 ###

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

![Image 1][]

status bar

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

![Image 1][]

Home Indicator

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

![Image 1][]

差异对比

### 键盘高度 ###

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

![Image 1][]

键盘高度变化

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

![Image 1][]

Home Indicator区域

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

![Image 1][]

横屏时

##### 总结 #####

<table> 
 <thead> 
  <tr> 
   <th>高度变化</th> 
   <th>Normal Height</th> 
   <th>iPhoneX Height</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>UINavigationBar</td> 
   <td>64</td> 
   <td>88</td> 
  </tr> 
  <tr> 
   <td>UIStatusBar</td> 
   <td>20</td> 
   <td>44</td> 
  </tr> 
  <tr> 
   <td>UITabbar</td> 
   <td>49</td> 
   <td>83</td> 
  </tr> 
 </tbody> 
</table>

### 一般设计原则 ###

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

![Image 1][]

设计原则

注意：若是使用系统原生 (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 开发的专有名词，可用来与开发者沟通。

![Image 1][]

Layout Margins

### 竖屏 (Portrait) ###

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

![Image 1][]

竖屏

### 横屏(Landscape) ###

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

![Image 1][]

横屏

需要特別注意的是，横屏时有一侧有 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的奇葩尺寸）][App_iOS11_iPhoneX]

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

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

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 1][]

image.png

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

## 其它一些坑 ##

#### 1.相册访问权限 ####

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

#### 2.twitter ####

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

![Image 1][]

image.png

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

![Image 1][]

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的文章，欢迎大家在下面留言

![Image 1][]

真蛋疼

最后的图片引用自 [适配iOS11&iPhoneX的一些坑][iOS11_iPhoneX]

</div>
        </div>

[APP_iOS11]: https://www.jianshu.com/p/370d82ba3939
[Updating Your App for iOS 11]: https://link.jianshu.com?t=https%3A%2F%2Fdeveloper.apple.com%2Fvideos%2Fplay%2Fwwdc2017%2F204%2F
[Updating Your App For iOS 11]: https://link.jianshu.com?t=https%3A%2F%2Fdevstreaming-cdn.apple.com%2Fvideos%2Fwwdc%2F2017%2F204kty9amomlmk222%2F204%2F204_updating_your_app_for_ios_11.pdf
[iPhoneX]: https://link.jianshu.com?t=https%3A%2F%2Fdeveloper.apple.com%2Fios%2Fhuman-interface-guidelines%2Foverview%2Fiphone-x%2F
[iPhoneX 1]: https://link.jianshu.com?t=https%3A%2F%2Fmp.weixin.qq.com%2Fs%3F__biz%3DMzA3ODg4MDk0Ng%3D%3D%26mid%3D2651113572%26idx%3D1%26sn%3D32fe690fd14836a3a4e064d156ffab7d%26chksm%3D844c61b9b33be8afc8418e3edd25c7736f2998691ce2a4c29c3c18fa87b08b5fd384b87a0085%26mpshare%3D1%26scene%3D23%26srcid%3D0913HbB372J6KVHVmKfqcVST%23rd
[UI _ iPhone X]: https://link.jianshu.com?t=https%3A%2F%2Fmedium.com%2Fuxabc%2Fiphone-x-ui-design-specs-696fd4f262b6
[Image 1]: 
[App_iOS11_iPhoneX]: https://www.jianshu.com/p/352f101d6df1
[iOS 11]: https://www.jianshu.com/p/efbc8619d56b
[NSPhotoLibraryAddUsageDescription]: https://link.jianshu.com?t=https%3A%2F%2Fdeveloper.apple.com%2Flibrary%2Fcontent%2Fdocumentation%2FGeneral%2FReference%2FInfoPlistKeyReference%2FArticles%2FCocoaKeys.html%23%2F%2Fapple_ref%2Fdoc%2Fuid%2FTP40009251-SW73
[NSPhotoLibraryUsageDescription]: https://link.jianshu.com?t=https%3A%2F%2Fdeveloper.apple.com%2Flibrary%2Fcontent%2Fdocumentation%2FGeneral%2FReference%2FInfoPlistKeyReference%2FArticles%2FCocoaKeys.html%23%2F%2Fapple_ref%2Fdoc%2Fuid%2FTP40009251-SW17
[iOS11_iPhoneX]: https://www.jianshu.com/p/c355cc4b12c2