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

一、历代iPhone的尺寸

iPhone4  640, 960
iPhone5  640, 1136
iPhone6  750, 1334
iPhone6P 1242, 2208
iPhoneX  1125, 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)

五、具体页面的设置

    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);\
                }
          修改前后的代码及效果示例：

Snip20180102_109.png

最后编辑于：2018.01.02 16:07:55