AutoLayout适配教程（一）控件的等比例伸缩

野性酷女 2022-08-23 00:53 90阅读 0赞

## AutoLayout适配教程（一）控件的等比例伸缩 ##

在Storyboard开发（Xib）中，控件的等比例伸缩适配是iPhone不同机型屏幕适配的一个难点也是重要。这边以一个首界面的4个button等比例伸缩适配为例。效果图是以6的尺寸出的，Storyboard中屏幕size也是以4.7寸为基础。效果图如下：  
![效果图][20160604143957432]

（PS：教程对应代码`Github`地址，需要的可以[点击进入Github][Github]）

也可以直接在终端下用命令进行下载：

ishios-MacBook-Pro:~ shixiongwei$ git clone https://github.com/IDOshi201109/TjjWidgetEqualProportion

未使用`AutoLayout`适配前各个机型下运行效果如下：  
**4/4S：**  
![4s][]

**5/5S/5SE:**  
![5s-1][]

**6/6S:**  
![6s][]

**6P/6S P**  
![6p][]

**分析：**  
从上面的运行效果图看，只有iPhone6屏幕上的显示是正常的，因为我们在storyboard中拖取空间，就是以4.7寸屏幕为基准的。在4S、5S屏幕闪，会显示不全。在6Plus屏幕上，屏幕右边空出太多。其实这么都是没有对屏幕进行适配的问题。  
下面我们将一步一步截图进行AutoLayout适配讲解。  
**AutoLayout适配教程（一） 控件的等比例伸缩**  
**第一步：**  
选中4个button，（从左上编号1，右上编号2，左下编号3，右下编号4），设置为等宽、等高、等比例。操作如下图：  
![1][]

**第二步：**  
对button1进行左、上的约束。  
![2][]

**第三步：**  
对button2（右上）进行左、上、右约束。  
![3][]

第四步：  
对button3（左下）进行左、上约束。  
![4][]

第五步：  
对button4（右下）进行左、上、右约束。  
![5][]

这边等比例伸缩，没有固定设置button的宽度和高度。4个button都是正方形，每个button进行等比例约束。  
最终适配之后运行效果图如下：  
![8][]

[20160604143957432]: /images/20220722/6c7fe648437e4a26935a8020a18ee2b5.png
[Github]: https://github.com/IDOshi201109/TjjWidgetEqualProportion
[4s]: /images/20220722/e995ae32ccd64a99a75bf5c8fb9cd4d8.png
[5s-1]: /images/20220722/a6a275fff4c74defba3c40f6b57b3034.png
[6s]: /images/20220722/ea760b3306fa49c6b329dc4dceb44336.png
[6p]: /images/20220722/12132c620d22427f8a9f3dbb1945d11d.png
[1]: /images/20220722/f99977af281040eaae6df9f29dba50a5.png
[2]: /images/20220722/d6fc6b8f119a426fa0dc0fc418724f44.png
[3]: /images/20220722/2b37f50fc0134f178b142685fc4814ee.png
[4]: /images/20220722/c8b5648d204d40aea907e3ea80257ce0.png
[5]: /images/20220722/6d4480d8d78c44d6835f23a9222a8ee9.png
[8]: /images/20220722/6d19064c18504326af74252510eaabce.png