Storyboard中使用Autolayout製做引導頁實戰

製做完成的引導頁效果：橫向滑動的三張圖片，第三張圖片上有個按鈕，點擊按鈕跳轉到首頁。

廢話很少說，開始工做：

一、拖一個ScrollView到界面中

二、去掉橫向和縱向的滾動條，設置整頁滑動

三、設置scrollView的四邊與superView間距爲0

四、拖一個View到ScrollView中做爲內容背景View，設定四邊與ScrollView間距爲0

      第4步是爲了讓內容背景View與ScrollView創建依賴關係，這樣，內容背景View的size實際上就成爲了ScrollView的contentSize。

     這時，內容背景View實際上並無肯定寬和高，能夠看到有個紅色警告。

五、拖一個參照View到界面中，放在ScrollView的底下。設定四邊與superView間距爲0

六、由於要放三張圖，ScorllView的contentSize寬度是屏幕寬度的三倍，因此要調整參照View的寬度。作法是編輯右邊界的約束。

七、雙擊第一個約束，進入編輯界面。將參照View設置爲FirstItem，點擊「Reverse First And Second Item」

八、Multiplier值設置爲3倍。這樣，參照View的寬度就變成了屏幕的3倍

九、接下來，設置參照View和內容背景view等寬等高。這樣至關於設置了ScrollView的contentSize寬度爲屏幕的3倍，高與屏幕高度相同。

十、如今添加三張圖片到ScrollView中，設置第一張圖片上下左與邊界間距爲0

十一、設置第一張圖片與參照View等寬

十二、這時，第一張圖片的寬度是屏幕寬度的3倍，咱們須要把它調回來，成爲1倍。雙擊第一個約束，進入編輯界面。

1三、設置參照View約束爲image1的3倍，實際上就是設置image1約束是參照View的三分之一。由於參照View寬度是一個固定值，是強約束。因此實際效果是image1的寬度縮小3倍。

1四、第一張圖片已經設置完成，接下來處理另兩張圖片。設置三張圖片等寬。

1五、設置第三張圖片上下右與邊界間距0，第三張圖片設置完成。

1六、設置第二張圖片上下與邊界間距0，右與第三張圖片的左側間距0，全部圖片設置完畢。

1七、接下來，設置第三張圖上的那個跳轉按鈕。拖一個按鈕到內容背景View上。

寫不下了，另開一貼