寒哥細談之AutoLayout全解

技術交流請加微信：yanzy310 個人文章都會發布到這個公衆號

以爲個人文章寫的好 請關注個人簡書南梔傾寒

---

看到羣中好多朋友還停留在Frame佈局的痛苦時代 ,以及有些開發者接手別人的就項目發現佈局一團亂 。 並且沒有啓動圖的時候並非真正真正適配iPhone 6(S) iPhone6(S) Plus等設備 。 寒哥準備儘量詳細的講一講我所掌握的AutoLayout 。

###AutoLayout很難？

我以爲AutoLayout的難的 約束的選擇性太多 ，抽象性增長， 你們直接看書或者看博客不太好理解 可是有人教的話仍是挺快的 。 因此我儘可能用GIF的方式給你們展示

---

##AutoLayout是什麼？

• Autolayout是一種佈局技術，專門用來佈局UI界面的。用來取代Frame佈局在碰見屏幕尺寸多重多樣的不足
• Autolayout自iOS6開始引入，因爲Xcode4的不給力，當時並無獲得很大的推廣
• 在iOS7（Xcode5）開始，Autolayout的開發效率獲得很大的提高 蘋果官方也推薦開發者儘可能使用Autolayout來佈局UI界面 Autolayout能輕鬆的解決屏幕適配的問題

##AutoLayout從哪裏入手

自從Xcode6以後 你會看到咱們新建一個Single Application 會發現一個ViewController的View很是大 ,跟任何一個iPhone iPad的尺寸都不同 ,這些都是 假象 假象 假象 Apple 把尺寸抽象爲了一個正方形 到真正的設備上纔是真正的佈局

AutoLayout+IB中操做的屬性介紹

咱們會發現貌似這個玩意好多配置 貌似很麻煩的樣子 下面咱們挨個講解

###1.相對處理（Pin）：

屬性說明： 1:距離邊緣 最上面的4個虛線表示某個View的距離上邊 左邊 右邊 下邊多高
2:那個藍色的Constrain To Margins 是iPhone6出現以後。 Apple 以爲更大的分辨率有點間距好看， 默認爲8 ， 若是這個勾上了 這個View距離四周的值就變成了 你輸入的值+8。 通常建議勾掉 。

####let`s Play
咱們開始Demo前先想一想咱們在Frame時代 佈局須要什麼？

： { original：{x,y} size:{width,height} }

在iOS中佈局是絕對定位的（大體這麼理解吧） 因此咱們須要 某個View的X，Y，W，H
咱們從基本的入門 咱們不管添加多少約束 都是須要 定位好某個View的X，Y，W，H

少了不行 多了更不行 少了不行 多了更不行 少了不行 多了更不行 重要的事情說三遍 這裏先不討論UIlabel UITextView UIImageView等自帶的內建高度

• Demo 1 某個View距離父View上下左右間距所有爲20

請注意我這裏把距離下面的 ， 也就是BottomLayoutGuide的約束改爲了距離控制器的View 爲何？ 由於BottomLayoutGuide是晚於View加載的 若是參考這個 會形成進入頁面 會卡一下 儘可能不要直接參考下面 TopLayoutGuide 則沒事

加完約束你會發現貌似並無什麼效果？ 不是的，屏幕中出現的黃色的線條 這是IB在提高咱們你所添加的約束 和真實的尺寸不同 怎麼修改？ 繼續圖

屬性說明3，4 固定某個View的寬高

• Demo 2 某個View距離在父View的左側20 上20 寬高爲 100 ， 100

注意我在添加約束的時候有個選項叫作updateFrame 若是勾選 會直接將Frame調整到真實值 ，而不須要再次update 。 這裏咱們只是講了最簡單定位單個View 你會以爲和Frame 並無什麼區別 。 區別在於：AutoLayout的核心是參照 也就是基本上任何一個View均可以參照另外一個View

• 接下來說解Pin裏面第5，6個屬性： equal Width equal Height 選中的多個View 寬高相等

• Demo 3 某個View距離在父View的左側20 demo2中白色View 上20 寬高和Demo2中的寬高同樣

屬性6 AspectRatio 比例 假設某個View距離父View右上角20 ，20 寬高比 2：1 寬100

第七個屬性Align其實在第一個面板中已經有了 放在下一部分講解 是時候給講解下約束是什麼玩意了剛纔你看到我對約束脩改了

咱們點擊下某個約束

###AutoLayout的公式 第一個Item的屬性= (<= />= )第二個Item的屬性*Multiplier+Constant 第一個Item的屬性= (<= />= )第二個Item的屬性*Multiplier+Constant 第一個Item的屬性= (<= />= )第二個Item的屬性*Multiplier+Constant

好比圖中的View 約束 能夠理解爲 View的tralling（右側） 等於（eauql） 1倍（multpiler）的控制的右側 + 20（constant）

注意比例是支持表達式的 如 2：3
releation是支持great than lessthan 具體是多少 系統自動算出

---

##2. 對齊處理（Align）

介紹

屬性說明：Leading Edges：左對齊

• Trailing Edges：右對齊
• Top Edges：上對齊
• Bottom Edges：下對齊
• Horizontal Centers：水平中心對齊
• Vertical Centers：豎向中心對齊
• Baselines：基線對齊
• Horizontal Center in Container：對齊容器中的水平中心
• Vertical Center in Container：對齊容器中的豎向中心

• Demo 4 某個View距離在父View的右側20 demo3中白色View 上20 寬高和Demo3中的寬高同樣 而且有對齊

Demo5 某個View 居中與父View 長寬50

某些控件是有baseLine 的 如UILabel UITextView 看下不一樣吧

• Demo6 某個label 和另一個label 基線對齊

---

###3. UILabel內建高度自適應高度

像label 默認是有寬度的 寬度就是字體自適應的

這樣咱們就能夠不給UIlabel 高度 把Label的NumberOfline = 0就能夠自適應高度了

• Demo7 Label自適應高度

###4. 小技巧
1.有時候約束太多的時候 咱們能夠給某個VIew起個假名字 就能很方便的看到是哪一個View 了
2. View老是選不中按 ctrl + shift + 單擊

3.AutoLayout碰見ScrollView
參看這個文章 AutoLayout深刻淺出三[相遇Scrollview] 如圖

• Demo 8 ScrollView過長 沒法編輯怎麼辦

將控制器改成Freedom 修改ContentView的高度約束 這樣ScrollView 就能夠滾動了 也能夠往下編輯了

##5 AutoLayout碰見UItableViewCell

AutoLayout深刻淺出四[不只是UIWebView與UITableView的糾纏] AutoLayout深刻淺出五[UITableView動態高度] 動態計算UITableViewCell高度詳解 動態計算UITableViewCell高度詳解

以上4個爲講解 、 下面實踐

github.com/forkingdog/…

---

##6 我的寫的小技巧

AutoLayout分分鐘搞定等比例佈局

友好的ContainerView&AutoLayout資料推薦

##7 iOS 9 及AutoLayout的注意點

固然也是我寫的 AutoLayout好多好多不懂的 終於明白了

---

##總結 在StoryBoard裏面開發 其實就是拿着ViewController 當作View用 若是你仍是以爲複雜 能夠吧View抽象出去

時間倉促 有什麼不懂的能夠留言 或者加羣:532084214細問呦

---

最後再來個廣告 受到 公衆號主人邀請 個人文章也會被髮布到這個公衆號

** 加個歡迎微信掃碼關注吧**
複製代碼