iOS 自动布局 Auto Layout 入门 05 相册 (下)

这一节，我们添加其余3个头像到界面中。

首先，我们将绿色view拖向屏幕的左上角，这将导致约束出现问题，我们使用‘Resolve Auto Layout Issues’的Update Constraints选项，通过更新约束的方法解决拖动导致的约束问题。之前我们使用的是‘Update Frames'，‘Update Frames’的作用是通过移动和改变view的大小来满足约束。这里，我们希望的是更新约束。



赋值粘贴绿色view，将其放在屏幕的右上角，可以到，橙色的线又出现了，这是因为，赋值粘贴view时，这个view的X，Y位置约束丢失了，我们需要使用pin菜单为view设置到其父窗口的上侧和右侧的间距。



修正约束问题后，再粘贴另两个view，并按如下效果进行设置：



打开预览，切换到水平模式，啊哦，这是因为我们为4个较大的view设置了固定的大小，这样当父view大小发生变化时，它们也不会改变大小。



选中4个view的Width(160)和Height(284)约束并删除它们。我们将看到如下图所示的效果，这是因为，删除大小约束后，每个view的大小取决于它们所包含的ImageView的大小：



我们需要选中这4个较大的view，通过pin菜单设置它们的长和宽是一致的，然后选择添加6个约束：





但是从预览图可以看出，4个view，两两重叠在一起了：



这是因为我们只是指定了这4个view需要有相同的大小，但并没有指定它们之间的位置关系。

我们选中Ray和Matthijs这2个view，选择Pin\Horizontal Spacing，这样为它们之间添加了一个间距为0的水平间距约束。

我们再选中Ray和Dennis Ritchie这2个view，选择Pin\Vertical Spacing，为它们之间添加一个间距为0的垂直间距约束。



至此，我们就完成了相册程序，无论在水平还是垂直方向，4个头像都是按相同的大小分布在屏幕的4个象限上。

转载请注明出处：/article/9358071.html