前言
ios設(shè)備的尺寸越來越多，針對(duì)一款app可能要適配到多種設(shè)備，多種尺寸。所以，我們期望我們的app能夠autoLayout。本文主要介紹在Xcode中使用constraint。未來會(huì)不定期對(duì)此文進(jìn)行更新。
約定
本文中view指代從Objuect Library中拖拽出來的各種view
基礎(chǔ)
一個(gè)view在界面顯示，至少有三種決定條件
- 一、自身大小：如width、height
- 二、相對(duì)于父容器的位置：如固定起始坐標(biāo)位置或相對(duì)位置
- 三、相對(duì)于兄弟view的位置：如頂部對(duì)齊、左右距離、堆疊層次
思路
在storyboard中，拖拽出來的view都有默認(rèn)的樣式，在拖動(dòng)的過程中會(huì)有藍(lán)色的輔助線，幫助我們布局。但是位置大小等都是固定的，我們需要給每個(gè)view設(shè)置constraint，告訴它在不同的情況下應(yīng)該如何表現(xiàn)。
編譯運(yùn)行
Label并沒有垂直水平居中
布局的過程，就是確定view的水平位置、垂直位置以及相對(duì)位置
需求
一種常見的情況：一個(gè)搜索框，一個(gè)搜索按鈕
搜索框：長(zhǎng)度要隨著界面變化進(jìn)行伸縮，與確定按鈕間距20，距離左邊0，頂部10，高40
確定按鈕：頂部10，右邊0，與搜索框間距20，寬50，高40
先來看下最終效果
實(shí)現(xiàn)步驟
1、拖拽一個(gè)
text Field,一個(gè)Button到storyboard-
2、注意storyboard底部的按鈕
constraint按鈕
三個(gè)按鈕分別是
Align: 主要用來進(jìn)行兄弟view對(duì)齊
Pin：自身大小、相對(duì)容器位置
Resolve auto layout issues：應(yīng)用constraint后更新storyboard -
3、選中
Button，點(diǎn)擊Pin按鈕，上邊距10，分別設(shè)置左邊距20，右邊距0，高度40，寬度50(按鈕的寬度基本是固定的)
寬度和高度都是描述自身大小，條件一
上邊距和右邊距都是相對(duì)父容器，條件二
左邊距是相對(duì)于兄弟view的位置，條件三
Button constraint
點(diǎn)擊Add 5 Constraints
結(jié)果就變成下邊的樣子了
結(jié)果 -
4、這個(gè)時(shí)候，我們點(diǎn)擊
Resolve auto layout issues，并選擇Selected Views下的Update Frame
`Update Frame` 5、現(xiàn)在同時(shí)選中
Button和text Field,點(diǎn)擊Align按鈕，勾選Top Edges，從icon上我們就可以看出來，是頂部對(duì)齊的意思
頂部是相對(duì)于兄弟view的位置，條件三，
同時(shí)，隱含的text Field相對(duì)父容器頂部的位置和Button一樣，條件二
點(diǎn)擊 Add 1 Constraints
點(diǎn)擊Resolve auto layout issues ，選擇Selected Views下的Update Frame
- 6、現(xiàn)在選中
text Field,點(diǎn)擊Pin按鈕，設(shè)置左邊距0和高度40，點(diǎn)擊Add 2 Constraints
高度40，條件一
左邊距，條件二
隱含的，寬度是從父容器到搜索按鈕的左邊20的位置，條件一
點(diǎn)擊Resolve auto layout issues ，選擇Selected Views下的Update Frame
修改Button的文字為搜索就算完成啦~
總結(jié)
三種條件也是三種原則，掌握著三種原則就能比較好的掌握 constraint。除了使用這種方式，還可以使用代碼實(shí)現(xiàn)，這里先挖個(gè)坑，以后再補(bǔ)上。
