Autolayout02-實例講解

實例效果:

這裏寫圖片描述

步驟1:
準備工作,首先取消Use Size Classes,勾選Use Auto layout,然後在viewController中拖動一個視圖並填充紅色,接下來將對該視圖進行自動佈局(詳情介紹情況autolayout簡介)這裏就不做過多講解,主要以實例爲準。

步驟2:
按照上一張的方法添加約束,可能會報警告,主要是因爲位置不對。需要修補一下。
修補方法01:直接點擊警告,讓他幫你修補
修補方法02:可以在添加約束的地方,選中第二個來修補。
如圖所示:
這裏寫圖片描述

步驟3:目前效果如下

這裏寫圖片描述

我們發現問題,最後紅色視圖顯示的時候是狀態欄下面,並沒有在最上面,原因是它相對於狀態欄視圖的位置,沒有相對於父視圖位置。

步驟4:解決沒有顯示在最上面的問題。

這裏寫圖片描述

我們需要將最上面的那個約束刪掉,重新添加約束。

選中最後一行top space to:top layout guide,然後按delete刪除。
添加新約束:選中上面的線,點擊右側的小三角,選中view。。。。該選項(相對於父視圖),在填充相對於父視圖的位置大小爲0,點擊該面板下面的update frame刷新位置,最後點擊添加一個約束的按鈕,就ok了。

這裏寫圖片描述

改變後效果圖:
這裏寫圖片描述

步驟5:接下來我們複製3個視圖,讓其佈局到其他3個角落。會發現有很多錯,原因是你同事把他們的約束都複製過來了,需要刪除他們的約束,重新添加新的約束。

刪除約束方法01:同上面一樣,點擊視圖,刪除右側的所有文字。如圖所示:
這裏寫圖片描述

刪除約束方法02:
選中最底部這裏寫圖片描述

然後clear constraints
這裏寫圖片描述

步驟6:一次爲他們添加約束。同時你如果點擊數字旁邊的小三角會發現他會自動讓其相對於父視圖。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章