Auto Layout界面自動佈局系列-使用VFL添加布局約束

原創 嗨皮009 2018-09-04 14:58

本篇博文是轉自博主Puzhi的專欄，因爲之前接觸了前面的幾節內容，所以下面的東西相當於從Puzhi處進行充電學習了。系列博文原址：http://blog.csdn.net/pucker

///////分割線//////////

本系列第一篇文章介紹了自動佈局的基本原理，第二篇通過一個簡單的例子演示瞭如何使用IB以可視化方式創建自動佈局約束，第三篇使用代碼直接創建NSLayoutConstraint實例來定義自動佈局約束。本篇文章在第三篇文章的基礎上，使用Visual Format Language（暫且翻譯爲可視化格式語言，簡稱VFL）創建約束。 
在第三篇文章中，我們僅僅創建了4個視圖，就需要創建將近20個NSLayoutConstraint實例，而且每次創建NSLayoutConstraint實例時都需要傳入7個參數（firstItem.firstAttribute {==,<=,>=} secondItem.secondAttribute * multiplier + constant），非常繁瑣而且容易出錯。在實際項目中，視圖的層次會更復雜，約束的數量就會成倍增加，有沒有辦法既直觀又簡單地創建約束？那你不妨試試VFL，這也是這篇文章的主題。

VFL的使用非常簡單直觀，不過既然是一門語言，必然就有其語法要求。。。 
又要學語法。。。你是逗我嗎？ 
好吧，我們還是以之前的例子邊做邊講吧。 
縱屏

橫屏

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

界面上方用來顯示蘋果Logo圖片的是一個UIImageView，其具有如下4個約束： 
- logoImageView左側與父視圖左側對齊 
- logoImageView右側與父視圖右側對齊 
- logoImageView頂部與父視圖頂部對齊 
- logoImageView高度爲父視圖高度一半

將ViewController類的viewDidLoad方法修改如下：

<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-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左側與父視圖左側對齊，logoImageView右側與父視圖右側對齊</span>
    <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSArray</span>* hConstraintArray = [NSLayoutConstraint constraintsWithVisualFormat:@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"H:|-0-[logoImageView]-0-|"</span> options:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span> metrics:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">nil</span> views:@{@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"logoImageView"</span>: logoImageView}];
    [NSLayoutConstraint activateConstraints:hConstraintArray];

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//垂直方向上，logoImageView頂部與父視圖頂部對齊</span>
    <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSArray</span>* vConstraintArray = [NSLayoutConstraint constraintsWithVisualFormat:@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"V:|-0-[logoImageView]"</span> options:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span> metrics:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">nil</span> views:@{@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"logoImageView"</span>: logoImageView}];
    [NSLayoutConstraint activateConstraints:vConstraintArray];

    <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];
    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>;
}</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></ul>

viewDidLoad方法首先調用了NSLayoutConstraint類的一個靜態方法constraintsWithVisualFormat:…..，根據傳入的VFL字符串生成若干約束，該方法定義如下：

<code class="hljs css 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-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">NSArray</span> *)<span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">constraintsWithVisualFormat</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:(NSString</span> *)<span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">format</span> <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">options</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:(NSLayoutFormatOptions)opts</span> <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">metrics</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:(NSDictionary</span> *)<span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">metrics</span> <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">views</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:(NSDictionary</span> *)<span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">views</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></ul>

參數format是一個符合VFL語法的字符串。上述代碼中的H:表示本VFL字符串描述的是水平方向的約束，與之相對的是V:表示垂直方向。如果VFL字符串沒有指明H:還是V:，則默認爲水平方向。|表示父視圖。VFL要求所有視圖的名字必須放在中括號之內，[logoImageView]指代的就是logoImageView。-0-表示的是間距值爲0。 
所以@”H:|-0-[logoImageView]-0-|”表示在水平方向上，logoImageView左側與其父視圖左側的間距爲0，logoImageView右側與其父視圖右側的間距爲0。@”V:|-0-[logoImageView]”表示在垂直方向上，logoImageView頂部與其父視圖頂部的間距爲0。 
另外說一句，-0-可以不寫，也就是說如果間距爲0則不用明確寫出，所以@”H:|-0-[logoImageView]-0-|”可以精簡爲@”H:|[logoImageView]|”，@”V:|-0-[logoImageView]”可以精簡爲@”V:|[logoImageView]”，是不是很直觀？ 
參數opts表示佈局的對齊方式與方向：

