【极客班】注册表Autolayout实战

需求分析

题目：完成一个【登陆-注册】的主界面。使用约束，让程序能够在4寸以上机型适配。
首先4寸屏应该包括iPhone和iPad，而且要适配它们横竖的情况；
那么一个视图的控件应该会随着屏的缩放而缩放；横着和竖着子视图的布局是不同的；且字体也会随着屏不同而出现响应的变化。

Autolayout约束设计

为了实现一个视图的控件随着屏的缩放而缩放的效果，要设计一个注册界面；需要先把rootView按比例分割成几个子View。这里我设计了两个子View，一个用来放项目介绍信息，一个放控件。其中下面一个子View又分割成了两个View，一个用来存放label与textfield控件，一个用来存放按钮控件。再在这个子View里面设计控件，并设置具体的垂直和水平距离；且设置几个空间的高度比例关系。这样就实现了下图所示的效果：

image.png

adaptive layout设计

一开始我们是在any W和any H中设置的，横屏的话需要把它调成w Any和h Compact；横着的话发现有些控件根本看不清楚，需要进一步调节它的子View，此时点击单个子View，在界面上把某些约束删除；但这不是真的删除，只是变成了灰色，如下图所示（不打勾说明横屏的时候该约束不起作用）。若在该情况下添加约束，就是上面打勾，下面不打勾，说明这种约束只在横屏的时候起作用。

image.png

不仅如此字体也要做相应的处理，若字体比控件大，就要做相应的缩小；如下图所示：

image.png

且不同屏的字体大小不同（iPad与iPhone），这里也设置了一个特定情况（w Compact和h Any时）字体会变小，如下：

image.png

这样我们就可以实现如下图的效果了：

image.png