****技術(shù)交流請(qǐng)加微信：yanzy310 我的文章都會(huì)發(fā)布到這個(gè)公眾號(hào)****
![]()
Paste_Image.png
覺得我的文章寫的好 請(qǐng)關(guān)注我的簡書南梔傾寒
看到群中好多朋友還停留在Frame布局的痛苦時(shí)代 ,以及有些開發(fā)者接手別人的就項(xiàng)目發(fā)現(xiàn)布局一團(tuán)亂 。
而且沒有啟動(dòng)圖的時(shí)候并不是真正真正適配iPhone 6(S) iPhone6(S) Plus等設(shè)備 。
寒哥準(zhǔn)備盡可能詳細(xì)的講一講我所掌握的AutoLayout 。
AutoLayout很難？
我覺得AutoLayout的難的 約束的選擇性太多 ，抽象性增加，
大家直接看書或者看博客不太好理解 但是有人教的話還是挺快的 。
所以我盡量用GIF的方式給大家展現(xiàn)
AutoLayout是什么？
- Autolayout是一種布局技術(shù)，專門用來布局UI界面的。用來取代Frame布局在遇見屏幕尺寸多重多樣的不足
- Autolayout自iOS6開始引入，由于Xcode4的不給力，當(dāng)時(shí)并沒有得到很大的推廣
- 在iOS7（Xcode5）開始，Autolayout的開發(fā)效率得到很大的提升
蘋果官方也推薦開發(fā)者盡量使用Autolayout來布局UI界面
Autolayout能輕松的解決屏幕適配的問題
AutoLayout從哪里入手
自從Xcode6之后 你會(huì)看到我們新建一個(gè)Single Application 會(huì)發(fā)現(xiàn)一個(gè)ViewController的View非常大 ,跟任何一個(gè)iPhone iPad的尺寸都不一樣 ,這些都是 假象 假象 假象 Apple 把尺寸抽象為了一個(gè)正方形 到真正的設(shè)備上才是真正的布局
AutoLayout+IB中操作的屬性介紹
我們會(huì)發(fā)現(xiàn)貌似這個(gè)玩意好多配置 貌似很麻煩的樣子 下面我們挨個(gè)講解
1.相對(duì)處理（Pin）：
屬性說明：
1:距離邊緣 最上面的4個(gè)虛線表示某個(gè)View的距離上邊 左邊 右邊 下邊多高
2:那個(gè)藍(lán)色的Constrain To Margins 是iPhone6出現(xiàn)之后。
Apple 覺得更大的分辨率有點(diǎn)間距好看， 默認(rèn)為8 ， 如果這個(gè)勾上了 這個(gè)View距離四周的值就變成了 你輸入的值+8。 一般建議勾掉 。
let`s Play
我們開始Demo前先想想我們?cè)贔rame時(shí)代 布局需要什么？
：
{
original：{x,y}
size:{width,height}
}
在iOS中布局是絕對(duì)定位的（大致這么理解吧）
所以我們需要 某個(gè)View的X，Y，W，H
我們從基本的入門 我們無論添加多少約束 都是需要 定位好某個(gè)View的X，Y，W，H
少了不行 多了更不行
少了不行 多了更不行
少了不行 多了更不行
重要的事情說三遍 這里先不討論UIlabel UITextView UIImageView等自帶的內(nèi)建高度
- Demo 1 某個(gè)View距離父View上下左右間距全部為20
請(qǐng)注意我這里把距離下面的 ， 也就是BottomLayoutGuide的約束改成了距離控制器的View 為什么？
因?yàn)锽ottomLayoutGuide是晚于View加載的 如果參考這個(gè) 會(huì)造成進(jìn)入頁面 會(huì)卡一下 盡量不要直接參考下面 TopLayoutGuide 則沒事
加完約束你會(huì)發(fā)現(xiàn)貌似并沒有什么效果？
不是的，屏幕中出現(xiàn)的黃色的線條 這是IB在提升我們你所添加的約束 和真實(shí)的尺寸不一樣 怎么修改？ 繼續(xù)圖
屬性說明3，4 固定某個(gè)View的寬高
- Demo 2 某個(gè)View距離在父View的左側(cè)20 上20 寬高為 100 ， 100
注意我在添加約束的時(shí)候有個(gè)選項(xiàng)叫做updateFrame 如果勾選 會(huì)直接將Frame調(diào)整到真實(shí)值 ，而不需要再次update 。
這里我們只是講了最簡單定位單個(gè)View 你會(huì)覺得和Frame 并沒有什么區(qū)別 。
區(qū)別在于：AutoLayout的核心是參照 也就是基本上任何一個(gè)View都可以參照另一個(gè)View
- 接下來講解Pin里面第5，6個(gè)屬性：
equal Width equal Height 選中的多個(gè)View 寬高相等
- Demo 3 某個(gè)View距離在父View的左側(cè)20 demo2中白色View 上20 寬高和Demo2中的寬高一樣
屬性6 AspectRatio 比例
假設(shè)某個(gè)View距離父View右上角20 ，20 寬高比 2：1 寬100
第七個(gè)屬性Align其實(shí)在第一個(gè)面板中已經(jīng)有了 放在下一部分講解
是時(shí)候給講解下約束是什么玩意了剛才你看到我對(duì)約束修改了
我們點(diǎn)擊下某個(gè)約束
AutoLayout的公式
第一個(gè)Item的屬性= (<= />= )第二個(gè)Item的屬性*Multiplier+Constant
第一個(gè)Item的屬性= (<= />= )第二個(gè)Item的屬性*Multiplier+Constant
第一個(gè)Item的屬性= (<= />= )第二個(gè)Item的屬性*Multiplier+Constant
比如圖中的View 約束 可以理解為 View的tralling（右側(cè)） 等于（eauql） 1倍（multpiler）的控制的右側(cè) + 20（constant）
注意比例是支持表達(dá)式的 如 2：3
releation是支持great than lessthan 具體是多少 系統(tǒng)自動(dòng)算出
2. 對(duì)齊處理（Align）
介紹
屬性說明：Leading Edges：左對(duì)齊
- Trailing Edges：右對(duì)齊
- Top Edges：上對(duì)齊
- Bottom Edges：下對(duì)齊
- Horizontal Centers：水平中心對(duì)齊
- Vertical Centers：豎向中心對(duì)齊
- Baselines：基線對(duì)齊
- Horizontal Center in Container：對(duì)齊容器中的水平中心
- Vertical Center in Container：對(duì)齊容器中的豎向中心
- Demo 4 某個(gè)View距離在父View的右側(cè)20 demo3中白色View 上20 寬高和Demo3中的寬高一樣 并且有對(duì)齊
Demo5 某個(gè)View 居中與父View 長寬50
某些控件是有baseLine 的 如UILabel UITextView 看下不同吧
- Demo6 某個(gè)label 和另外一個(gè)label 基線對(duì)齊
3. UILabel內(nèi)建高度自適應(yīng)高度
像label 默認(rèn)是有寬度的 寬度就是字體自適應(yīng)的
這樣我們就可以不給UIlabel 高度 把Label的NumberOfline = 0就可以自適應(yīng)高度了
-
Demo7 Label自適應(yīng)高度
haha.gif
4. 小技巧
1.有時(shí)候約束太多的時(shí)候 我們可以給某個(gè)VIew起個(gè)假名字 就能很方便的看到是哪個(gè)View 了
- View總是選不中按 ctrl + shift + 單擊
3.AutoLayout遇見ScrollView
參看這個(gè)文章 AutoLayout深入淺出三[相遇Scrollview]
如圖
- Demo 8 ScrollView過長 無法編輯怎么辦
將控制器改為Freedom 修改ContentView的高度約束 這樣ScrollView 就可以滾動(dòng)了 也可以往下編輯了
5 AutoLayout遇見UItableViewCell
AutoLayout深入淺出四[不僅是UIWebView與UITableView的糾纏]
AutoLayout深入淺出五[UITableView動(dòng)態(tài)高度]
動(dòng)態(tài)計(jì)算UITableViewCell高度詳解
動(dòng)態(tài)計(jì)算UITableViewCell高度詳解
以上4個(gè)為講解 、
下面實(shí)踐
https://github.com/forkingdog/UITableView-FDTemplateLayoutCell博客講解
6 個(gè)人寫的小技巧
友好的ContainerView&AutoLayout資料推薦
7 iOS 9 及AutoLayout的注意點(diǎn)
當(dāng)然也是我寫的 AutoLayout好多好多不懂的 終于明白了
總結(jié) 在StoryBoard里面開發(fā) 其實(shí)就是拿著ViewController 當(dāng)做View用 如果你還是覺得復(fù)雜 可以吧View抽象出去
時(shí)間倉促 有什么不懂的可以留言 或者加群:
532084214細(xì)問呦
最后再來個(gè)廣告 受到 公眾號(hào)主人邀請(qǐng) 我的文章也會(huì)被發(fā)布到這個(gè)公眾號(hào)
** 加個(gè)歡迎微信掃碼關(guān)注吧**
