天天看點

iOS程式設計(雙語版)-視圖-Autolayout代碼初步

一談到Autolayout,初學者肯定想到的是IB中使用拖拽啊,pin啊各種滑鼠操作來進行添加各種限制。

今天我們要聊得是如何利用代碼來添加視圖間的限制。

我們來看一個例子:

(Objective-C代碼)

(Swift代碼 iOS9)

運作效果:

(豎屏)

iOS程式設計(雙語版)-視圖-Autolayout代碼初步

(橫屏)

iOS程式設計(雙語版)-視圖-Autolayout代碼初步

 看了以上代碼後,你肯定要瘋了,那麼多限制。。。

下面,我們就來逐一分析:

 我們先來看一下這段代碼

OC

Swift

 這段代碼很清楚地表達了:v3是寬高各20,并且位置在v1的右下角,其原點距離v1的右下角

坐标x,y各偏移20,也就是我們上圖中看到的大紅色矩形。

限制的API語句有時候是很冗長的,看上去很難懂。

為此,Apple發明了可視化格式(Visual Format)來便于了解。

看看下面的這個例子:

@"V:|[v2(10)]"

上面的表達式中,V:表示是垂直方向上的限制,同理,H:表示水準方向上限制。

管道符|代表父視圖。

中括号内是要添加限制的視圖變量名。

是以,這裡的限制清晰地表達: v2和父視圖頂端對齊,并且v2的高度是10。

繼續閱讀