2018-06-07 自动旋转和自动调整大小

一.在模拟器中旋转

按住Command+⬅️或者Command+➡️进行相应的操作,iPhone默认支持正、左、右三个方向的旋转,iPad默认支持四个方向旋转。

二.使用约束控制界面

在我们设计完一个界面之后,竖屏是正常的,突然发现横屏变得很奇怪。


2018-06-07 自动旋转和自动调整大小_第1张图片

2018-06-07 自动旋转和自动调整大小_第2张图片

再看看我们的约束就知道了,是因为我们的UL没有和父屏幕建立相应的约束,导致旋转之后,UL在父布局中的位置发生了改变,四个label位置在横屏都发生改变了,这时候需要我们右键到父视图,建立相应的联系。


2018-06-07 自动旋转和自动调整大小_第3张图片

可以看到即使是横屏我们也可以操作成功。
2018-06-07 自动旋转和自动调整大小_第4张图片

三.与屏幕等宽的标签

当我们设置UL和UR的背景宽度大小的时候,可以发现,旋转屏幕之后它们是不等宽的。


2018-06-07 自动旋转和自动调整大小_第5张图片

解决方法:在PIN里面设置Equal Widths,这代表着他们在水平的约束上面宽度相等。


2018-06-07 自动旋转和自动调整大小_第6张图片

2018-06-07 自动旋转和自动调整大小_第7张图片

四.创建自适应布局

有时候我们想要一个控件在竖屏的时候显示较长,横屏的时候显示较宽,按以下的视图来看,好像效果不太好。


2018-06-07 自动旋转和自动调整大小_第8张图片

2018-06-07 自动旋转和自动调整大小_第9张图片

怎么办?这时候就要创建基于横向的布局了:


2018-06-07 自动旋转和自动调整大小_第10张图片

只选择Height则代表你希望对所有满足 Width:Any且Height:Regular 的情况单独设计UI,如图:
2018-06-07 自动旋转和自动调整大小_第11张图片

再单独设置之后,就可以了!
2018-06-07 自动旋转和自动调整大小_第12张图片

你可能感兴趣的:(2018-06-07 自动旋转和自动调整大小)