iOS开发：为你的应用兼容iPhone X

   <p>每年苹果爸爸都会在六月份的WWDC上发布有关下一代iOS的新特性和改动内容，开发者们有半年时间去准备和兼容最新版本的iPhone和操作系统。</p>    <p>但是这一次为了在发布会前不泄露iPhone X的相关信息（实际上我们早就知道了=。=），苹果直到前几天才在官网上线了兼容全面屏的指导文档和视频。离iPhone X正式上市还有两个月不到的时间，我们需要为我们的app做哪些准备呢？</p>    <p>屏幕</p>    <p>我们在编码中使用的是以 point 为单位的屏幕尺寸（在不同设备上每个point对应的实际像素点是不一样的），iPhone 8的尺寸是 <strong>375pt × 667pt @2x</strong> ，iPhone X的尺寸是 <strong>375pt × 812pt @3x</strong> ，也就是屏幕宽度是一样的，但是高出了145pt，大概能多显示20%的内容。</p>    <p><img src="https://simg.open-open.com/show/17834a52c2bbadabd43b1f0c28f74120.png"></p>    <p>屏幕</p>    <p>注意iPhone X的屏幕素质比较好，所以它需要加载较高像素的图片，我们要提供必要的@3x资源。</p>    <p>另外由于iPhone X极高的长宽比，我们用作背景的图片都需要重新设计，以保证比例适合，内容被裁切后效果仍然ok。</p>    <p><img src="https://simg.open-open.com/show/2a436c45259b3d48e1ce41783e8df9c2.png"></p>    <p>屏幕</p>    <p>status bar</p>    <p>iPhone X的状态栏高度是高于之前所有的iPhone版本的，所以在代码里写死 kStatusBarHeight == 20 的地方 <strong>都会出错</strong> ！</p>    <p><img src="https://simg.open-open.com/show/ecad5919462a9616d72749a71957b7fb.png"></p>    <p>刘海变高</p>    <p>也就是说，之前使用固定状态栏高度来进行布局的代码都需要调整为动态布局方式，否则会出现内容被遮挡的问题。特别是图中这个64，一直在iOS开发中常数般的存在，最后也被苹果爸爸摆了一道。</p>    <p><img src="https://simg.open-open.com/show/fb29372ea3717e8ae5e4f122ca486867.png"></p>    <p>此处不能写死</p>    <p>关于状态栏另外两个需要注意的地方：</p>    <ul>     <li> <p>不要在iPhone X下隐藏状态栏，一个原因是显示内容足够高了，另一个是这样内容会被刘海切割。</p> </li>     <li> <p>现在通话或者其它状态下，状态栏高度不会变化了，程序不需要去做兼容。</p> </li>    </ul>    <p><img src="https://simg.open-open.com/show/e93d37cc395d723841898db3abf4fcf9.png"></p>    <p>高度不变</p>    <p>布局</p>    <p>iPhone X的布局有很多改变，这是因为：</p>    <ul>     <li> <p>刘海的存在使横屏的情况变得复杂</p> </li>     <li> <p>四个角变圆，需要防止内容被切割</p> </li>     <li> <p>代替home键的长条（不知道官方名字叫什么， homeBar ？）使得屏幕底部的布局需要调整</p> </li>    </ul>    <p>很多系统经典的控件，比如TableView，Collection，Navigation，TabBar等都会自动适应iPhone X（呵呵，一定会有很多坑等着打补丁或者让开发者擦屁股）。</p>    <p>Safe Area</p>    <p>iOS11引入了 safeArea 的概念，用来替代之前的 topLayoutGuide 和 bottomLayoutGuide ，safeArea用来描述视图不被任何内容遮挡的部分。它提供两种方式： safeAreaInsets 或 safeAreaLayoutGuide 来提供给你safeArea的参照值。</p>    <p><img src="https://simg.open-open.com/show/0f109ce78448b6d830881441179c5a3b.png"></p>    <p>safeArea</p>    <p>在iPhone X上，视图的默认safeArea如下图所示：</p>    <p><img src="https://simg.open-open.com/show/7853036dbd111e5c929edfc02db23c6c.png"></p>    <p>safeArea2</p>    <p>可以看到，底部的Bar还有四周圆角，都对这个safeArea进行了切割。苹果官方的设计指导是使用 <strong>以safeArea为框</strong> ， <strong>以layoutMargin为间距</strong> 来进行UI布局。</p>    <p>横屏</p>    <p>在横屏状态下，不能因为刘海的原因将内容向左或者向右便宜，要保证内容的中心对称：</p>    <p><img src="https://simg.open-open.com/show/1ebd2f5ffdc844d4cef62b5e9669ffc1.png"></p>    <p>center</p>    <p><img src="https://simg.open-open.com/show/ed873adec24942170acaef94608d1d76.png"></p>    <p>center2</p>    <p>另外，之前所有版本的iPhone tableView的cell和它的contentView的大小是相同的，开发者相对cell布局和相对contentView布局效果上不会有太大区别。</p>    <p>但是在iPhone X下，由于刘海和圆角的存在，tableView的contentView会被裁切，所以所有的布局都应该被调整为相对contentView布局，否则会越界:</p>    <p><img src="https://simg.open-open.com/show/059be7bcc35b002cf0f1bf623529a4ae.png"></p>    <p>tableView</p>    <p>一致性</p>    <p>苹果对iOS中运行的app的一致性有很高的要求，在iPhone X下，开发者不能自己去遮盖圆角、状态栏，特别是底部的homeBar，即使你认为刘海很丑，也许用户看着看着就习惯了呢……</p>    <p>关于homeBar，它的颜色是会自动适应的，保持着『时刻能找到但是又不那么显眼』的状态，所以开发者不用去为它费心添加背景啊，强调啊啥的，苹果爸爸会十分感动然后拒绝掉你的……</p>    <p>交互</p>    <p>在交互方面，iPhone X最大的改变就是底部那个无时无刻不存在的 homeBar 了，代替了原来home按键的功能，系统级的任务切换和回到桌面 、、，都是上滑这个细细的长条。</p>    <p><img src="https://simg.open-open.com/show/59a0dd6f7549313daae222eae140d979.png"></p>    <p>homeBar</p>    <p>所以苹果爸爸的意思是：</p>    <p>赶紧把你自己写的上滑手势 <strong>乖乖删掉~</strong></p>    <p>当然如果app确实需要这个手势，可以打开程序开关覆盖系统的手势，但是这样用户就需要滑动两次来回到桌面了，这会让他们非常怀念home键。</p>    <p>兼容</p>    <p>首先是iPhone X下的键盘和其他系统有区别，会多出来那个很有趣的animateEmoji工具栏，所以在做键盘相关处理的时候要关注兼容性问题，至少：高度不要写死了……</p>    <p>iPhone X的认证使用的是全新的faceId，所以如果app需要使用认证相关api，需要根据设备区分touchId和faceId，可以看 <a href="/misc/goto?guid=4959754598179231745" rel="nofollow,noindex">文档</a> 。</p>    <p><img src="https://simg.open-open.com/show/b1d074292660969c3295a0138842762b.png"></p>    <p>认证</p>    <p> </p>    <p>来自：http://www.cocoachina.com/ios/20170920/20608.html</p>    <p> </p>