iOS 8 Auto Layout界面自動佈局系列3-使用代碼添加布局約束

原文鏈接:點擊打開鏈接

本系列的第一篇文章介紹了自動佈局的基本原理，第二篇文章通過一個簡單的例子演示瞭如何使用Xcode的Interface Builder（簡稱IB）以可視化方式添加約束。本篇爲該系列的第三篇文章，主要介紹如何通過代碼來添加布局約束。 
其實，我個人認爲本篇才應該是系列的第二篇，因爲通過代碼構建自動佈局約束是最基礎的，也是最靈活的方式。而IB只不過是把複雜的過程以直觀簡單的方式呈現出來，而且並非所有的情況都能用IB來解決，所以學習並掌握通過代碼來添加自動佈局約束是非常必要的。但是爲了降低學習的難度，提高讀者理解和接受的程度，最終還是把本編放在第三的位置。閒言少敘，我們進入正題。 
第一篇文章中講到，每一個佈局約束就是一個明確的線性變化規則，在數學上是以一次函數的形式表示，即： 
y = m * x + c　　　（公式3.1） 
在UIKit中，每一個佈局約束是一個NSLayoutConstraint實例，NSLayoutConstraint類的主要屬性定義如下：

<code class="hljs objectivec has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">NS_CLASS_AVAILABLE_IOS(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">6</span>_0)
<span class="hljs-class" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">@interface</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">NSLayoutConstraint</span> : <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">NSObject</span></span>
...
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">@property</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">readonly</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">assign</span>) <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">id</span> firstItem;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">@property</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">readonly</span>) NSLayoutAttribute firstAttribute;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">@property</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">readonly</span>) NSLayoutRelation relation;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">@property</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">readonly</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">assign</span>) <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">id</span> secondItem;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">@property</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">readonly</span>) NSLayoutAttribute secondAttribute;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">@property</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">readonly</span>) <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGFloat</span> multiplier;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">@property</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGFloat</span> constant;
...
+(instancetype)constraintWithItem:(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">id</span>)firstItem attribute:(NSLayoutAttribute)firstAttribute 
 relatedBy:(NSLayoutRelation)relation 
 toItem:(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">id</span>)secondItem attribute:(NSLayoutAttribute)secondAttribute 
 multiplier:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGFloat</span>)multiplier constant:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGFloat</span>)constant;</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li></ul>

其中的firstItem與secondItem分別是界面中受約束的視圖與被參照的視圖。他們不一定非得是兄弟關係或者父子關係，只要是他們有着共同的祖先視圖即可，這一點是autoresizingMask無法做到的。 
firstAttribute與secondAttribute分別是firstItem與secondItem的某個佈局屬性（NSLayoutAttribute）：

<code class="hljs objectivec has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">typedef</span> NS_ENUM(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSInteger</span>, NSLayoutAttribute)
{
    NSLayoutAttributeLeft = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>,
    NSLayoutAttributeRight,
    NSLayoutAttributeTop,
    NSLayoutAttributeBottom,
    NSLayoutAttributeLeading,
    NSLayoutAttributeTrailing,
    NSLayoutAttributeWidth,
    NSLayoutAttributeHeight,
    NSLayoutAttributeCenterX,
    NSLayoutAttributeCenterY,
    NSLayoutAttributeBaseline,
    NSLayoutAttributeNotAnAttribute = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>,
    ......<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//省略剩餘</span>
};</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li></ul>

每一個枚舉值代表了一個佈局屬性，名字都很直觀就不一一解釋了。注意，firstItem與secondItem不一定非得是同樣的值，允許定義諸如某視圖的高度等於另一個視圖的寬度這樣的約束。NSLayoutAttributeNotAnAttribute這個額外解釋一下，當我們需要爲某個視圖精確指定一個寬度或者高度值時，這時候secondItem爲nil，secondAttribute爲NSLayoutAttributeNotAnAttribute。 
relation定義了佈局關係（NSLayoutRelation）：

