使用適用于 iOS 的 Xamarin 設計工具自動版面配置

  • 發行項

警告

iOS 設計工具在 Visual Studio 2019 2019 16.8 版和 mac 8.8 版Visual Studio已淘汰，並在 Visual Studio 2019 16.9 版和 Visual Studio for Mac 8.9 版中移除。 建置 iOS 使用者介面的建議方式是直接在執行 Xcode 的 Mac 上。 如需詳細資訊，請參閱 使用 Xcode 設計使用者介面。

自動設定 (也稱為「調適型配置」) 是回應式設計方法。 不同于過渡版面配置系統，其中每個元素的位置都會硬式編碼到螢幕上的某個點，自動設定是關於 關聯 性 - 相對於設計介面上其他元素的專案位置。 自動設定的核心是限制式或規則的概念，可定義元素或元素集合在畫面上其他元素的內容中的位置。 由於元素未系結至螢幕上的特定位置，因此條件約束可協助建立調適型配置，以在不同螢幕大小和裝置方向上看起來良好。

在本指南中，我們會介紹條件約束，以及如何在 Xamarin iOS 設計工具中使用它們。 本指南未涵蓋以程式設計方式使用條件約束。 如需以程式設計方式使用自動設定的資訊，請參閱 Apple 檔。

規格需求

Xamarin Designer for iOS 可在 Visual Studio 2017 和更新版本中的 Visual Studio for Mac Windows取得。

本指南假設從 iOS 設計 工具簡介指南瞭解設計工具的元件。

條件約束簡介

條件約束是螢幕上兩個元素之間的關聯性的數學標記法。 將 UI 元素的位置表示為數學關聯性，可解決與 UI 元素位置硬式編碼相關的數個問題。 例如，如果我們要以直向模式從螢幕底部放置按鈕 20px，按鈕的位置會從橫向模式的畫面外。 若要避免這種情況，我們可以設定條件約束，將按鈕 20px 的下邊緣從檢視底部放置。 然後，按鈕邊緣的位置會計算為 button.bottom = view.bottom - 20px，這會將按鈕 20px從直向模式和橫向模式的檢視底部放置。 根據數學關聯性來計算放置的能力，是讓條件約束在 UI 設計中很有用的功能。

當我們設定條件約束時，我們會建立一個 NSLayoutConstraint 物件，其接受要限制的物件作為引數，以及條件約束將採取動作 的屬性或屬性。 在 iOS 設計工具中，屬性包含邊緣，例如元素的 左、 右、 上和 底端 。 它們也包含大小屬性，例如 高度 和 寬度，以及中心點位置、 centerX 和 centerY。 例如，當我們在兩個按鈕的左界限位置上新增條件約束時，設計工具會在底下產生下列程式碼：

View.AddConstraint (NSLayoutConstraint.Create (Button1, NSLayoutAttribute.Left, NSLayoutRelation.Equal, Button2, NSLayoutAttribute.Left, 1, 10));

下一節說明使用 iOS 設計工具使用條件約束，包括啟用和停用自動設定和使用條件約束工具列。

啟用自動版面配置

預設的 iOS 設計工具設定已啟用條件約束模式。 不過，如果您需要手動啟用或停用它，您可以在兩個步驟中執行此動作：

  1. 按一下設計介面上的空白空間。 這會取消選取任何專案，並顯示分鏡指令檔的屬性。

  2. 核取或取消核取屬性面板中的 [ 使用自動設定 ] 核取方塊：

    The Use Autolayout checkbox in the property panel

根據預設，不會在介面上建立或顯示任何條件約束。 相反地，它們會在編譯時期從框架資訊自動推斷。 若要新增條件約束，我們需要在設計介面上選取專案，並將條件約束加入其中。 我們可以使用 條件約束工具列來執行此動作。

條件約束工具列

The Context Menu Commands

條件約束工具列已更新，現在包含兩個主要部分：

  • [條件約束模式] 按鈕切換：先前，您在設計介面上按一下選取的檢視再次進入條件約束模式。 您現在應該會在條件約束列中使用此切換按鈕：

    contraints modes toggle

  • [更新條件約束] 按鈕： 請務必注意，視您是否處於條件約束編輯模式而定的變更。

    • 在條件約束編輯模式中，此按鈕會調整條件約束以符合元素框架。
    • 在畫面格編輯模式中，此按鈕會調整元素框架，以符合條件約束所定義的位置。

條件約束編輯快顯

條件約束編輯器快顯視窗可讓我們針對選取檢視一次新增和更新多個條件約束。 我們可以建立多個間距、外觀比例和對齊條件約束，例如將檢視對齊兩個檢視的左邊緣。