<code class="hljs haskell 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-title" style="box-sizing: border-box;">typedef</span> <span class="hljs-type" style="box-sizing: border-box; color: rgb(102, 0, 102);">NS_OPTIONS</span>(<span class="hljs-type" style="box-sizing: border-box; color: rgb(102, 0, 102);">NSUInteger</span>, <span class="hljs-type" style="box-sizing: border-box; color: rgb(102, 0, 102);">NSLayoutFormatOptions</span>)
{
    <span class="hljs-type" style="box-sizing: border-box; color: rgb(102, 0, 102);">NSLayoutFormatAlignAllLeft</span> = (<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span> << <span class="hljs-type" style="box-sizing: border-box; color: rgb(102, 0, 102);">NSLayoutAttributeLeft</span>),
    <span class="hljs-type" style="box-sizing: border-box; color: rgb(102, 0, 102);">NSLayoutFormatAlignAllRight</span> = (<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span> << <span class="hljs-type" style="box-sizing: border-box; color: rgb(102, 0, 102);">NSLayoutAttributeRight</span>),
    <span class="hljs-type" style="box-sizing: border-box; color: rgb(102, 0, 102);">NSLayoutFormatAlignAllTop</span> = (<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span> << <span class="hljs-type" style="box-sizing: border-box; color: rgb(102, 0, 102);">NSLayoutAttributeTop</span>),
    <span class="hljs-type" style="box-sizing: border-box; color: rgb(102, 0, 102);">NSLayoutFormatAlignAllBottom</span> = (<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span> << <span class="hljs-type" style="box-sizing: border-box; color: rgb(102, 0, 102);">NSLayoutAttributeBottom</span>),
    <span class="hljs-type" style="box-sizing: border-box; color: rgb(102, 0, 102);">NSLayoutFormatAlignAllLeading</span> = (<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span> << <span class="hljs-type" style="box-sizing: border-box; color: rgb(102, 0, 102);">NSLayoutAttributeLeading</span>),
    <span class="hljs-type" style="box-sizing: border-box; color: rgb(102, 0, 102);">NSLayoutFormatAlignAllTrailing</span> = (<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span> << <span class="hljs-type" style="box-sizing: border-box; color: rgb(102, 0, 102);">NSLayoutAttributeTrailing</span>),
    <span class="hljs-type" style="box-sizing: border-box; color: rgb(102, 0, 102);">NSLayoutFormatAlignAllCenterX</span> = (<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span> << <span class="hljs-type" style="box-sizing: border-box; color: rgb(102, 0, 102);">NSLayoutAttributeCenterX</span>),
    <span class="hljs-type" style="box-sizing: border-box; color: rgb(102, 0, 102);">NSLayoutFormatAlignAllCenterY</span> = (<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span> << <span class="hljs-type" style="box-sizing: border-box; color: rgb(102, 0, 102);">NSLayoutAttributeCenterY</span>),
    <span class="hljs-type" style="box-sizing: border-box; color: rgb(102, 0, 102);">NSLayoutFormatAlignAllBaseline</span> = (<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span> << <span class="hljs-type" style="box-sizing: border-box; color: rgb(102, 0, 102);">NSLayoutAttributeBaseline</span>),
    <span class="hljs-type" style="box-sizing: border-box; color: rgb(102, 0, 102);">NSLayoutFormatAlignAllLastBaseline</span> = <span class="hljs-type" style="box-sizing: border-box; color: rgb(102, 0, 102);">NSLayoutFormatAlignAllBaseline</span>,
    <span class="hljs-type" style="box-sizing: border-box; color: rgb(102, 0, 102);">NSLayoutFormatAlignAllFirstBaseline</span> <span class="hljs-type" style="box-sizing: border-box; color: rgb(102, 0, 102);">NS_ENUM_AVAILABLE_IOS</span>(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">8</span>_0) = (<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span> << <span class="hljs-type" style="box-sizing: border-box; color: rgb(102, 0, 102);">NSLayoutAttributeFirstBaseline</span>),

    <span class="hljs-type" style="box-sizing: border-box; color: rgb(102, 0, 102);">NSLayoutFormatAlignmentMask</span> = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0xFFFF</span>,

    /* choose only one <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">of</span> these three */
    <span class="hljs-type" style="box-sizing: border-box; color: rgb(102, 0, 102);">NSLayoutFormatDirectionLeadingToTrailing</span> = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span> << <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">16</span>, // <span class="hljs-default" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">default</span></span>
    <span class="hljs-type" style="box-sizing: border-box; color: rgb(102, 0, 102);">NSLayoutFormatDirectionLeftToRight</span> = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span> << <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">16</span>,
    <span class="hljs-type" style="box-sizing: border-box; color: rgb(102, 0, 102);">NSLayoutFormatDirectionRightToLeft</span> = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span> << <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">16</span>,  

    <span class="hljs-type" style="box-sizing: border-box; color: rgb(102, 0, 102);">NSLayoutFormatDirectionMask</span> = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0x3</span> << <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">16</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></ul>

參數metrics是一個字典。其中的鍵（Key）是字符串，出現在VFL語句中；值（Value）是NSNumber對象。在解析VFL字符串時，編譯器將自動把鍵替換爲其對應的值，目的是使VFL更容易明白和理解。 
另外，在解析VFL時，UIKit需要知道VFL字符串中的視圖名稱究竟對應哪個真實的視圖，視圖映射字典參數views就用來提供這個信息。其中的鍵（Key）是字符串，出現在VFL語句中；值（Value）是UIView對象。上述代碼中的@{@”logoImageView”: logoImageView}表示的就是字符串@”logoImageView”對應視圖logoImageView。 
不過有個很遺憾的事實要告訴你，VFL並不能表達所有的約束，例如“logoImageView高度爲父視圖高度一半”這樣的具有比例關係的約束，就無法使用VFL表達出來，所以這時我們只能直接創建NSLayoutConstraint實例了，就像上面的代碼那樣。 
接着我們添加UIScrollView，在viewDidLoad方法中添加如下代碼：

<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-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>;
    scrollView<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> blueColor]; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//爲了方便查看效果，暫時將scrollView背景色設置爲藍色</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左側與父視圖左側對齊，scrollView右側與父視圖右側對齊</span>
    <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSArray</span>* hScrollViewConstraintArray = [NSLayoutConstraint constraintsWithVisualFormat:@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"H:|[scrollView]|"</span> options:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span> metrics:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">nil</span> views:NSDictionaryOfVariableBindings(scrollView)];
    [NSLayoutConstraint activateConstraints:hScrollViewConstraintArray];

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//垂直方向上，scrollView頂部與logoImageView底部對齊，scrollView底部與父視圖底部對齊</span>
    <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSArray</span>* vScrollViewConstraintArray = [NSLayoutConstraint constraintsWithVisualFormat:@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"V:[logoImageView][scrollView]|"</span> options:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span> metrics:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">nil</span> views:NSDictionaryOfVariableBindings(logoImageView, scrollView)];
    [NSLayoutConstraint activateConstraints:vScrollViewConstraintArray];</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></ul>

需要額外說明的是，這裏調用了一個NSDictionaryOfVariableBindings宏，它能夠方便我們構建字典參數。簡單說來，NSDictionaryOfVariableBindings(scrollView)就等於@{@”scrollView”: scrollView}，NSDictionaryOfVariableBindings(logoImageView, scrollView)就等於@{@”logoImageView”: logoImageView, @”scrollView”: scrollView}。 
另外，在垂直方向上，我們可以把之前的@”V:|[logoImageView]”與剛纔的@”V:[logoImageView][scrollView]|”合併爲一句@”V:|[logoImageView][scrollView]|”，就不需要分別創建heightConstraint與vScrollViewConstraintArray了，達到進一步精簡的目的。

接着我們添加scrollView中的兩個UILabel對象，在viewDidLoad方法中添加如下代碼：

<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-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左側與父視圖左側對齊，nameLabel右側與父視圖右側對齊，nameLabel寬度與logoImageView寬度相同</span>
    <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSArray</span>* hNameLabelConstraintArray = [NSLayoutConstraint constraintsWithVisualFormat:@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"H:|[nameLabel(==logoImageView)]|"</span> options:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span> metrics:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">nil</span> views:NSDictionaryOfVariableBindings(nameLabel, logoImageView)];
    [NSLayoutConstraint activateConstraints:hNameLabelConstraintArray];

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//水平方向上，descriptionLabel左側與父視圖左側對齊，descriptionLabel右側與父視圖右側對齊，descriptionLabel寬度與logoImageView寬度相同</span>
    <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSArray</span>* hDescriptionLabelConstraintArray = [NSLayoutConstraint constraintsWithVisualFormat:@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"H:|[descriptionLabel(==logoImageView)]|"</span> options:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span> metrics:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">nil</span> views:NSDictionaryOfVariableBindings(descriptionLabel, logoImageView)];
    [NSLayoutConstraint activateConstraints:hDescriptionLabelConstraintArray];

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//垂直方向上，nameLabel頂部與父視圖頂部對齊，nameLabel高度爲20，nameLabel底部與descriptionLabel頂部對齊，descriptionLabel底部與父視圖底部對齊</span>
    <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSArray</span>* vLabelConstraintArray = [NSLayoutConstraint constraintsWithVisualFormat:@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"V:|[nameLabel(20)][descriptionLabel]|"</span> options:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span> metrics:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">nil</span> views:NSDictionaryOfVariableBindings(nameLabel, descriptionLabel)];
    [NSLayoutConstraint activateConstraints:vLabelConstraintArray];</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></ul>

其中@”H:|[nameLabel(==logoImageView)]|”表示nameLabel寬度與logoImageView寬度相等，@”V:|[nameLabel(20)][descriptionLabel]|”表示nameLabel的寬度爲20。到此我們就完成了這個例子，在此附上全部代碼：

<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-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-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;">//水平方向上，logoImageView左側與父視圖左側對齊，logoImageView右側與父視圖右側對齊</span>
    <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSArray</span>* hConstraintArray = [NSLayoutConstraint constraintsWithVisualFormat:@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"H:|[logoImageView]|"</span> options:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span> metrics:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">nil</span> views:@{@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"logoImageView"</span>: logoImageView}];
    [NSLayoutConstraint activateConstraints:hConstraintArray];

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//垂直方向上，logoImageView頂部與父視圖頂部對齊，logoImageView底部與scrollView頂部對齊，scrollView底部與父視圖底部對齊</span>
    <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSArray</span>* vConstraintArray = [NSLayoutConstraint constraintsWithVisualFormat:@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"V:|[logoImageView][scrollView]|"</span> options:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span> metrics:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">nil</span> views:@{@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"logoImageView"</span>: logoImageView, @<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"scrollView"</span>: scrollView}];
    [NSLayoutConstraint activateConstraints:vConstraintArray];

    <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];
    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-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//水平方向上，scrollView左側與父視圖左側對齊，scrollView右側與父視圖右側對齊</span>
    <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSArray</span>* hScrollViewConstraintArray = [NSLayoutConstraint constraintsWithVisualFormat:@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"H:|[scrollView]|"</span> options:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span> metrics:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">nil</span> views:NSDictionaryOfVariableBindings(scrollView)];
    [NSLayoutConstraint activateConstraints:hScrollViewConstraintArray];

    <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左側與父視圖左側對齊，nameLabel右側與父視圖右側對齊，nameLabel寬度與logoImageView寬度相同</span>
    <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSArray</span>* hNameLabelConstraintArray = [NSLayoutConstraint constraintsWithVisualFormat:@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"H:|[nameLabel(==logoImageView)]|"</span> options:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span> metrics:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">nil</span> views:NSDictionaryOfVariableBindings(nameLabel, logoImageView)];
    [NSLayoutConstraint activateConstraints:hNameLabelConstraintArray];

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//水平方向上，descriptionLabel左側與父視圖左側對齊，descriptionLabel右側與父視圖右側對齊，descriptionLabel寬度與logoImageView寬度相同</span>
    <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSArray</span>* hDescriptionLabelConstraintArray = [NSLayoutConstraint constraintsWithVisualFormat:@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"H:|[descriptionLabel(==logoImageView)]|"</span> options:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span> metrics:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">nil</span> views:NSDictionaryOfVariableBindings(descriptionLabel, logoImageView)];
    [NSLayoutConstraint activateConstraints:hDescriptionLabelConstraintArray];

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//垂直方向上，nameLabel頂部與父視圖頂部對齊，nameLabel高度爲20，nameLabel底部與descriptionLabel頂部對齊，descriptionLabel底部與父視圖底部對齊</span>
    <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSArray</span>* vLabelConstraintArray = [NSLayoutConstraint constraintsWithVisualFormat:@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"V:|[nameLabel(20)][descriptionLabel]|"</span> options:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span> metrics:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">nil</span> views:NSDictionaryOfVariableBindings(nameLabel, descriptionLabel)];
    [NSLayoutConstraint activateConstraints:vLabelConstraintArray];
}</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></ul>

與第三篇文章中逐個去創建NSLayoutConstraint對象相比，是不是簡單直觀了不少？程序最終項目文件鏈接： 
http://yunpan.cn/cVE8i8WmnpJwv（提取碼：d348） 
本篇文章我們初步瞭解了VFL的基本使用方式，關於VFL的具體語法格式請參看蘋果的《Auto Layout Guide》，鏈接： 
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/Introduction/Introduction.html#//apple_ref/doc/uid/TP40010853


發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Kubernetes腦圖

       對於非技術人員來說，Kubernetes（常簡稱爲K8s或Kube）是一個開源平臺，它能讓Linux容器的操作變得更加自動化和高效。以下是針對非技術人員的Kubernetes介紹，用簡潔明瞭的方式解釋了其主要特點和功能：定義和

PetterLiu 2024-06-01 13:21:34

go語言 defer延遲機制

靠父母你是公主，靠男人你是王妃，靠自己你是乞丐。     func main() { res = sum(10, 20) fmt.Println("res=", res) } func sum(n1 int, n2 in

方達達 2024-06-01 13:20:14

go語言 匿名函數定義

不要把銀行卡密碼，設成女朋友的生日，不然總要換多麻煩。   第一種方法：在匿名函數定義時，直接調用 result := func(val int, vals ... int) int { sum := val

方達達 2024-06-01 13:20:14

華爲交換機配置實驗項目筆記

一、項目需求1、內網互通2、只有銷售部vlan20可以訪問外網3、技術部vlan10不能訪問server1服務器 涉及知識點：1.vlan 虛擬局域網 作用：隔離廣播域2.鏈路聚合 作用：增加鏈路帶寬、冗餘3.DHCP 動態

yi-sheng 2024-06-01 13:18:03

gRPC入門學習之旅（九） gRPC入門學習之旅（三） gRPC入門學習之旅（四） gRPC入門學習之旅（七）

gRPC入門學習之旅目錄  gRPC入門學習之旅（一） gRPC入門學習之旅（二） gRPC入門學習之旅（三） gRPC入門學習之旅（四） gRPC入門學習之旅（七）   3.10、客戶端編譯生成GRPC類 1

DotNet菜園 2024-06-01 13:10:02

記錄一個excel公式，把ascii字符串轉爲安碼錶數值排序的值

=SUMPRODUCT(CODE(MID(A1, ROW(INDIRECT("1:" & LEN(A1))), 1)) * 10^(LEN(A1) - ROW(INDIRECT("1:" & LEN(A1)))))

馬肯尼煤牙巴骨 2024-06-01 13:06:52

YOLOv10的改進、部署和微調訓練總結

YOLO模型因其在計算成本和檢測性能之間的平衡而在實時目標檢測中很受歡迎。前幾天YOLOv10也剛剛發佈了。我們這篇文章就來看看YOLOv10有哪些改進，如何部署，以及微調。 YOLOv10通過無nms的訓練解決了延遲問題，作者爲無nms

deephub 2024-06-01 13:04:52

uniapp使用EventBus實現頁面間數據傳遞

前情 最近在做小程序項目，選用是當前比較火的uniapp技術棧，經常會遇到頁面間消息傳遞的需求。 爲什麼要這麼做？ uniapp頁面間數據通信方式有很多：通過url傳參，狀態管理庫vuex/pinia，本地存儲，事件通道eventChann

！win ！ 2024-06-01 12:58:41

LDAR泄漏檢測與修復過程管控管理系統

       泄漏檢測與修復(LDAR)過程管控平臺創新實現了檢測數據原始校驗功能，檢測App原始數據不怕被篡改，如果篡改數據系統可以及時發現數據被篡改過，解決了必須用檢測app在線上傳和下載工單在某些場景的不方便性，給檢測企業檢測過程提供

高海東 2024-06-01 12:58:30

【2024-05-30】銷售能力

20:00 人類最寶貴的財富是希望，希望減輕了我們的苦惱，爲我們在享受當前的樂趣中描繪出來樂趣的遠景。                                                                 ——伏

wc的一些事一些情 2024-06-01 12:58:00

Android桌面Launcher源碼淺析

在Android啓動過程-萬字長文(Android14)中介紹了Android系統的啓動過程，本篇文章將繼續介紹桌面應用Launcher。 一、Launcher介紹 在Android啓動過程-萬字長文(Android14)中提到Lau

柳雲居士 2024-06-01 12:56:10

滴滴面試：談談你對Netty線程模型的理解？

Netty 線程模型是指 Netty 框架爲了提供高性能、高併發的網絡通信，而設計的管理和利用線程的策略和機制。 Netty 線程模型被稱爲 Reactor（響應式）模型/模式，它是基於 NIO 多路複用模型的一種升級，它的核心思想是將 I

王磊的博客 2024-06-01 12:53:00

java數據list寫入文件

/** * 生成數據文件 * * @param data 數據 * @param fileName 文件名 * @return 數據文件對象 * @throws IOE

追極 2024-06-01 12:50:49

TS + Webpack 整合 Jest

安裝 Jest 和相關依賴 首先，安裝 Jest 和 TypeScript 的 Jest 預處理器ts-jest以及類型定義文件。 npm install --save-dev jest ts-jest @types/jest 初

Higurashi-kagome 2024-05-31 14:33:27

安卓手機如何登錄抖音境外版

If you remove the SIM card and use ss to mask your location, you might be able to register and log in to TikTok using yo

mingzhanghui 2024-05-31 14:31:17