4、UI開發之核心基礎——約束（實用）

概述

本節將會介紹最經常使用的幾種約束，基本能夠知足90%以上的UI佈局要求。

先附上一份其餘優秀博客https://blog.csdn.net/companion_1314/article/details/51823243，該篇博文使用GIF演示了常見約束，很好的給新手一個直觀印象，我本人也從其中受益良多，貼在此處以供參考。

Xcode提供的約束總共能夠分爲如下六種：

1. 距離約束

2. 邊長約束

3. 比例約束

4. 對齊約束

5. 容器約束

6. 伸縮/拉伸等級約束

 

接下來咱們將對這5種約束進行一一描述。

 

距離約束

任意一個UI控件都是矩形佈局，咱們將其4邊稱爲「邊界」。這個手機屏幕的4邊也是「邊界」。

則距離約束指的是，對控件及其四周最近的「邊界」間的約束。

 

例1:上邊距0，下邊距300，左邊距0，右邊距0

 

例2:在空的storyboard上拖入label「神鳥歸位」，並設置約束：上邊距0，下邊距300，左邊距0，右邊距0。

而後再拖入label「菜鳥站邊」，並設置約束：上邊距0，下邊距50， 左邊距0， 右邊距0。

 

邊長約束

邊長約束指的是，對控件長寬的約束。

不一樣於距離約束，邊長約束只能肯定控件的大小，不能肯定其位置，因此必須搭配其餘約束才能肯定控件。

 

例1:左邊距0，上邊距0，長200，高200

 

例2:首先按例1的方式約束label「神鳥歸位」，而後拖入新的label「菜鳥看齊」。

首先設置「菜鳥看齊」的距離約束：左邊距0，下邊距0。

 

而後先選中「菜鳥看齊」，再按住"shift"並選中「神鳥歸位」，而後設置「等寬」「等高」約束。

 

 

 PS：

細心的同窗可能會注意到，不知從何時開始，這裏多出來了一個小黃點

點進去看一下，咱們會發現兩個關鍵字：overlapping（覆蓋）和clipping（截斷）。

還記得上一節中「舉個栗子」那三張圖嗎？

這裏使用的約束方式（尤爲是例1）正式控件默認使用的約束方式。

固然，這些警告並不妨礙編譯，因此咱們暫且忽略它們。

 

比例約束

例：首先設置距離約束：上/左/右邊距0，並開啓比例約束。

 

默認的比例約束並不是咱們想要的（此處爲121:36），因而咱們將其設置爲2:1，並按回車鍵。

 

對齊約束

例1:首先設置label「神鳥歸位」左邊距50，上邊距50，長200，高200

 

而後拖入label「菜鳥站邊」，設置上邊距50，長200，高200。 

 

這時咱們會發現左上角出現了一個錯誤提示，label「菜鳥站邊」周邊出現了紅色框框，這時由於label「菜鳥站邊」的約束不夠明確（左邊位置沒法肯定）。 

 

按住「shift」鍵依次選中label「菜鳥站邊」和label「神鳥歸位」，而後選擇起始對齊。

 

這樣咱們看到2個labe的左邊框都對齊了。

其餘三邊的對齊方式與此雷同，此處再也不贅述。

 

容器約束

例1:以整個屏幕爲容器，而後使用水平中心約束和垂直中心約束

 

例2：拖入1個View做爲容器

 

給容器View添加約束：左/下/右邊距0，高300

 

拖入1個label至View容器中，這時能夠在左邊的結構圖中看到label「菜鳥先飛」是View的子控件。

爲label「菜鳥先飛」設置垂直中心約束。

 

當前約束不足以肯定label「菜鳥先飛」的位置，因而咱們再爲其添加左邊距10的約束。

 

 

 

 

伸縮/拉伸等級約束

假設咱們想實現以下的效果。

 

因而咱們設置約束以下：

label「神鳥」：左/上/右邊距0，高40

label「神鳥不語，霸氣縷縷」：左/上/右邊距0，高40

（注：先將兩個label都放到面板上，且並列放置，不然label「神鳥」會直接約束到屏幕左邊界）

貌似應該很完美，然鵝。。。咱們看到的是

 

或者是

 

到底怎麼回事呢？

每一個控件都有1個「收縮等級」（hugging priority）。

當2個控件共同佔有一塊區域且2個控件在水平（或垂直）方向有多餘空間（好比上述例子），高「收縮等級」控件不動，低「收縮等級」控件拉伸填滿區域。

當2個控件「收縮等級」相同時，就會出現以上報錯。

「收縮等級」分水平方向和垂直方向，以上例子報錯的是水平方向「收縮等級」問題：2個label的「收縮等級」都是251。

咱們不妨把左邊的label的收縮等級改成「252」。

 

 

 

相應的還有一個拉伸等級（Compression Resistance Priority）：

當2個控件共同佔有一塊區域且2個控件在水平（或垂直）方向空間不足（好比上述例子），高「拉伸等級」的控件不動，低「拉伸等級」的控件壓縮自身內容。

話很少說，對比看下面2幅圖，你就明白「拉伸等級」是什麼了。

 

 

小技巧

當咱們在設置約束的時候，控件的初始位置有時候會很關鍵。

咱們分別爲以上2幅圖中的「菜鳥居下」添加一樣的約束：水平中心約束+上邊距20

結果卻不同：

 

咱們看到，2種情形對「上邊距」的理解是不一樣的：前者指的是和麪板上邊界的距離，後者指的是和「神鳥在上」下邊界的距離。

因此咱們最好將所要約束的控件放在咱們視覺上合適的位置，以便Xcode進行自動識別。

 

咱們的故事講到如今，想必你們對UI佈局的大部分情節已經瞭解到七七八八了，以上內容足以讓咱們應對90%以上的UI佈局問題。下一節，咱們將介紹其中的「曲折原因」，給你們一個完整的故事。

 

上一節           回目錄          下一節