IOS AutoLayout详解（三）用代码实现(附Demo下载)

原创Blog，转载请注明出处 
blog.csdn.net/hello_hwc 
欢迎关注我的IOS SDK专栏，这个专栏我会持续进行更新。 
IOS SDK详解

前言：

在开发的过程中，有时候创建View没办法通过Storyboard来进行，又需要AutoLayout，这时候用代码创建就派上用场了，这篇文章我会详解用代码实现的两个主要函数，然后讲解一个Demo，最后Demo我会附上下载链接。

用代码实现的函数一

第一个函数通过描述两个view的参考线之间的约束来创建约束，例如有一个label和一个textfield。约束这样描述

label的右边参考线和textfield的右边参考线距离恒定为10

函数

<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;">instancetype</span>)<span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">constraintWithItem</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:(id)view1</span><span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">attribute</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:(NSLayoutAttribute)attr1</span><span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">relatedBy</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:(NSLayoutRelation)relation</span><span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">toItem</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:(id)view2</span><span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">attribute</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:(NSLayoutAttribute)attr2</span><span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">multiplier</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:(CGFloat)multiplier</span><span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">constant</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:(CGFloat)c</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></ul>

参数的意义：

通常，multiplier的值为1.0。这个不太好翻译，我举个例子就懂了 
举个例子 
如果，我想要一个View的宽度为另一个View的一半，则