<code class="hljs objectivec has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">typedef</span> NS_ENUM(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSInteger</span>, NSLayoutRelation)
{
    NSLayoutRelationLessThanOrEqual = -<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>,
    NSLayoutRelationEqual = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>,
    NSLayoutRelationGreaterThanOrEqual = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>,
};</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>

佈局關係可以是相等、大於等於或者小於等於。 
multiplier即比例係數。constant即常量。 
因此，每個約束就對應如下關係： 
firstItem.firstAttribute {==,<=,>=} secondItem.secondAttribute * multiplier + constant　　　（公式３.２） 
我們可以調用NSLayoutConstraint類的constraintWithItem:…方法，傳入所有需要的參數構造一個新的約束。

理論就到此爲止，下面我們還是以第二篇的例子來講解如何使用代碼添加約束。

打開Xcode，新建項目，選擇iOS -> Application -> Single View Application。項目命名爲AutoLayoutByConstraint，語言任意選擇，設備選擇Universal。下載蘋果Logo圖片apple.jpg，並將其拖入項目中。文件下載地址： 
http://yunpan.cn/cfmJB82dfSwf6（提取碼：4049）

首先在界面上方用來顯示蘋果Logo圖片的是一個UIImageView，ViewController類的viewDidLoad方法如下：

<code class="hljs lua has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">- (void)viewDidLoad
{
    [super viewDidLoad];

    UIImageView* logoImageView = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"apple.jpg"]]</span>;
    logoImageView.contentMode = UIViewContentModeScaleAspectFit;
    [self.view addSubview:logoImageView];
}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul>

我們需要爲logoImageView其添加4個約束： 
- logoImageView左側與父視圖左側對齊 
- logoImageView右側與父視圖右側對齊 
- logoImageView頂部與父視圖頂部對齊 
- logoImageView高度爲父視圖高度一半 
根據公式3.2，在ViewController類的viewDidLoad方法中構造上述4個約束，代碼如下：

<code class="hljs glsl has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//logoImageView左側與父視圖左側對齊</span>
    NSLayoutConstraint* leftConstraint = [NSLayoutConstraint constraintWithItem:logoImageView <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">attribute</span>:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">attribute</span>:NSLayoutAttributeLeading multiplier:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0</span>f constant:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.0</span>f];

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//logoImageView右側與父視圖右側對齊</span>
    NSLayoutConstraint* rightConstraint = [NSLayoutConstraint constraintWithItem:logoImageView <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">attribute</span>:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">attribute</span>:NSLayoutAttributeTrailing multiplier:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0</span>f constant:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.0</span>f];

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//logoImageView頂部與父視圖頂部對齊</span>
    NSLayoutConstraint* topConstraint = [NSLayoutConstraint constraintWithItem:logoImageView <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">attribute</span>:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">attribute</span>:NSLayoutAttributeTop multiplier:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0</span>f constant:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.0</span>f];

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//logoImageView高度爲父視圖高度一半</span>
    NSLayoutConstraint* heightConstraint = [NSLayoutConstraint constraintWithItem:logoImageView <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">attribute</span>:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:self.view <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">attribute</span>:NSLayoutAttributeHeight multiplier:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.5</span>f constant:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.0</span>f];

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//iOS 6.0或者7.0調用addConstraints</span>
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//[self.view addConstraints:@[leftConstraint, rightConstraint, topConstraint, heightConstraint]];</span>

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//iOS 8.0以後設置active屬性值</span>
    leftConstraint.active = YES;
    rightConstraint.active = YES;
    topConstraint.active = YES;
    heightConstraint.active = YES;</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li></ul>

注意，我們需要將創建的約束添加到約束所涉及到的兩個視圖的最小公共祖先視圖上。例如，如果直接設置視圖的寬度和高度，則將約束添加到該視圖即可；如果約束建立在父視圖和子視圖上，則添加到父視圖上；如果約束建立在兩個兄弟視圖上，則添加到兩個兄弟視圖的父視圖上。 
對於上面的4個約束而言，涉及到的兩個視圖分別是logoImageView與其父視圖self.view，這兩個視圖的最小公共祖先視圖爲self.view。UIView類提供了若干方法和屬性，用於添加或者移除約束。對於iOS 6或者iOS 7可以調用addConstraint(s):和removeConstraint(s):方法；對於iOS 8及更新的版本，直接設置約束的active屬性或者調用activateConstraints:與deactivateConstraints:類方法。