若要編輯選取檢視的條件約束，請按一下省略號以顯示快顯： constraints editing popover

開啟條件約束快顯時，它會在檢視上顯示任何預設條件約束。 我們可以設定從右上角下拉式方塊選取 [ 所有 側邊] 的所有間距條件約束，然後選取 [ 全部清除 ] 以移除它們。

W會設定寬度，而 H會設定高度條件約束。 當您檢查 [外觀比例] 時，檢視高度和寬度將會在不同的螢幕大小上控制、檢視的寬度是用來做為微調的微調器，而高度則是分母。

constraints spacing

間距條件約束的四個下拉式方塊會列出要錨定條件約束的鄰近檢視

Surface-Based條件約束編輯

如需更微調的條件約束編輯，我們可以直接與設計介面上的條件約束互動。 本節介紹介面型條件約束編輯的基本概念，包括釘選間距控制項、置放區域，以及使用不同類型的條件約束。

建立條件約束

iOS 設計工具提供兩種類型的控制項，可在設計介面上操作元素。 拖曳控制項 和 釘選間距控制項，如下圖所示：

view controls

這些是藉由選取條件約束列中的條件約束模式按鈕來切換。

元素每一側的 4 個 T 形控點會定義條件約束專案的上邊緣、右邊緣、下邊緣和左邊緣。 元素右下方的兩個 I 形控點分別定義 高度 和 寬度 條件約束。 中間方塊同時處理 centerX 和 centerY 條件約束。

若要建立條件約束，請挑選控制碼，並將它拖曳到設計介面上的某處。 當您開始拖曳時，表面會出現一系列的綠色線條/方塊，告知您可以限制什麼。 例如，在下列螢幕擷取畫面中，我們會限制中間按鈕的頂端：

Constraining the top side of the middle button

請注意其他兩個按鈕的三條虛線綠色線條。 綠色線條表示 置放區域，或我們可以限制之其他元素的屬性。 在上述螢幕擷取畫面中，其他兩個按鈕提供 3 個垂直置放區域 ( 底部、 centerY、 top) 來限制我們的按鈕。 檢視頂端的虛線綠色線表示檢視控制器會在檢視頂端提供條件約束，而實心綠色方塊表示檢視控制器會在上方版面配置指南下方提供條件約束。

重要

版面配置指南是特殊類型的條件約束目標，可讓我們建立將系統橫條或工具列等系統橫條存在的頂端和底部條件約束。 其中一個主要用途是讓 iOS 6 和 iOS 7 之間的應用程式相容，因為最新版本的容器檢視延伸于狀態列下方。 如需頂端版面配置指南的詳細資訊，請參閱 Apple 檔。

接下來的三個章節將介紹使用不同類型的條件約束。

大小條件約束

使用大小限制式 - 高度 和 寬度 - 您有兩個選項。 第一個選項是拖曳控制碼以限制鄰近專案大小，如上述範例所示。 另一個選項是按兩下控制碼以建立自我條件約束。 這可讓我們指定常數大小值，如下列螢幕擷取畫面所示：

Drag the handle to constrain to a neighbor element size, as illustrated here

中心條件約束

方形控點會根據內容建立 centerX 或 centerY 條件約束。 拖曳方形控點會啟動其他元素，以提供垂直和水準置放區域，如下列螢幕擷取畫面所示：

Center Constraints

如果您選擇垂直置放區域，將會建立 centerY 條件約束。 如果您選擇水準置放區域，條件約束會以 centerX為基礎。

組合式條件約束

若要在兩個元素之間建立對齊和大小相等條件約束，您可以從頂端工具列選取專案，以指定 - 依序進行水準對齊、垂直對齊和大小相等，如下列螢幕擷取畫面所示：

Combinational Constraints

視覺化和編輯條件約束

當您新增條件約束時，當您選取專案時，它會在設計介面上顯示為藍色線條：

Visualizing Constraints

您可以按一下藍色線條，直接在屬性面板中編輯條件約束值，以選取條件約束。 或者，按兩下藍色線條會顯示快顯視窗，可讓您直接在設計介面上編輯值：

Editing Constraints

條件約束問題

使用條件約束時，可能會發生數種類型的問題：

  • 衝突的條件約束 — 當多個條件約束強制元素具有屬性的衝突值，且條件約束引擎無法協調這些條件約束時，就會發生這種情況。
  • 受限制的專案 — 元素的屬性 (位置 + 大小) 必須完全涵蓋其一組條件約束和內建大小，條件約束才能有效。 如果這些值模棱兩可，表示專案不受限制。
  • 框架錯置 - 當元素的框架和其條件約束集定義兩個不同的結果矩形時，就會發生這種情況。

