Auto layout是一種基于約束的，描述性的布局系統(tǒng)。
iPhone尺寸
為什么使用Auto Layout
前面的一部分的項(xiàng)目HelloWorld默認(rèn)是運(yùn)行的iPhone 7(iPhone 6)的豎屏下的扭勉，button是在屏幕中間的，但是如果其他屏幕大小或不同方位就不一定了栓票。按照在默認(rèn)iPhone 7的條件下毅厚，button的左上角的坐標(biāo)是(147,318)，其他尺寸的設(shè)備和不同方位顯示時(shí)也會(huì)按照這種坐標(biāo)顯示过咬，就不會(huì)在中間了大渤，這也就是為什么需要使用Auto Layout。
Auto Layout就是關(guān)于所有約束
關(guān)于“Hello World”按鈕的位置信息的描述可能比較好的是：
無論屏幕的分辨率和方位掸绞，這個(gè)按鈕在水平和垂直方向都應(yīng)該是居中的
這實(shí)際就定義了兩個(gè)約束：
- 水平居中
- 垂直居中
在Auto Layout中約束都被描述成數(shù)學(xué)表示泵三，例如上述兩個(gè)限制就會(huì)被表示成： Hello World.centerX = centerX 袁勺， Hello World.centerY = centerY户辱。當(dāng)然我們不需要直接處理這種數(shù)學(xué)公式婴渡，Xcode會(huì)幫我們處理澡腾。
使用Auto Layout使Button到中央
Xcode提供了兩種方法定義Auto Layout的約束：
- Auto Layout工具欄
- Control-drag
Auto Layout工具欄提供了四個(gè)按鈕：
- Stack - 組合views變成一個(gè)stack view
- Align - 構(gòu)建對(duì)齊約束
- Pin - 構(gòu)建空間約束，例如UI的寬度较曼，高度凌埂，邊距等
- Issues - 解決布局問題
使用Align來定義兩個(gè)約束：水平居中 和 垂直居中。彈窗中"Horizontal in container"后的數(shù)字表示button中心點(diǎn)的x坐標(biāo)與父視圖中心點(diǎn)的x坐標(biāo)的相差數(shù)诗芜， "Vertically in container"后的數(shù)字表示button中心點(diǎn)的y坐標(biāo)與父視圖中心點(diǎn)的y坐標(biāo)的相差數(shù)。如果都為零就表示button的中心和父視圖的中心是相同的埃疫，也就是說button水平和垂直方向都居中伏恐。
點(diǎn)擊 "Add 2 Constraints" 后，會(huì)出現(xiàn)如下情況栓霜。在document outline中出現(xiàn)兩個(gè)約束選項(xiàng)翠桦，在視圖中出現(xiàn)垂直兩條藍(lán)色的實(shí)線，在size檢查器中也能看到約束胳蛮。
如果點(diǎn)擊每個(gè)約束销凑，在size檢查器中還能看到每個(gè)約束的具體信息，也能在此修改約束仅炊。
解決布局約束問題
Xcode可以非常智能的檢測(cè)的布局約束方面的問題斗幼。當(dāng)創(chuàng)建了模棱兩可或沖突的約束時(shí)就會(huì)出現(xiàn)布局問題。試著將button拖動(dòng)左下角抚垄，視圖中原本的藍(lán)色實(shí)線變成了黃色實(shí)線蜕窿，并且線上還有數(shù)字，這些數(shù)字表示button現(xiàn)在的位置偏離約束的距離呆馁，document outline右上角出現(xiàn)一個(gè)黃色箭頭(disclosure arrow)桐经。
點(diǎn)擊disclosure arrow，出現(xiàn)布局問題列表浙滤，紅色框中的Expected表示現(xiàn)在約束所期望的位置也就是居中位置阴挣，Actual表示現(xiàn)在實(shí)際位置。每個(gè)問題右側(cè)有個(gè)indicator icon纺腊，點(diǎn)擊它出現(xiàn)一個(gè)彈框畔咧，選擇Update Frame然后點(diǎn)擊Fix Misplacement，按鈕回到原來中央位置摹菠；選擇Update constraints表示button的位置不變盒卸，更新到最新位置的約束。
實(shí)際上次氨，點(diǎn)擊Auto Layout工具欄最右側(cè)的issue蔽介，也會(huì)出現(xiàn)類似的功能：
不同設(shè)備同時(shí)預(yù)覽
Xcode提供了一個(gè)同時(shí)預(yù)覽不同設(shè)備下視圖的界面。按住option，然后按menu > Preview(1) > Main.storyboard (Preview)虹蓄，就能打開用于預(yù)覽的assistant editor犀呼。
這個(gè)預(yù)覽窗口可以預(yù)覽目前所有iOS設(shè)備。
添加一個(gè)Label
-
添加一個(gè)"Welcome to Auto Layout"的標(biāo)簽在右下角薇组，并打開預(yù)覽窗口查看外臂，發(fā)現(xiàn)出來除了默認(rèn)的iPhone 7，其他設(shè)備要不偏離了律胀，要不不見了宋光。
-
用control+drag方法來添加spacing constraint。按住control炭菌，從label上向右拖動(dòng)罪佳，拖出label到視圖后松開，出現(xiàn)彈框黑低，選擇 "Trailing space to container margin" 赘艳，表示設(shè)置右邊距的約束。
-
類似2的方法克握，向下拖動(dòng)松開蕾管，選擇彈框中的"Vertical Spacing to Bottom Layout Guide"，表示設(shè)置了下邊距約束菩暗。所有約束線變成了藍(lán)色實(shí)線掰曾，藍(lán)色實(shí)線表示約束正常。 document outline上又出現(xiàn)兩個(gè)約束：
此時(shí)如果用預(yù)覽窗口查看停团，發(fā)現(xiàn)label在不同的設(shè)備上都在右下角了：
編輯約束
前面也提到約束本身可以手動(dòng)修改的婴梧，選擇約束，然后在size檢查器中修改客蹋。默認(rèn)label的"trailingMargin"約束的constant值是0塞蹭，可以試著修改。
練習(xí)
- 添加新的label讶坯，修改文本為Learn Swift
- 把字體大小改為30 point番电，調(diào)整label為適宜大小
- 添加兩個(gè)約束
- label的上邊距為40point
- label水平居中
代碼
HelloWorldAutoLayout
HelloWorldAutoLayoutExercise
說明
此文是學(xué)習(xí)appcode網(wǎng)站出的一本書 《Beginning iOS 10 Programming with Swift》 的一篇記錄
