Swift 2 iOS開發 - 自動佈局

當我們製作iOS應用程式並在其中新增UI元素時，它們在一個裝置上看起來可能很完美。然而，現在我們應該嘗試在其他裝置上執行相同的應用程式。我們肯定會看到UI的巨大變化，有些元素也可能無法顯示。

自動佈局是我們用來解決這個問題的技術。在本章中，我們將瞭解如何製作自動佈局、應用約束和堆疊檢視，以使您的應用程式在每臺裝置上都看起來完美無缺。

我們將從建立一個新的單檢視應用程式開始。

新增元素

在檢視的頂部中央新增一個標籤，並在檢視的底部右側新增一個標籤，如下所示：

現在，嘗試更改方向，我們會看到底部右側的標籤沒有顯示，而中間的標籤不在中央。

（**提示** - 你不需要執行模擬器來檢視佈局，只需點選螢幕底部的“檢視方式” - iPhone x，如下面的螢幕截圖所示。）

選擇iPhone版本和方向。我們會看到UI元素排列不正確。因此，當我們更改方向、裝置或兩者兼顧時，底部右側的標籤會消失，而中央標籤不會位於中央。

發生這種情況是因為我們沒有為元素指定固定位置。為了解決這個問題，我們將使用約束。

點選中央標籤，按住control鍵並拖動到檢視內的任意位置，然後釋放。現在你應該看到：

選擇**水平居中於容器**。再次重複上述步驟並選擇“垂直間距到頂部佈局指南”。

現在，點選“新增新約束”按鈕，選擇高度和寬度，然後點選“新增2個約束”。

點選右下角的標籤，從標籤control鍵拖動到檢視內的任意位置，然後選擇“尾隨空間到容器邊距”。同樣，選擇“垂直間距到底部佈局指南”。

（**提示** - 要一次選擇多個選項，請按住shift鍵並選擇選項。確保在選擇所有選項之前不要釋放shift鍵。）

應用所有約束後，檢視應如下所示：

堆疊檢視透過將元素排列在堆疊中來工作。排列後，我們只需定義一次約束，所有元素就會相應地排列。要開始使用堆疊檢視，請建立以下檢視，它在其他裝置上看起來不會更好。但是，在本節中，我們將使其適合其他裝置。

現在，選擇頂部兩個按鈕 - 選擇一個按鈕，按command鍵，然後選擇第二個按鈕。要將它們嵌入堆疊檢視中，請轉到編輯器→嵌入→堆疊檢視。

或者

在右下角，有一個選項 Option 選擇此選項，這將把檢視嵌入堆疊檢視中。

水平堆疊檢視應如下面的螢幕截圖所示。

在選中此堆疊檢視時，轉到屬性檢查器。將“分佈”更改為“平均填充”，並將“間距”更改為10。

現在，選擇此堆疊檢視和底部按鈕，然後再次嵌入堆疊檢視。這次堆疊檢視的軸線將是垂直的，而在之前的堆疊檢視中，它是水平的。

現在您的檢視將如下所示：

在選中此堆疊檢視時，轉到其屬性檢查器，並確保它與下面的螢幕截圖匹配。

現在，您的檢視應如下所示：

最後一步是為這個堆疊檢視建立約束。

選擇堆疊檢視→點選“新增新約束”按鈕。

這將開啟一個新視窗，我們必須在其中按照下一個螢幕截圖中顯示的步驟操作。

以下螢幕截圖將描述如何向堆疊檢視新增約束。

這就是我們將對自動佈局所做的全部工作。在下一章中，我們將討論動畫。

這就是我們將對自動佈局所做的全部工作。在下一章中，我們將討論動畫。

列印頁面