Ios教程網 >> IOS訊息 >> 關於IOS >> 寒哥細談之AutoLayout全解

寒哥細談之AutoLayout全解

編輯：關於IOS

[收起] 文章目錄

AutoLayout是什麼？
AutoLayout從哪裡入手
AutoLayout+IB中操作的屬性介紹
2. 對齊處理（Align）
5 AutoLayout遇見UItableViewCell
6 個人寫的小技巧
7 iOS 9 及AutoLayout的注意點
總結在StoryBoard裡面開發其實就是拿著ViewController 當做View用如果你還是覺得負責可以吧View抽象出去

AutoLayout是什麼？

Autolayout是一種布局技術，專門用來布局UI界面的。用來取代Frame布局在遇見屏幕尺寸多重多樣的不足
Autolayout自iOS6開始引入，由於Xcode4的不給力，當時並沒有得到很大的推廣
在iOS7（Xcode5）開始，Autolayout的開發效率得到很大的提升
蘋果官方也推薦開發者盡量使用Autolayout來布局UI界面
Autolayout能輕松的解決屏幕適配的問題

AutoLayout從哪裡入手

自從Xcode6之後你會看到我們新建一個Single Application 會發現一個ViewController的View非常大 ,跟任何一個iPhone iPad的尺寸都不一樣 ,這些都是假象假象假象 Apple 把尺寸抽象為了一個正方形到真正的設備上才是真正的布局

AutoLayout+IB中操作的屬性介紹

Paste_Image.png

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

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

haha.gif

請注意我這裡把距離下面的，也就是BottomLayoutGuide的約束改成了距離控制器的View 為什麼？
因為BottomLayoutGuide是晚於View加載的如果參考這個會造成進入頁面會卡一下盡量不要直接參考下面 TopLayoutGuide 則沒事

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

haha.gif

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

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

haha.gif

注意我在添加約束的時候有個選項叫做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中的寬高一樣

haha.gif

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

haha.gif

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

我們點擊下某個約束

Paste_Image.png

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：對齊容器中的豎向中心