iPhone屏幕适配，等比缩放

App的设计图根据是否可以滚动分成两种设计图，下面我们说说这个不可以滚动的设计，怎么在各种不同尺寸的设备中适配。

image.png

这是以iPhone8的尺寸（750*1334）做的效果图。
类似这种页面，就是不可滚动的效果图。
我们按照标注，在xib或者storyboard用autolayout布局；

为了展示效果图，在布局文件底部添加了一个正方形，居中显示

image.png image.png image.png
image.png image.png
同样的布局文件，因为我们的标注是基于iPhone8的尺寸，结果只有iPhone8的显示效果图是满意的，其他设备的的效果图都无法接受。

设备	宽/缩放比	高/缩放比
效果图	750	1334
iPhone4s	640/0.85	960/ 0.72
iPhone5	640/0.85	1136/0.85
iPhone8	750/1.0	1334/1.0
iPhone8 Plus	1242/1.66	2208/1.66
iPhoneX	1125/1.5	2436/1.82

在ios的布局方式中，有一种自动布局叫做Autoresizing。
说明：这种布局方式不能与autolayout同时使用。

image.png image.png image.png
image.png image.png

在不同设备上的效果，总体感觉还是可以，即使在最小的iPhone4s，也是可以显示完整的；但是，红色的正方形控件，在iPhone4s、iPhoneX上面变形了，如果这个正方形是ImageView的话，显示出来的图片也会变形了，这个肯定是不合格的。
但在Autoresizing这种布局上，没办法去处理这个问题。

设备	宽/缩放比	高/缩放比
效果图	750	1334
iPhone4s	640/0.85	960/ 0.72
iPhone5	640/0.85	1136/0.85
iPhone8	750/1.0	1334/1.0
iPhone8 Plus	1242/1.66	2208/1.66
iPhoneX	1125/1.5	2436/1.82

根据上图，各个设备的屏幕宽高与效果图的宽高的缩放比例是不同，只有iPhone8 Plus是近似相同。这就造成了上面的正方形控件变形的原因。
除此之外，我们还能怎么做呢。

这篇文章 地址：https://www.jianshu.com/p/eab78d779c7e 给了思路.

image.png

- (void)viewDidLoad {
    [super viewDidLoad];

    CGRect rect = [UIScreen mainScreen].bounds;
    float x = rect.size.width / 375;
    float y = rect.size.height / 667;
    NSLog(@"screen rect === %@",NSStringFromCGRect(rect));
    NSLog(@"y==%@",@(y));
    NSLog(@"x==%@",@(x));
    
//    CGRect rect = [UIScreen mainScreen].nativeBounds;
//    float x = rect.size.width / 750;
//    float y = rect.size.height / 1334;
//    NSLog(@"screen rect === %@",NSStringFromCGRect(rect));
//    NSLog(@"y==%@",@(y));
//    NSLog(@"x==%@",@(x));

    //保证宽高的缩放比一致，才不会出现正方形控件变形的情况。
    //取缩放比小的那个，才不会出现界面超出屏幕
    if(x > y){
        self.view.transform = CGAffineTransformMakeScale(y, y);
    }else{
        self.view.transform = CGAffineTransformMakeScale(x, x);
    }
}

代码已经上传了 DEMO

补充

在xib或者storyboard用百分比布局

1.控件宽高的百分比

image.png image.png

控件的宽高百分比这个简单
1).设置控件自身的宽高比；
2).设置控件的宽度等于父View的宽度，再设置Multiplier的比值(控件宽度:父View的宽度)
这样控件会随着屏幕的大小而缩放，控件自身也有宽高比，不会发生变形。

2.控件宽高的百分比

image.png
两个红色的控件，
第一个是距离左边距37.5的距离；在不同屏幕，这个值是固定的。
第二个是距离父View中线X坐标的0.2倍；在不同屏幕，这个值是变化的。
计算公式（iPhone8）：375(屏幕宽)0.5(中线X坐标)0.2(系数)=37.5。

第一个控件：固定左边距

image.png

第二个控件：百分比左边距

image.png
跟第一个控件的用法，主要区别是
SecondItem:SuperView.Center.X;

Constant:0(固定值)
Multiplier:0.2（比例）

这样可以在不同的屏幕中，对比看到两个控件实际左边距的差别。

代码已经上传了 DEMO