随着苹果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间距,其余地方不用动。

image

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

image

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

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

image

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

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

image

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

好了就介绍到这里!