iPhone|iPhone X适配笔记（从0开始） iPhoneX适配笔记（从0开始）

一、历代iPhone的尺寸

iPhone4640, 960 iPhone5640, 1136 iPhone6750, 1334 iPhone6P 1242, 2208 iPhoneX1125, 2436

二、iPhone X有何不同

1.使用3x 图，与iphone7宽度一样，比iPhone7高 2.状态栏高度是44（比iphone7高24），title栏高度是44（一样），大字标题largetitle高度是52（可不设置），底部多了一个34的高度（小横杆栏）

三、如何让iPhone X顶天立地（铺满全屏）

图中，上半部是直接在iPhone X上跑的效果，下半部是适配iPhone X之后的效果，适配的方法很简单---多加一张iPhone X的启动图就行了,尺寸为1125*2436

文章图片
启动.png

文章图片
配置.png 四、高度的全局纯代码适配

按照屏幕的宽度和高度不同，是有一个比例的，一般设计师只按某一款iPhone 出图，我一般是让出iphone6的图，宽度和高度自己调节，在设置宽度方面我用的宏是： #define BYW ([UIScreen mainScreen].bounds.size.width/375)高度方面，因为iPhone X之前的几款机型状态栏、导航栏和tabBar的高度在不同机型上都是一样的，所以可以根据页面有哪些元素写几套自己常用的布局自己计算，以下是按有状态栏和导航栏，无tabBar来做的示例： - (CGFloat)getSNhight:(CGFloat )H{ float status_H = 20; //状态栏 float navBar_H = 44; //导航栏 if (iPhoneX) { H = H * ((812 - 44 - navBar_H)/(667 - 44 - navBar_H)); //iPhone X的状态栏高度是44 }else if (iPhone6P) { H = H * ((736 - status_H - navBar_H)/(667 - status_H - navBar_H)); }else if (iPhone6){ H = H; }else if (iPhone5){ H = H * ((568 - status_H - navBar_H)/(667 - status_H - navBar_H)); }else if (iPhone4){ H = H * ((480 - status_H - navBar_H)/(667 - status_H - navBar_H)); }else{ H = H * 1.2; } return H; } 用法的示例代码： [_phoneNumView mas_makeConstraints:^(MASConstraintMaker *make) {//手机号 make.left.equalTo(ws.mas_left).offset(30*BYW); make.width.offset(KScreenWidth - 60*BYW); make.height.offset([[BYFrames shareFrames]getSNhight:44]); make.top.equalTo(ws.logoImgView.mas_bottom).offset([[BYFrames shareFrames]getSNhight:50]); }]; BTW: 机型判断参考：（手机屏幕的尺寸） #define iPhoneX ([UIScreen instancesRespondToSelector:@selector(currentMode)] ? CGSizeEqualToSize(CGSizeMake(1125, 2436), [[UIScreen mainScreen] currentMode].size) : NO)

【iPhone|iPhone X适配笔记（从0开始）】五、具体页面的设置

1.masonry布局更新到最新版本的masonry,使用SafeArea布局在控制器中，当view添加到控制器的View上时，top和bottom 需要采用safeArea布局，宏代码为： #define edgesView(fView)\ if (@available(iOS 11.0, *)) {\ make.left.width.equalTo(fView); \ make.top.equalTo(fView.mas_safeAreaLayoutGuideTop); \ make.bottom.equalTo(fView.mas_safeAreaLayoutGuideBottom); \ }else{\ make.edges.equalTo(fView); \ } 修改前后的代码及效果示例：