天天看點

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