就是這麼簡單！現在編譯並運行項目， 

 
貌似logoImageView的尺寸不太對。如果在viewDidLoad方法中設置self.view的背景色爲紅色，看得會更清楚： 
 
爲什麼會這樣？這是由於蘋果在iOS 6當中引入了自動佈局的新概念，但在那時仍然有很多舊的代碼使用autoresizingMask與setFrame:的方式構建界面。試想，如果將一個已經設置好frame並使用autoresizingMask的視圖添加到一個使用自動佈局的視圖中時，運行時需要隱式地將前者的frame和autoresizingMask轉化爲自動佈局約束（這些隱式轉換的約束的類型爲NSAutoresizingMaskLayoutConstraint），這樣才能明確其位置與尺寸而不會導致約束的缺失。這個隱式轉換的過程，是由UIView的translatesAutoresizingMaskIntoConstraints屬性的值決定的。默認情況下，該值爲YES，表示需要運行時自動進行隱式轉換。這對於兼容舊的代碼當然是好的，然而當我們明確爲視圖添加了約束後，我們就不希望再進行autoresizingMask的隱式轉換了，否則就會引起約束的衝突。因此，需要特別注意的是，當我們使用代碼創建視圖時，需要將translatesAutoresizingMaskIntoConstraints屬性的值設置爲NO。在viewDidLoad方法中創建logoImageView的代碼之後，添加如下代碼：

<code class="hljs lua has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">    UIImageView* logoImageView = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"apple.jpg"]]</span>;
    logoImageView.translatesAutoresizingMaskIntoConstraints = NO;</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>

再次運行，這次就沒問題了。 
到這裏，我想你應該可以把剩餘的視圖和約束的代碼添加上了，全部代碼如下：

