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”按鈕的位置信息的描述可能比較好的是：

無(wú)論屏幕的分辨率和方位，這個(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的約束：

1. Auto Layout工具欄
2. Control-drag

Auto Layout工具欄提供了四個(gè)按鈕：

• Stack - 組合views變成一個(gè)stack view
• Align - 構(gòu)建對(duì)齊約束
• Pin - 構(gòu)建空間約束，例如UI的寬度，高度，邊距等
• Issues - 解決布局問(wèn)題

使用Align來(lái)定義兩個(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的中心和父視圖的中心是相同的，也就是說(shuō)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è)約束的具體信息，也能在此修改約束。

解決布局約束問(wèn)題

Xcode可以非常智能的檢測(cè)的布局約束方面的問(wèn)題。當(dāng)創(chuàng)建了模棱兩可或沖突的約束時(shí)就會(huì)出現(xiàn)布局問(wè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)布局問(wèn)題列表，紅色框中的Expected表示現(xiàn)在約束所期望的位置也就是居中位置，Actual表示現(xiàn)在實(shí)際位置。每個(gè)問(wèn)題右側(cè)有個(gè)indicator icon，點(diǎn)擊它出現(xiàn)一個(gè)彈框，選擇Update Frame然后點(diǎn)擊Fix Misplacement，按鈕回到原來(lái)中央位置；選擇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)，就能打開(kāi)用于預(yù)覽的assistant editor。

這個(gè)預(yù)覽窗口可以預(yù)覽目前所有iOS設(shè)備。

添加一個(gè)Label

1. 添加一個(gè)"Welcome to Auto Layout"的標(biāo)簽在右下角，并打開(kāi)預(yù)覽窗口查看，發(fā)現(xiàn)出來(lái)除了默認(rèn)的iPhone 7，其他設(shè)備要不偏離了，要不不見(jiàn)了。

   
   

2. 用control+drag方法來(lái)添加spacing constraint。按住control，從label上向右拖動(dòng)，拖出label到視圖后松開(kāi)，出現(xiàn)彈框，選擇 "Trailing space to container margin" ，表示設(shè)置右邊距的約束。
   

3. 類似2的方法，向下拖動(dòng)松開(kāi)，選擇彈框中的"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

說(shuō)明

此文是學(xué)習(xí)appcode網(wǎng)站出的一本書 《Beginning iOS 10 Programming with Swift》 的一篇記錄