實(shí)例1
上篇文章我們已經(jīng)通過 storyboard 熟悉了一下 Autolayout 最基本的使用.下面我們通過實(shí)例對(duì) Autolayout 的其他屬性進(jìn)行介紹
假定我們現(xiàn)在有這樣的需求: 控制器中有兩個(gè)并排的 view ,他們的寬高相等單位為70,左右邊框以及兩個(gè) view 之間的間距都為 40,寬度雖屏幕變化.
下面我們通過 storyboard 拖入兩個(gè) view 并設(shè)置不同顏色和名稱用以區(qū)分
可以看到,我拖入的兩個(gè) view 寬高都是不一致的.下面我們進(jìn)行 Autolayout 約束設(shè)置.
首先設(shè)置左邊綠色 viwe 的約束
這里需要注意的是,設(shè)置它右邊約束的時(shí)候是相對(duì)于其右邊的 blueView 的.當(dāng)你把 blueView 明顯拖拽到非 greenView 的右邊 時(shí),設(shè)置 greenView 右邊間距是不會(huì)出現(xiàn)相對(duì)于 blue的定位的選項(xiàng)
設(shè)置右邊 blueview 的約束:
接著選中 blueview 按住 control 鍵拖線到 greenView 上選中下列幾個(gè)選項(xiàng)
更新 frame 并預(yù)覽效果
補(bǔ)充說明,我們除了直接設(shè)置 blueView 的寬高等于 greenView 之外還可以設(shè)置其 bottom 和 top 等于 greenView
此外對(duì)于偏上的定位是注意默認(rèn)會(huì)根據(jù) Top Layout Guide 這根"線"定位
實(shí)例2
需求說明:四個(gè)不同顏色的 view 全屏四等分.并適應(yīng)不同屏幕尺寸.我們先看下效果圖
下面看下約束添加方式
添加四個(gè)不同顏色的 view 并設(shè)置好各自的名稱
添加 orangeView 的約束
添加 blueView 的約束
添加 yellowView 的約束
添加 purpleView 的約束
最后讓四個(gè)控件等高等寬
更新狀態(tài)
運(yùn)行結(jié)果