<code class="hljs objectivec has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">- (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)viewDidLoad
{
    [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">super</span> viewDidLoad];

<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//    self.view.backgroundColor = [UIColor redColor];</span>

    <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIImageView</span>* logoImageView = [[<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIImageView</span> alloc] initWithImage:[<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIImage</span> imageNamed:@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"apple.jpg"</span>]];
    logoImageView<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.translatesAutoresizingMaskIntoConstraints</span> = <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">NO</span>;
    logoImageView<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.contentMode</span> = UIViewContentModeScaleAspectFit;
    [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.view</span> addSubview:logoImageView];

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//logoImageView左側與父視圖左側對齊</span>
    NSLayoutConstraint* leftConstraint = [NSLayoutConstraint constraintWithItem:logoImageView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.view</span> attribute:NSLayoutAttributeLeading multiplier:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0</span>f constant:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.0</span>f];

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//logoImageView右側與父視圖右側對齊</span>
    NSLayoutConstraint* rightConstraint = [NSLayoutConstraint constraintWithItem:logoImageView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.view</span> attribute:NSLayoutAttributeTrailing multiplier:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0</span>f constant:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.0</span>f];

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//logoImageView頂部與父視圖頂部對齊</span>
    NSLayoutConstraint* topConstraint = [NSLayoutConstraint constraintWithItem:logoImageView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.view</span> attribute:NSLayoutAttributeTop multiplier:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0</span>f constant:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.0</span>f];

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//logoImageView高度爲父視圖高度一半</span>
    NSLayoutConstraint* heightConstraint = [NSLayoutConstraint constraintWithItem:logoImageView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.view</span> attribute:NSLayoutAttributeHeight multiplier:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.5</span>f constant:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.0</span>f];

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//iOS 6.0或者7.0調用addConstraints</span>
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//    [self.view addConstraints:@[leftConstraint, rightConstraint, topConstraint, heightConstraint]];</span>

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//iOS 8.0以後設置active屬性值</span>
    leftConstraint<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.active</span> = <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">YES</span>;
    rightConstraint<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.active</span> = <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">YES</span>;
    topConstraint<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.active</span> = <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">YES</span>;
    heightConstraint<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.active</span> = <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">YES</span>;

    <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIScrollView</span>* scrollView = [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIScrollView</span> new];
    scrollView<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.translatesAutoresizingMaskIntoConstraints</span> = <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">NO</span>;
    [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.view</span> addSubview:scrollView];

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//scrollView左側與父視圖左側對齊</span>
    NSLayoutConstraint* scrollLeftConstraint = [NSLayoutConstraint constraintWithItem:scrollView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.view</span> attribute:NSLayoutAttributeLeading multiplier:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0</span>f constant:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.0</span>f];

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//scrollView右側與父視圖右側對齊</span>
    NSLayoutConstraint* scrollRightConstraint = [NSLayoutConstraint constraintWithItem:scrollView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.view</span> attribute:NSLayoutAttributeTrailing multiplier:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0</span>f constant:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.0</span>f];

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//scrollView底部與父視圖底部對齊</span>
    NSLayoutConstraint* scrollBottomConstraint = [NSLayoutConstraint constraintWithItem:scrollView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.view</span> attribute:NSLayoutAttributeBottom multiplier:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0</span>f constant:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.0</span>f];

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//scrollView頂部與logoImageView底部對齊</span>
    NSLayoutConstraint* scrollTopConstraint = [NSLayoutConstraint constraintWithItem:scrollView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:logoImageView attribute:NSLayoutAttributeBottom multiplier:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0</span>f constant:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.0</span>f];

    scrollLeftConstraint<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.active</span> = <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">YES</span>;
    scrollRightConstraint<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.active</span> = <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">YES</span>;
    scrollBottomConstraint<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.active</span> = <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">YES</span>;
    scrollTopConstraint<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.active</span> = <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">YES</span>;

    <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UILabel</span>* nameLabel = [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UILabel</span> new];
    nameLabel<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.translatesAutoresizingMaskIntoConstraints</span> = <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">NO</span>;
    nameLabel<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.text</span> = @<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"蘋果公司"</span>;
    nameLabel<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.backgroundColor</span> = [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIColor</span> greenColor];
    [scrollView addSubview:nameLabel];

    <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UILabel</span>* descriptionLabel = [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UILabel</span> new];
    descriptionLabel<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.translatesAutoresizingMaskIntoConstraints</span> = <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">NO</span>;
    descriptionLabel<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.text</span> = @<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"蘋果公司（Apple Inc. ）是美國的一家高科技公司。由史蒂夫·喬布斯、斯蒂夫·沃茲尼亞克和羅·韋恩(Ron Wayne)等三人於1976年4月1日創立，並命名爲美國蘋果電腦公司（Apple Computer Inc. ）， 2007年1月9日更名爲蘋果公司，總部位於加利福尼亞州的庫比蒂諾。\n蘋果公司創立之初主要開發和銷售的個人電腦，截至2014年致力於設計、開發和銷售消費電子、計算機軟件、在線服務和個人計算機。蘋果的Apple II於1970年代助長了個人電腦革命，其後的Macintosh接力於1980年代持續發展。該公司硬件產品主要是Mac電腦系列、iPod媒體播放器、iPhone智能手機和iPad平板電腦；在線服務包括iCloud、iTunes Store和App Store；消費軟件包括OS X和iOS操作系統、iTunes多媒體瀏覽器、Safari網絡瀏覽器，還有iLife和iWork創意和生產力套件。蘋果公司在高科技企業中以創新而聞名世界。\n蘋果公司1980年12月12日公開招股上市，2012年創下6235億美元的市值記錄，截至2014年6月，蘋果公司已經連續三年成爲全球市值最大公司。蘋果公司在2014年世界500強排行榜中排名第15名。2013年9月30日，在宏盟集團的“全球最佳品牌”報告中，蘋果公司超過可口可樂成爲世界最有價值品牌。2014年，蘋果品牌超越谷歌（Google），成爲世界最具價值品牌 。"</span>;
    descriptionLabel<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.numberOfLines</span> = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;
    descriptionLabel<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.backgroundColor</span> = [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIColor</span> yellowColor];
    [scrollView addSubview:descriptionLabel];

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//nameLabel左側與父視圖左側對齊</span>
    NSLayoutConstraint* nameLabelLeftConstraint = [NSLayoutConstraint constraintWithItem:nameLabel attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:scrollView attribute:NSLayoutAttributeLeading multiplier:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0</span>f constant:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.0</span>f];

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//nameLabel右側與父視圖右側對齊</span>
    NSLayoutConstraint* nameLabelRightConstraint = [NSLayoutConstraint constraintWithItem:nameLabel attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:scrollView attribute:NSLayoutAttributeTrailing multiplier:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0</span>f constant:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.0</span>f];

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//nameLabel底部與descriptionLabel頂部對齊</span>
    NSLayoutConstraint* nameLabelBottomConstraint = [NSLayoutConstraint constraintWithItem:nameLabel attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:descriptionLabel attribute:NSLayoutAttributeTop multiplier:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0</span>f constant:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.0</span>f];

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//nameLabel頂部與父視圖頂部對齊</span>
    NSLayoutConstraint* nameLabelTopConstraint = [NSLayoutConstraint constraintWithItem:nameLabel attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:scrollView attribute:NSLayoutAttributeTop multiplier:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0</span>f constant:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.0</span>f];

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//nameLabel高度爲20</span>
    NSLayoutConstraint* nameLabelHeightConstraint = [NSLayoutConstraint constraintWithItem:nameLabel attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">nil</span> attribute:NSLayoutAttributeNotAnAttribute multiplier:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0</span>f constant:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">20.0</span>f];

    nameLabelLeftConstraint<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.active</span> = <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">YES</span>;
    nameLabelRightConstraint<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.active</span> = <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">YES</span>;
    nameLabelBottomConstraint<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.active</span> = <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">YES</span>;
    nameLabelTopConstraint<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.active</span> = <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">YES</span>;
    nameLabelHeightConstraint<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.active</span> = <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">YES</span>;

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//descriptionLabel左側與父視圖左側對齊</span>
    NSLayoutConstraint* descriptionLabelLeftConstraint = [NSLayoutConstraint constraintWithItem:descriptionLabel attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:scrollView attribute:NSLayoutAttributeLeading multiplier:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0</span>f constant:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.0</span>f];

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//descriptionLabel右側與父視圖右側對齊</span>
    NSLayoutConstraint* descriptionLabelRightConstraint = [NSLayoutConstraint constraintWithItem:descriptionLabel attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:scrollView attribute:NSLayoutAttributeTrailing multiplier:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0</span>f constant:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.0</span>f];

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//descriptionLabel底部與父視圖底部對齊</span>
    NSLayoutConstraint* descriptionLabelBottomConstraint = [NSLayoutConstraint constraintWithItem:descriptionLabel attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:scrollView attribute:NSLayoutAttributeBottom multiplier:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0</span>f constant:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.0</span>f];

    descriptionLabelLeftConstraint<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.active</span> = <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">YES</span>;
    descriptionLabelRightConstraint<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.active</span> = <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">YES</span>;
    descriptionLabelBottomConstraint<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.active</span> = <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">YES</span>;

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//nameLabel寬度與logoImageView寬度相等</span>
    NSLayoutConstraint* nameLabelWidthConstraint = [NSLayoutConstraint constraintWithItem:nameLabel attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:logoImageView attribute:NSLayoutAttributeWidth multiplier:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0</span>f constant:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.0</span>f];

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//nameLabel寬度與logoImageView寬度相等</span>
    NSLayoutConstraint* descriptionLabelWidthConstraint = [NSLayoutConstraint constraintWithItem:descriptionLabel attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:logoImageView attribute:NSLayoutAttributeWidth multiplier:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0</span>f constant:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.0</span>f];

    nameLabelWidthConstraint<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.active</span> = <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">YES</span>;
    descriptionLabelWidthConstraint<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.active</span> = <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">YES</span>;
}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box; padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box; padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li><li style="box-sizing: border-box; padding: 0px 5px;">64</li><li style="box-sizing: border-box; padding: 0px 5px;">65</li><li style="box-sizing: border-box; padding: 0px 5px;">66</li><li style="box-sizing: border-box; padding: 0px 5px;">67</li><li style="box-sizing: border-box; padding: 0px 5px;">68</li><li style="box-sizing: border-box; padding: 0px 5px;">69</li><li style="box-sizing: border-box; padding: 0px 5px;">70</li><li style="box-sizing: border-box; padding: 0px 5px;">71</li><li style="box-sizing: border-box; padding: 0px 5px;">72</li><li style="box-sizing: border-box; padding: 0px 5px;">73</li><li style="box-sizing: border-box; padding: 0px 5px;">74</li><li style="box-sizing: border-box; padding: 0px 5px;">75</li><li style="box-sizing: border-box; padding: 0px 5px;">76</li><li style="box-sizing: border-box; padding: 0px 5px;">77</li><li style="box-sizing: border-box; padding: 0px 5px;">78</li><li style="box-sizing: border-box; padding: 0px 5px;">79</li><li style="box-sizing: border-box; padding: 0px 5px;">80</li><li style="box-sizing: border-box; padding: 0px 5px;">81</li><li style="box-sizing: border-box; padding: 0px 5px;">82</li><li style="box-sizing: border-box; padding: 0px 5px;">83</li><li style="box-sizing: border-box; padding: 0px 5px;">84</li><li style="box-sizing: border-box; padding: 0px 5px;">85</li><li style="box-sizing: border-box; padding: 0px 5px;">86</li><li style="box-sizing: border-box; padding: 0px 5px;">87</li><li style="box-sizing: border-box; padding: 0px 5px;">88</li><li style="box-sizing: border-box; padding: 0px 5px;">89</li><li style="box-sizing: border-box; padding: 0px 5px;">90</li><li style="box-sizing: border-box; padding: 0px 5px;">91</li><li style="box-sizing: border-box; padding: 0px 5px;">92</li><li style="box-sizing: border-box; padding: 0px 5px;">93</li><li style="box-sizing: border-box; padding: 0px 5px;">94</li><li style="box-sizing: border-box; padding: 0px 5px;">95</li><li style="box-sizing: border-box; padding: 0px 5px;">96</li><li style="box-sizing: border-box; padding: 0px 5px;">97</li><li style="box-sizing: border-box; padding: 0px 5px;">98</li><li style="box-sizing: border-box; padding: 0px 5px;">99</li><li style="box-sizing: border-box; padding: 0px 5px;">100</li><li style="box-sizing: border-box; padding: 0px 5px;">101</li><li style="box-sizing: border-box; padding: 0px 5px;">102</li><li style="box-sizing: border-box; padding: 0px 5px;">103</li><li style="box-sizing: border-box; padding: 0px 5px;">104</li><li style="box-sizing: border-box; padding: 0px 5px;">105</li><li style="box-sizing: border-box; padding: 0px 5px;">106</li><li style="box-sizing: border-box; padding: 0px 5px;">107</li><li style="box-sizing: border-box; padding: 0px 5px;">108</li><li style="box-sizing: border-box; padding: 0px 5px;">109</li></ul>

程序最終項目文件鏈接：http://yunpan.cn/cV2cmtNMYz6UA （提取碼：0f38） 
自動佈局約束是通過描述視圖間的關係而非強加座標值來進行定位的，它更能滿足不同設備尺寸的界面佈局，並且更容易讓人理解。雖然上面的代碼很冗長，但每一句所描述的事實都十分清楚。在此省略自動佈局的好處10000字。。。 
區區幾個簡單的視圖，就要寫這麼長的代碼。。。 
 
估計你看得有點眼花繚亂了吧，其實我也是修改並檢查了好幾次，又調試了好幾次才完全寫對的。在下一篇文章中，我將介紹另一種更簡潔的方式，即使用VFL來添加約束，敬請期待吧。