[TOC=2] 自動布局根據放置在這些視圖上的約束，動態計算視圖層次結構中所有視圖的大小和位置。 例如，可以約束一個按鈕，使其與圖像視圖水平居中，并使按鈕的上邊緣始終保持低于圖像底部8個點。 如果圖像視圖的大小或位置發生變化，按鈕的位置會自動調整為匹配。 這種基于約束的設計方法允許構建動態響應內部和外部變化的用戶界面。 ## 外部變化 當父視圖的大小或形狀發生變化時，會發生外部變化。對于每個更改，必須更新視圖層次結構的布局，以最大限度使用可用空間。以下是一些常見的外部變化來源: * 用戶調整窗口大小（OS X）。 * 用戶在 iPad 上輸入或離開分割視圖（iOS）。 * 設備旋轉（iOS）。 * 來電和錄音條出現或消失（iOS）。 * 想支持不同 size classes 。 * 想支持不同的屏幕尺寸。 這些更改大部分可以在運行時發生，并且需要來自應用程序的動態響應。 其他的，如支持不同的屏幕尺寸，代表應用程序適應不同的環境。 即使屏幕尺寸在運行時通常不會改變，創建自適應界面可讓您的應用程序在 iPhone 4S，iPhone 6 Plus 甚至 iPad 上同樣運行。 自動布局也是支持 iPad 上的 Slide Over and Split Views 的關鍵組件。 ## 內部變化 當用戶界面中視圖或控件的大小發生更改時，會發生內部更改。 以下是內部變化的一些常見來源： * 應用程序顯示的內容發生變化。 * 該應用支持國際化。 * 該應用程序支持動態類型（iOS）。 當應用內容發生變化時，新內容可能需要與舊內容不同的布局。 這通常發生在顯示文本或圖像的應用程序中。 例如，新聞應用需要根據單個新聞報道的大小來調整其布局。 同樣，照片拼貼必須處理各種圖像尺寸和寬高比。 國際化是讓應用能夠適應不同語言，地區和文化的過程。 國際化應用程序的布局必須考慮到這些差異，并在應用程序支持的所有語言和區域中正確顯示。 國際化對布局有三個主要影響： 首先，當將用戶界面翻譯成其他語言時，文本標簽需要不同的空間量。 例如，德語通常需要比英語更多的空間。 日語通常要求少得多。 其次，即使語言不變，用于表示日期和數字的格式也可能因地區而異。 雖然這些變化通常比語言變化更微妙，但用戶界面仍然需要適應大小的微小變化。 第三，改變語言不僅會影響文本的大小，還會影響布局的組織。 不同的語言使用不同的布局方向 例如，英語使用從左到右的布局方向，阿拉伯語和希伯來語使用從右到左的布局方向。 通常，用戶界面元素的順序應與布局方向相匹配。 如果按鈕位于英文視圖的右下角，則應位于左下方的阿拉伯語中。 最后，如果 iOS 應用支持動態類型，用戶可以更改應用中使用的字體大小。 這可以改變用戶界面中任何文本元素的高度和寬度。 如果用戶在應用程序運行時更改字體大小，則字體和布局必須適應。 ## 自動布局與基于框架的布局 有三種主要的布局用戶界面的方法。 可以以編程方式布局用戶界面，可以使用 autoresizing masks 來自動化對外部更改的某些響應，也可以使用自動布局。 傳統上，應用通過以編程方式為視圖層次結構中的每個視圖設置框架來布置其用戶界面。 該框架在父視圖坐標系中定義視圖的原點，高度和寬度。  為了布局用戶界面，必須計算視圖層次結構中每個視圖的大小和位置。 然后，如果發生更改，則必須重新計算所有受影響視圖的幀。 在很多方面，以編程方式定義視圖的框架提供了最大的靈活性和強大功能。 發生變化時，可以根據需要進行任何更改。 但是，由于必須自己管理所有更改，因此，設計一個簡單的用戶界面需要花費大量的精力進行設計，調試和維護。 創建一個真正的自適應用戶界面將難度提高一個數量級。 可以使用 autoresizing masks 來幫助緩解一些此類工作。 autoresizing masks 定義視圖的框架在父視圖的框架更改時如何更改。 這簡化了適應外部變化的布局的創建。 但是， autoresizing masks 支持可能布局的相對較小的子集。 對于復雜的用戶界面，通常需要使用自己的程序化更改來增強 autoresizing masks 。 另外， autoresizing masks 僅適用于外部更改。 他們不支持內部更改。 盡管 autoresizing masks 只是對程序化布局的反復改進，但自動布局代表了一種全新的范例。 不要考慮視圖的框架，而是考慮其關系。 自動布局使用一系列約束來定義用戶界面。約束通常表示兩個視圖之間的關系。然后，自動布局根據這些約束計算每個視圖的大小和位置。這將生成動態響應內部和外部更改的布局。  用于設計一組約束來創建特定行為的邏輯與用于編寫過程式或面向對象代碼的邏輯非常不同。幸運的是，掌握自動布局與掌握任何其他編程任務無異。有兩個基本步驟：首先，需要了解基于約束的布局背后的邏輯，然后需要了解 API 。學習其他編程任務時，已經成功執行了這些步驟。 自動布局也不例外。 本指南的其余部分旨在幫助你輕松過渡到自動布局。 * [The Auto Layout Without Constraints](https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/AutoLayoutWithoutConstraints.html#//apple_ref/doc/uid/TP40010853-CH8-SW1) 章節描述了一個高級抽象，它簡化了 Auto Layout 支持的用戶界面的創建。 * [The Anatomy of a Constraint](https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/AnatomyofaConstraint.html#//apple_ref/doc/uid/TP40010853-CH9-SW1) 章節提供了需要理解的背景理論，以便自己成功地與自動布局進行交互。 * [Working with Constraints in Interface Builder](https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/WorkingwithConstraintsinInterfaceBuidler.html#//apple_ref/doc/uid/TP40010853-CH10-SW1) 章節描述了用于設計自動布局的工具 * [Programmatically Creating Constraints](https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/ProgrammaticallyCreatingConstraints.html#//apple_ref/doc/uid/TP40010853-CH16-SW1) 和 [Auto Layout Cookbook](https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/LayoutUsingStackViews.html#//apple_ref/doc/uid/TP40010853-CH3-SW1) 章節詳細描述了API 。 * [Auto Layout Cookbook](https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/LayoutUsingStackViews.html#//apple_ref/doc/uid/TP40010853-CH3-SW1) 提供了各種復雜程度的樣本布局，可以在自己的項目中學習和使用 * 如果出現任何問題，[Debugging Auto Layout](https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/TypesofErrors.html#//apple_ref/doc/uid/TP40010853-CH22-SW1) 會提供建議和工具來修復事情。 > 原文地址 > [Understanding Auto Layout](https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/index.html#//apple_ref/doc/uid/TP40010853-CH7-SW1)