本節詳細說明上述三個問題，並提供如何處理它們的詳細資料。

衝突的條件約束

衝突的條件約束會以紅色標示，並具有警告符號。 將滑鼠停留在警告符號上方，會顯示含有衝突相關資訊的快顯視窗：

Conflicting Constraints warning

受限制的專案

受限制的專案會出現在橙色中，並觸發檢視控制器物件列中橙色標記圖示的外觀：

Underconstrained items appear in orange

如果您按一下該標記圖示，您可以取得場景中受限制專案的相關資訊，並藉由完全限制或移除其條件約束來解決問題，如以下螢幕擷取畫面所示：

Fixing Underconstrained Items

框架錯置

框架錯置使用與受限制專案相同的色彩代碼。 專案一律會使用其原生框架在介面上轉譯，但在框架錯位時，紅色矩形會標示應用程式執行時專案最終會出現的位置，如下列螢幕擷取畫面所示：

Sample Frame Misplacement view

若要解決畫面錯位錯誤，請從條件約束工具列選取 [ 根據條件約束更新畫面 格] 按鈕， (最右邊的按鈕) ：

Update Frames based on Constraints toolbar button

這會自動調整專案框架，以符合控制項所定義的位置。

修改程式碼中的條件約束

根據您的應用程式需求，有時候您可能需要在程式碼中修改條件約束。 例如，若要調整大小或重新調整檢視條件約束的附加位置，請變更條件約束的優先順序或完全停用條件約束。

若要在程式碼中存取條件約束，您必須先執行下列動作，在 iOS 設計工具中公開它：

  1. 使用上述任何方法建立條件約束 () 。

  2. 在 [檔大綱總管] 中，尋找所需的條件約束並加以選取：

    The Document Outline Explorer

  3. 接下來，在[屬性總管] 的[小工具] 索引標籤中，將[名稱] 指派給 [條件約束]：

    The Widget Tab

  4. 儲存您的變更。

有了上述變更，您就可以在程式碼中存取條件約束，並修改其屬性。 例如，您可以使用下列專案，將附加檢視的高度設定為零：

ViewInfoHeight.Constant = 0;

針對 iOS 設計工具中的條件約束提供下列設定：

Editing a Constraint in the Property Explorer

延後版面設定階段

自動設定引擎不會立即更新附加的檢視，以回應條件約束變更，而是將 延後版 面配置傳遞排程在近期。 在此延後階段，不僅會更新指定的檢視條件約束，也會重新計算階層中每個檢視的條件約束，並更新以調整新版面配置。

您可以隨時呼叫 SetNeedsLayout 父檢視的 或 SetNeedsUpdateConstraints 方法來排程自己的延後版面配置傳遞。

延後版面配置傳遞包含兩個透過檢視階層的唯一傳遞：

  • 更新傳遞 - 在此階段中，自動設定引擎會周遊檢視階層，並在 UpdateViewConstraints 所有檢視控制器和 UpdateConstraints 所有檢視上叫用 方法。
  • 配置傳遞 - 同樣地，自動設定引擎會周遊檢視階層，但這次 ViewWillLayoutSubviews 會在所有檢視控制器和 LayoutSubviews 所有檢視上叫用 方法。 方法會 LayoutSubviewsFrame 使用自動設定引擎所計算的矩形來更新每個子檢視的 屬性。

建立條件約束變更的動畫

除了修改條件約束屬性之外，您還可以使用核心動畫，以動畫顯示檢視條件約束的變更。 例如：

UIView.BeginAnimations("OpenInfo");
UIView.SetAnimationDuration(1.0f);
ViewInfoHeight.Constant = 237;
View.LayoutIfNeeded();

//Execute Animation
UIView.CommitAnimations();

這裡的索引鍵是在動畫區塊內呼叫 LayoutIfNeeded 父檢視的 方法。 這會告訴檢視繪製動畫位置或大小變更的每個「畫面格」。 如果沒有這一行，檢視只會貼齊最終版本，而不會產生動畫效果。

總結

本指南引進了 iOS 自動 (或「自適性」) 版面配置，以及限制式概念，做為設計介面上專案間關聯性的數學標記法。 它描述如何在 iOS 設計工具中啟用自動設定、使用 [條件約束] 工具列，以及在設計介面上個別編輯條件約束。 接下來，它會說明如何針對三個常見的條件約束問題進行疑難排解。 最後，它示範如何在程式碼中修改條件約束。