天天看点

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

转载请注明出处:http://blog.csdn.net/yamingwu/article/details/44207915