［菜鳥成長記］iOS開發自學筆記04－AutoLayout自動布局

標籤：blog   http   io   ar   os   使用   sp   on   2014   

　　隨著iphone6的問世，蘋果又進一步加大了手機螢幕的尺寸，而且按照目前這種趨勢來判斷，未來應該還有可能會出現更大的螢幕的手機。如果沒有AutoLayout那麼目前iPhone有4種尺寸的螢幕，iPad也有兩種尺寸。而一款應用程式想要相容所有這些的不同尺寸的螢幕就必須要讓程式做一些特殊處理，比如在程式裡去擷取螢幕尺寸再根據具體尺寸去建立不同的UI布局，顯然每多一種螢幕就需要增加一種處理，這樣很顯然是繁瑣和不經濟的。而利用AutoLayout則可以使用約束對象的功能來實現一次布局在多種螢幕通用的目的，甚至連裝置的旋轉處理也能達到非常理想的效果。

　　先介紹一下幾種AutoLayout自動布局所經常使用的布局約束類型

• width表示約束ui控制項的固定寬度
• height表示約束ui控制項的固定高度
• Leading Space to Superview 與父視圖的左邊界線保持固定距離
• Trailing Space to Superview 與父視圖的右邊界線保持固定距離
• Top Space to Superview 與父視圖的頂部邊界線保持固定距離
• Bottom Space to Superview 與父視圖的底部邊界線保持固定距離
• Horizotal Spacing 兩個子視圖之間的水平距離保持固定長度
• Vertical Spacing 兩個子視圖之間的垂直距離保持固定長度
• Width Equally 兩個子視圖之間保持相等的寬度
• Height Equally 兩個子視圖之間保持相等的高度

　　建立一個single view application的模板項目，向Main.stroryboard拖入兩個button按鈕，分別設定background的顏色為紫色和綠色，可以看到在畫布上顯示正確的兩個button在不同尺寸螢幕的裝置上的運行效果都有所偏差

實際裝置上的運行效果：

iPhone 4s上的運行效果

因為我想要這兩個button一直是保持這樣的尺寸：兩個button寬和高要相等，同時兩個button離螢幕的兩邊都保持固定距離，且兩個button之間的距離一直保持不變，所以添加以下約束：

• 分別選擇兩個button並點擊editor->pin->width,editor->pin->height設定其固定寬度和高度
• 分別選擇兩個button並點擊editor->pin->Leading Space to Superview,editor->pin->Trailing Space to Superview固定其和父視圖之間的邊界距離
• 按住shift分別點擊兩個button，並點擊editor->pin->Horizontal Spacing設定兩個button之間保持固定的長度距離
• 按住shift分別點擊兩個button，並點擊editor->pin->Width Equally設定兩個button擁有相等的寬度

增加完上面的約束後就可以看到程式啟動並執行顯示結果不會顯得那麼難看了

並且就算旋轉螢幕也能得到比較好的結果：

［菜鳥成長記］iOS開發自學筆記04－AutoLayout自動布局