(0010) iOS 开发之UI布局兼容 4s/5/6/7 屏幕解决方案

iOS开发技术分享群 147787076

如上带标注的效果图，是1080*1920 也就是6p 的尺寸。如何根据6p的标注，在各种iPhone 尺寸上完美适配尼？

适用：UI 各屏幕／分辨率适配方案（只针对竖屏iPhone页面，并且不太多的不定因子）

640*960       4     0.66666

640*1136     5     0.56338

750*1334     7     0.56221

1080*1920  7+   0.5625

1242*2208   

不定因子：就是label 的text在6p 效果图上显示，但在5/4s可能显示三行，量取时的标注只是在6p中两行标注。而跑到5/4s上时，可能变成了三行，我叫这种为不定因子。

W6p H6p 为6p效果图的标注；Wtep Htep为对应到各个屏幕分辨率上的标注

w = W6p* SreenWidth/1080     W6p:Wtep = 1080:(SreenWidth*2) 
即：Wtep  = W6p*(SreenWidth*2)/1080

h = H6p*SreenHeight/1920      H6p:Htep = 1080:(SreenHeight*2) 
即：Htep  = H6p*(SreenHeight*2)/1920

1.居中对齐的，x坐标  用（SreenWidth－控件的宽）／2

2.居左的对齐的，x坐标 用 x = W6p* SreenWidth/1080

3.4s 尺寸上的高的标注使用5的比例就是也使用，640*1136，这样基本都按9：16的比例。算出对应对应到各个屏幕分辨率上的标注。那么4s
屏幕上的纵向标注实际上略微偏大。可以不略不计。

有一种情况：就是label 的text在6p 效果图上显示，但在5/4s可能显示三行，量取时的标注只是在6p中两行标注。而跑到5/4s上时，可能变成了三行，我叫这种为不定因子。那么此时根据上面的计算是不对的，因为你算的是两行的比率。但到5/4s实际上是三行。从而造成（不定因子）部分视图“红杏出墙”。

因此，需要从新加上多出来额高度。

// 子视图中有不定因子，所以要重新计算不定因子多出来的高度

- (void)freshBaseViewFrame

{

   
// 效果图上标注的高

    CGFloat sixPLabelHeight = GetAdaptiveViewRectHeight(105);

    // 当前设备的高度

    CGFloat currentLabHeight = _messageLab.bounds.size.height;

    

    CGSize temSize = _baseView.size;

    if (currentLabHeight>sixPLabelHeight) {

        temSize.height = temSize.height+currentLabHeight-sixPLabelHeight;

    }

    _baseView.size = temSize;

}

#define kScreenWidth   [[UIScreen mainScreen]bounds].size.width 
//屏宽

#define kScreenHeight  [[UIScreen mainScreen]bounds].size.height
//屏高

// 效果图一般是1080*1920（1242*2208）而实际6p屏幕坐标尺寸是414*736 

// 这里要处理两个问题；分辨率>1920*1080和4s上高度太小，最高采取1920*1080，4s采取5的640*1136，使所有都符合16:9.

//  用来得到设备的自然分辨率

#define DeviceScreenScale [UIScreen mainScreen].scale   

// 分辨率的宽 例如6p 1080

#define DeviceScreenResolutionX   kScreenWidth*DeviceScreenScale >1080 ?
1080:kScreenWidth*DeviceScreenScale

// 分辨率的高 例如6p 1920

#define DeviceScreenResolutionY   kScreenHeight*DeviceScreenScale >1920 ?
1920: (kScreenHeight*DeviceScreenScale<1136 ?1136:kScreenHeight*DeviceScreenScale)

// 得到对应到各个屏幕分辨率上的对应标注（relative annotations = RA）

#define  RAMinX(Wx6p)      (Wx6p*(DeviceScreenResolutionX))/(1080.0)   //对应到设备上的居左的标注

#define  RAMinY(Hy6p)      (Hy6p*(DeviceScreenResolutionY))/(1920.0)   //对应到设备上的居上的标注

#define  RAWidth(W6p)      (W6p*(DeviceScreenResolutionX))/(1080.0)    //对应到设备上的控件宽的标注

#define  RAHeight(H6p)     (H6p*(DeviceScreenResolutionY))/(1920.0)    //对应到设备上的控件高的标注

// 根据上面的标注计算，获得各个屏幕分辨率上对应的坐标单位 （4s 的高按5的处理）

#define  temkScreenHeight kScreenHeight<568 ?568:kScreenHeight

//  X
为6p效果图上的居左标注

//  Y
为6p效果图上的居上标注

//  W
为6p效果图上的宽的标注

//  H
为6p效果图上的高的标注

#define  GetAdaptiveViewRectMinX(X)    (RAMinX(X)*kScreenWidth)/(DeviceScreenResolutionX)

#define  GetAdaptiveViewRectMinY(Y)    (RAMinY(Y)*(temkScreenHeight))/(DeviceScreenResolutionY)

#define  GetAdaptiveViewRectWidth(W)   (RAWidth(W)*kScreenWidth)/(DeviceScreenResolutionX)

#define  GetAdaptiveViewRectHeight(H)  (RAHeight(H)*(temkScreenHeight))/(DeviceScreenResolutionY)

根据6p效果图的标注,使用GetAdaptiveViewRect的宏，设置控件的坐标和大小即可。

中间弹框，实际运行在各设备上的效果，完美。