关于IPHONE X适配问题

2018/11/22 17:43 分类：技术交流浏览：21

随着苹果iPhoneX上市大卖以来，市场份额越来越高，UI设计师不得不掌握IPHONEX的适配，今天就来讲讲IPHONEX的基础适配，高手绕道！

iOS各个屏幕尺寸就不说了这里只介绍X的尺寸和适配 X的尺寸为1125X2436px,设计逻辑尺寸为：375X812PT 相对于iPhone8屏幕来说，高度增加了约435PX（@3），对于经典屏幕的5 6 7 8来说，屏幕内部都是安全显示区域，X的屏幕多了怪异的“齐刘海”以及周边的圆角，所以就多了2个不可显示内容的非安全区域，上面的区域用来显示状态，苹果给出的尺寸为44PT，下方是绝对禁止可操作按钮出现的34PT非安全区域（底部横条相当于home键，可以左右滑动切换应用），了解了这个后我们就很好理解了，再来项目中看看需要注意的地方和基本的适配方法。

页面情况分类和处理方法：

1 有标题栏，没有底部导航栏的页面，只把标题栏从原来的64PT加长到88PT，留出非安全区域，内容距离底部保留10PT间距，其余地方不用动。

2 有底部导航栏、或者基于底部固定的按钮页面，底部导航、按钮需要留出34PT，也就是底部导航/按钮+34PT的高度其它不变。

3通屏情况下（没有标题栏，比如首页banner通屏，或者我的详情页面有背景图时）方法是把banner或者背景图做长，加入顶部44PT中，另外图片要单独切一套尺寸，适配IPHONE X

4如果出现搜索标题栏加BANNER通屏页面，需要特殊处理，把搜索标题栏和BANNER相应下移，目的是保证搜索标题栏在安全区域内显示，不在44PT的范围里

5 关于下拉刷新和弹窗处理

下拉刷新，刷新的动画效果要全部显示出来才开始刷新，不是超过44PT就好了，防止被中间的“齐刘海”挡住

弹窗就和以前一样，下层灰色遮罩填满处理

好了就介绍到这里！

感谢源码时代教学讲师提供此文章！

本文为原创文章，转载请注明出处！

#标签：IPHONE X,适配