<code class="hljs vhdl 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;">[NSLayoutConstraintconstraintWithItem:self.view1<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">attribute</span>:NSLayoutAttributeWidthrelatedBy:NSLayoutRelationEqualtoItem:self.view2<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">attribute</span>:NSLayoutAttributeWidthmultiplier:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.5</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">constant</span>:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.0</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></ul>

这里有个计算公式

attribute1 == multiplier × attribute2 + constant 
也就是说，在这里 
view1.width = view2.width * 0.5 + 0.0

这样，更能够理解上述函数中两个参数的含义了吧。 
再举个例子： 
我想让一个View距离右上角（30，30）并且保持自己的长宽不变。实现代码

<code class="hljs vhdl 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;">  NSLayoutConstraint * h_c = [NSLayoutConstraint constraintWithItem:self.view<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">attribute</span>:NSLayoutAttributeRightrelatedBy:NSLayoutRelationEqualtoItem:self.testview<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">attribute</span>:NSLayoutAttributeRightmultiplier:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">constant</span>:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">30</span>];NSLayoutConstraint * v_c = [NSLayoutConstraint constraintWithItem:self.testview<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">attribute</span>:NSLayoutAttributeToprelatedBy:NSLayoutRelationEqualtoItem:self.view<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">attribute</span>:NSLayoutAttributeTopmultiplier:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">constant</span>:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">30</span>];NSLayoutConstraint * e_w = [NSLayoutConstraint constraintWithItem:self.testview<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">attribute</span>:NSLayoutAttributeWidthrelatedBy:NSLayoutRelationEqualtoItem:nil<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">attribute</span>:NSLayoutAttributeWidthmultiplier:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">constant</span>:CGRectGetWidth(self.testview.frame)];NSLayoutConstraint * e_h = [NSLayoutConstraint constraintWithItem:self.testview<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">attribute</span>:NSLayoutAttributeHeightrelatedBy:NSLayoutRelationEqualtoItem:nil<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">attribute</span>:NSLayoutAttributeHeightmultiplier:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">constant</span>:CGRectGetHeight(self.testview.frame)];[self.view addConstraints:@[h_c,v_c,e_h,e_w]];
</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></ul>

效果如图 
 

用代码实现的方法二

方法二使用可视化语言VFL 
可视化语言的Apple文档链接如下 
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/VisualFormatLanguage/VisualFormatLanguage.html 
利用到的函数为

<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><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></ul>

参数的的意义

举个例子就懂了，例如，惰性初始化下面一个View，不难看出，这个View我没有指定大小，大小我要用约束来创建

<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;">UIView</span> *)testview{<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (!_testview) {_testview = [[<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIView</span> alloc] init];_testview<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-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> _testview;
}
- (<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-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:<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;">.testview</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></ul>

然后，我用约束的方式，让View的大小恒定为100＊100

<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;">NSArray</span> *c_v = [NSLayoutConstraint constraintsWithVisualFormat:@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"V:[testview(==100)]"</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;">"testview"</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;">.testview</span>}];<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSArray</span> *c_h = [NSLayoutConstraint constraintsWithVisualFormat:@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"H:[testview(==100)]"</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;">"testview"</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;">.testview</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> addConstraints:c_h];[<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> addConstraints:c_v];</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>

然后，我再把View约束到距离右上角（30＊30）的位置

<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;">NSArray</span> *l_v = [NSLayoutConstraint constraintsWithVisualFormat:@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"V:|-hdistance-[testview]"</span>options:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>metrics:@{@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"hdistance"</span>:@(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">30</span>)}views:@{@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"testview"</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;">.testview</span>}];<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSArray</span> *l_h = [NSLayoutConstraint constraintsWithVisualFormat:@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"H:[testview]-vdistance-|"</span>options:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>metrics:@{@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"vdistance"</span>:@(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">30</span>)}views:@{@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"testview"</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;">.testview</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></ul>

这样，约束后的效果如图 
 
 
关于可视化语言的建议

个人而言，比较喜欢用可视化语言的方式来出创建约束。而且也不用刻意去学，一开始使用的时候打开一个链接放在旁边，不会的时候参考下。多用几次，自然就会了。 

三 一个Demo

我用上述两种方式实现类似的同一组约束，效果如下 
 
 
这里，ImageView的中心始终在view的中心，两个button分别距离ImageView距离为标准距离8，并且分别左右对齐。 
用方式一实现的代码

<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;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.view</span> addSubview:<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;">.imageview</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;">.imageview</span> setTranslatesAutoresizingMaskIntoConstraints:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">NO</span>];NSLayoutConstraint * hc = [NSLayoutConstraintconstraintWithItem:<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:NSLayoutAttributeCenterXrelatedBy:NSLayoutRelationEqualtoItem:<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;">.imageview</span>attribute:NSLayoutAttributeCenterXmultiplier:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0</span>constant:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.0</span>];NSLayoutConstraint * vc = [NSLayoutConstraint constraintWithItem:<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:NSLayoutAttributeCenterYrelatedBy:NSLayoutRelationEqualtoItem:<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;">.imageview</span>attribute:NSLayoutAttributeCenterYmultiplier:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0</span>constant:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.0</span>];NSLayoutConstraint * equalW = [NSLayoutConstraint constraintWithItem:<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;">.imageview</span>attribute:NSLayoutAttributeWidthrelatedBy:NSLayoutRelationEqualtoItem:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">nil</span>attribute:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>multiplier:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0</span>constant:CGRectGetWidth(<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;">.imageview</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.frame</span>)];NSLayoutConstraint * equalH = [NSLayoutConstraint constraintWithItem:<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;">.imageview</span>attribute:NSLayoutAttributeHeightrelatedBy:NSLayoutRelationEqualtoItem:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">nil</span>attribute:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>multiplier:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0</span>constant:CGRectGetHeight(<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;">.imageview</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.frame</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> addConstraints:@[hc,vc,equalH,equalW]];[<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:<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;">.button_1</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;">.button_1</span> setTranslatesAutoresizingMaskIntoConstraints:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">NO</span>];NSLayoutConstraint * b1_image_v = [NSLayoutConstraint constraintWithItem:<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;">.imageview</span>attribute:NSLayoutAttributeToprelatedBy:NSLayoutRelationEqualtoItem:<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;">.button_1</span>attribute:NSLayoutAttributeBottommultiplier:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0</span>constant:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">8.0</span>];NSLayoutConstraint * b1_image_h = [NSLayoutConstraint constraintWithItem:<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;">.button_1</span>attribute:NSLayoutAttributeLeftrelatedBy:NSLayoutRelationEqualtoItem:<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;">.imageview</span>attribute:NSLayoutAttributeLeftmultiplier:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0</span>constant:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.0</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> addConstraints:@[b1_image_h,b1_image_v]];[<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:<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;">.button_2</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;">.button_2</span> setTranslatesAutoresizingMaskIntoConstraints:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">NO</span>];NSLayoutConstraint * b2_image_v = [NSLayoutConstraint constraintWithItem:<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;">.button_2</span>attribute:NSLayoutAttributeToprelatedBy:NSLayoutRelationEqualtoItem:<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;">.imageview</span>attribute: NSLayoutAttributeBottommultiplier:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0</span>constant:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">8.0</span>];NSLayoutConstraint * b2_image_h = [NSLayoutConstraint constraintWithItem:<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;">.button_2</span>attribute:NSLayoutAttributeRightrelatedBy:NSLayoutRelationEqualtoItem:<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;">.imageview</span>attribute:NSLayoutAttributeRightmultiplier:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0</span>constant:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.0</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> addConstraints:@[b2_image_h,b2_image_v]];
</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></ul>

用可视化语言VFL的代码

<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;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.imageview</span> setTranslatesAutoresizingMaskIntoConstraints:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">NO</span>];<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSArray</span> * v = [NSLayoutConstraint constraintsWithVisualFormat:@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"V:[superview]-(<=1)-[imageview]"</span>options:NSLayoutFormatAlignAllCenterXmetrics:<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;">"superview"</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>,@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"imageview"</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;">.imageview</span>}];<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSArray</span> * h = [NSLayoutConstraint constraintsWithVisualFormat:@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"H:[superview]-(<=1)-[imageview]"</span>options:NSLayoutFormatAlignAllCenterYmetrics:<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;">"superview"</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>,@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"imageview"</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;">.imageview</span>}];<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSArray</span> * ew = [NSLayoutConstraint constraintsWithVisualFormat:@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"V:[imageview(==imageviewWidth)]"</span>options:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>metrics:@{@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"imageviewWidth"</span>:@(CGRectGetHeight(<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;">.imageview</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.frame</span>))}views:@{@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"imageview"</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;">.imageview</span>}];<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSArray</span> * eh = [NSLayoutConstraint constraintsWithVisualFormat:@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"H:[imageview(==imageviewHeight)]"</span>options:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>metrics:@{@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"imageviewHeight"</span>:@(CGRectGetWidth(<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;">.imageview</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.frame</span>))}views:@{@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"imageview"</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;">.imageview</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> addConstraints:v];[<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> addConstraints:h];[<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> addConstraints:ew];[<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> addConstraints:eh];[<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:<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;">.button_1</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;">.button_1</span> setTranslatesAutoresizingMaskIntoConstraints:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">NO</span>];<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSArray</span> * b1_image = [NSLayoutConstraint constraintsWithVisualFormat:@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"V:[button1]-[imageview]"</span>options:NSLayoutFormatAlignAllLeftmetrics:<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;">"button1"</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;">.button_1</span>,@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"imageview"</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;">.imageview</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> addConstraints:b1_image];[<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:<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;">.button_2</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;">.button_2</span> setTranslatesAutoresizingMaskIntoConstraints:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">NO</span>];<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSArray</span> * b2_image = [NSLayoutConstraint constraintsWithVisualFormat:@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"V:[button2]-[imageview]"</span>options:NSLayoutFormatAlignAllRightmetrics:<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;">"button2"</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;">.button_2</span>,@<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"imageview"</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;">.imageview</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> addConstraints:b2_image];
</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></ul>

最后，附上Demo的下载链接 
CSDN下载 
前两两篇关于如何在Storyboard上创建AutoLayout的详解 
http://blog.csdn.net/hello_hwc/article/details/43982003 
http://blog.csdn.net/hello_hwc/article/details/43967561