我也是前幾天才有空了解了一下AutoLyout,雖然現(xiàn)在布局已經(jīng)入門,但是道行尚淺吊说,不足請(qǐng)之處宋舷,我會(huì)更新文檔。
其實(shí)XIB和代碼都可以用AutoLayout,現(xiàn)在代碼自己不習(xí)慣姆蘸,因?yàn)閄IB可以一眼的看出來(lái)是什么約束。
感謝@廣州-八爺提醒文章的錯(cuò)誤
需要用到的功能
1.是IOS8新出的芙委,屬于表格一樣的布局逞敷,我們暫時(shí)不用多管。
2.是進(jìn)行兩個(gè)試圖進(jìn)行約束的
3.是對(duì)于單個(gè)試圖進(jìn)行約束的灌侣,默認(rèn)相對(duì)于父試圖推捐。
4.是對(duì)于約束更新和擅長(zhǎng)管理的。
1.兩個(gè)試圖相對(duì)布局
紅線圈著是我們常用的約束分別代表著
1.左對(duì)齊Leading Edges
2.右對(duì)齊Tralling Edges
3.上對(duì)齊Top Edges
4.下對(duì)齊Buttom Edges
5.水平對(duì)齊Horizontal Centers
6.豎直對(duì)齊Vertical Centers
勾選就是我們約束了這個(gè)條件 后面可以設(shè)置約束的距離大小 默認(rèn)為0
2.相對(duì)于最近試圖布局
紅線是我們單個(gè)布局最長(zhǎng)用到的
分別代表著:
1侧啼,距離最近試圖頂部
- 距離最近試圖底部
- 距離最近試圖左邊
- 距離最近試圖右邊
Constrain to margins
默認(rèn)是勾選牛柒,會(huì)默認(rèn)多8距離堪簿,因?yàn)樘O果認(rèn)為大屏幕的有點(diǎn)距離好看。你如果覺得定位試圖不準(zhǔn)皮壁,可以取消椭更。
1。設(shè)置寬度 Width
2 . 設(shè)置高度 Height
- 設(shè)置寬度一樣(只能選中多個(gè)試圖布局才能用)
Equal Widths
- 設(shè)置高度一樣(只能選中多個(gè)試圖布局才能用)
Equal Heights
約束管理
1.約束更新 蛾魄,刪除
因?yàn)榻貓D不了虑瀑,就不上圖了。
實(shí)例說(shuō)明:
設(shè)置下面圖廣告條高度140 左邊和父試圖對(duì)齊 右邊于父試圖對(duì)齊 上和父試圖對(duì)齊
方案1:
1.選中廣告條試圖滴须。
1.取消了Constrain to margins
2.設(shè)置上對(duì)齊0
3.設(shè)置左對(duì)齊0
4.設(shè)置右對(duì)齊0
5.設(shè)置高度140
怎么才能約束成功 其實(shí)原理就是用約束控制Frame.我們都知道Frame有坐標(biāo)舌狗,大小控制。上面添加的約束為什么會(huì)成功呢扔水。
相對(duì)于父試圖上對(duì)其和左對(duì)齊就確定了坐標(biāo)痛侍。
相對(duì)齊父試圖左對(duì)齊和右對(duì)齊就確定了高度
設(shè)置了高度就確定了高度。
從而確定了這個(gè)試圖的FRAME魔市。
方案二
1.選中父試圖和廣告圖
2.選擇
1.設(shè)置了左對(duì)齊
2.設(shè)置了右對(duì)齊
3.設(shè)置了頂部對(duì)齊恋日。
你們問了這個(gè)和上面不是一樣的嗎。上面的默認(rèn)是相對(duì)于父試圖嘹狞。這個(gè)是相對(duì)于你選中的試圖。現(xiàn)在選中的和父試圖是一個(gè)誓竿,所以意義是一樣的磅网。
我們雖然設(shè)置了左右對(duì)齊設(shè)置了寬度
頂部對(duì)齊和左對(duì)齊確定了為了但是沒有設(shè)置高度
再次選擇pan
我們選中廣告條設(shè)置高度位140。
我們確定了這個(gè)試圖的FRAME筷屡,從而也約束成功了涧偷。
案例2:
現(xiàn)在我希望這個(gè)廣告條是我們寬度的一半
確定寬度和位置還是和之前的一樣。但是現(xiàn)在高度不確定了毙死。
我們選中父試圖和廣告條燎潮。
約束如上,讓兩個(gè)高度相等扼倘。
我們點(diǎn)擊上圖的紅線位置确封。
修改高度參數(shù)如上。
我們?cè)O(shè)置試圖的高度等于父試圖高度再菊。Mutiplier
設(shè)置位0.5爪喘。
我們以為試圖的高度位寬度的一半也就是0.5。我們?cè)噲D的寬度等于父試圖的寬度纠拔。因?yàn)槲覀儏⒖几冈噲D設(shè)置秉剑。
我們沒辦法參考自己的高度和寬度的,因?yàn)檫€沒確定下來(lái)具體的值稠诲。