AutoLayout在IB中的使用

iOS平臺這幾年推出了眾多新機型，iPhone4/4S、iPhone5/5C/5C、iPhone6/6S、iPhone6 Plus/6S Plus，iPad mini/iPad Air/iPad Pro，這麼多不同的螢幕，擁有著不同的解析度，為了適配這麼多的裝置，蘋果提供了AutoLayout和SizeClasses這兩個強有力的工具。AutoLayout作為最基礎的部分，對於一個iOS開發者是非常重要的，AutoAutoLayout又是靈活的，對於新手來說掌握是比較難的。

今天小組中一妹子就在AutoLayout上遇到了問題，正好藉此機會說一下AutoLayout在IB中的使用

基礎使用

現在這個介面雖然能顯示，但是在不同的機子上卻是同樣的座標，然而不同的機型有不同的解析度，比例，這就是我們用AutoLayout的原因。
AutoLayout的總體思路就是通過對控制元件的約束來動態確定控制元件的位置和大小。
我們先來對TextField設定約束，選中這個TextField，IB設定約束有兩種方式，一個是用右下角的四個工具設定。另一個和我們關聯程式碼與控制元件的方式類似，按住ctrl鍵，拖
，這次拖的目標不是程式碼，而是其他控制元件

這個可以設定和其他控制元件的關係，這裡我們選擇第一個，與容器的leading空間，這樣能保證這一小塊空間不變。

拉完效果是這樣，為什麼這條約束是紅色呢？
是因為這個控制元件仍處於欠約束的狀態，也就是說僅通過已有的約束不能確定其位置，這時如果開啟大綱檢視，左上角會有錯誤。

這是說現有的約束不能確定在垂直方向的位置


勾選第二個

你會發現這個錯誤變成了警告
這是說通過檢視確定的位置與通過約束確定的位置不同
上面的是通過約束確定的位置
現在我們需要修正這個問題

第一個選項，更新框架
也就是將控制元件移動到通過其約束推測出的地方
第二個，更新約束，也就是將約束脩改為你的檢視中的位置
我們選擇第二個

這根藍線已經移動到了我們希望的位置
但是出現了一個新的警告
黃色虛線的位置就是根據約束，這個textField的位置
這是因為在水平方向，我們僅設定了距左邊的距離
它根據文字框內容推測出了一個新的寬度
這是我們不希望的
所以我們在水平方向加一個新的約束
距右側加號Label的距離

第一個選項
水平距離
這個時候問題不僅沒有解決，你會發現警告越來越多了
這是因為這個加號也沒有設定約束
它的位置是無法通過約束推測的
這個時候不要理會那些警告
做完自然就沒了
我們這時候給加號一個垂直方向約束
設定它與左邊的TextField center Vertically
後面幾個控制元件也都設定與左邊控制元件的距離，並保持X軸方向在一條直線上
水平方向存在一個問題
兩個文字框和中間的加號都是用之間的距離確定的
它的寬度沒有辦法確定
最後一個結果與右邊框做一個TraillingSpace
這是會有紅色的報錯
這時
我們想一個辦法來處理
將兩個文字框設定為equal width
這樣就會變成幾個警告

選第一個更新框架
勾選地下的勾
對所有警告都這樣處理
對於那個按鈕
我們讓它到畫面最中間去。

這時，我們發現，在橫屏時，上面的幾個控制元件都消失了，這是因為我們給左邊第一個文字框設定的y軸位置不對，我們現在在大綱檢視中刪除這條約束，增加一條距離TopGuideLine的約束
現在我們的程式就已經可以在不同的裝置上完美適配了