5、UI開發之核心基礎——約束（深刻）

概述

本節咱們將較爲理論的講述約束，更準確的說法叫作「AutoLayout」。對於後續章節要學習的內容，本篇文章並不是必須，若是你也像我當年同樣正在被老闆踢屁股趕進度的話，但可掠過本篇。

本篇內容旨在錦上添花，瞭解完本篇內容後，將會有助於你更加駕輕就熟的使用約束。

「AutoLayout」的官方文檔連接以下，以供參考：

https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/index.html#//apple_ref/doc/uid/TP40010853-CH7-SW1

 

全部的約束都歸結爲1個方程 

約束是這樣實現的：

根據給定元素（x），限定目標元素（y）的位置或大小，既

y =(或≥或≤) ax + b

 

上圖截自蘋果官網Auto Layout Guide，咱們用這個例子來進行說明。

這個方程約束了紅色矩形前邊界（左邊界）距離藍色矩形尾邊界（右邊界）右側8.0個單位。

RedView.Leading指的是紅色矩形的前邊界（左邊界）「y」，BlueView.trailing指的是藍色矩形的尾邊界（右邊界）「x」，其中「a=1.0」，「b=8.0」，方程關係爲「=」關係。

 

一例勝百言

例1:以下圖所示，Button的約束爲

Button.Leading = 1.0 x SuperView.Leading + 10

Button.Top = 1.0 x SuperView.Top - 16

Button.Width = 0.0 x NotAnAttribute + 18

Button.Height = 0.0 x NotAnAttribute + 12

其中SuperView表示Button所在的容器，也就是Button所在的「黑框」。NotAnAttribute表示一個無心義值，由於乘以了0，因此並不妨礙方程計算。

 

例2:以下圖所示，Button的約束爲

Button.Leading = 1.0 x SuperView.Leading + 10

Button.Top = 1.0 x SuperView.Top - 16

Button.Trailing = 1.0 x SuperView.Trailing - 10

Button.Height = 5/3 x Button.Width + 0

其中Button.Width雖然沒有在以上約束中明確指出，可是根據Bottom.Leading和Bottom.Trailing的約束，Button.Width就已經肯定了（SuperView.Width - 10 x 2）

 

例3:以下圖所示，假設Image的位置和大小已經肯定（未在圖中顯示），則Button的約束爲

Button.Leading = 1.0 x Image.Trailing + 10

Button.Trailing = 1.0 x SuperView.Trailing - 5

Button.Top = 1.0 x Image.Top + 0

Button.Bottom = 1.0 x Image.Bottom + 0

 

例4:以下圖所示，Button的約束爲

Button.CenterX = 1.0 x SuperView.CenterX + 0

Button.CenterY = 1.0 x SuperView.CenterY + 0

Button.Width = 0.0 x NotAnAttribute + 10

Button.Height = 0.0 x NotAnAttribute + 10

 

插播一則知識點：固有尺寸（Intrinsic Size）

以前咱們說過，約束全部的要義就在於惟一肯定UI控件的位置和大小，二者缺一不可。

可是咱們有時候會發現，若是隻約束UI控件的位置，而不約束其大小也是能夠的。好比下圖，咱們只約束了label的左邊界和上邊界，但xcode並無報錯，只是提示了一個警告。

 

這究竟是爲何呢？

包含文字/圖片內容的UI控件都會有固有尺寸，固有尺寸的長寬即文字/圖片的原始長寬。當沒有約束該UI控件的長寬時，默認使用其固有尺寸。

以下圖，若是咱們拖入一個ImageView，並只約束其左邊界和上邊界，會發現xcode有報錯，可是當咱們給其指定了圖片內容後，報錯就消失了。

 

 瞭解了固有尺寸後，咱們就能夠接着講收縮/拉伸等級約束了。

View的收縮等級約束表示爲：

垂直方向：View.Height <= 0.0 x NotAnAttribute + IntrinsicHeight

水平方向：View.Width <= 0.0 x NotAnAttribute + IntrinsicWidth

View的拉伸等級約束表示爲：

垂直方向：View.Height >= 0.0 x NotAnAttribute + IntrinsicHeight

水平方向：View.Width >= 0.0 x NotAnAttribute + IntrinsicWidth

 

約束等級

一個UI控件通常有多個約束，有時候約束之間會發生衝突（還記得嗎？上一節咱們就遇到過「收縮等級」約束衝突），每當此時，咱們能夠刪掉其中一個，若是不能刪掉。咱們還能夠設置約束等級（Priority）。約束等級的範圍是1～1000，1000等級最高，1等級最小。當2個約束衝突時，等級高的約束能夠屏蔽掉等級低的約束。

 

總結

約束（AutoLayout）的全部內容都歸結爲1個方程，它能很好的實如今不一樣設備上的自適應，從而使開發者避免了許多重複性的工做，再加上Xcode的圖形化開發功能，真可謂是UI開發的利器。

如今你能夠對約束隨心所欲了喲～

 

上一節           回目錄          下一節