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

最新推荐文章于 2018-05-24 16:55:11 发布
最新推荐文章于 2018-05-24 16:55:11 发布
阅读量499 收藏
点赞数
分类专栏： IOS开发笔记整理 文章标签： AutoLayout 布局

原创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>

参数的意义：

参数 意义
view1 左手边的受约束视图
attr1 左手边的受约束视图的参考参数
relation 约束的关系
view2 右手边的受约束视图
multiplier The constant multiplied with the attribute on the right-hand side of the constraint as part of getting the modified attribute.
attr2 The constant added to the multiplied attribute value on the right-hand side of the constraint to yield the final modified attribute.

通常，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;">[NSLayoutConstraint
      constraintWithItem:self.view1
               <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">attribute</span>:NSLayoutAttributeWidth
               relatedBy:NSLayoutRelationEqual
                  toItem:self.view2
               <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">attribute</span>:NSLayoutAttributeWidth
              multiplier:<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>:NSLayoutAttributeRight
                                                            relatedBy:NSLayoutRelationEqual
                                                               toItem:self.testview
                                                            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">attribute</span>:NSLayoutAttributeRight
                                                           multiplier:<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>:NSLayoutAttributeTop
                                                            relatedBy:NSLayoutRelationEqual
                                                               toItem:self.view
                                                            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">attribute</span>:NSLayoutAttributeTop
                                                           multiplier:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0</span>
                                                             <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>:NSLayoutAttributeWidth
                                                            relatedBy:NSLayoutRelationEqual
                                                               toItem:nil
                                                            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">attribute</span>:NSLayoutAttributeWidth
                                                           multiplier:<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>:NSLayoutAttributeHeight
                                                            relatedBy:NSLayoutRelationEqual
                                                               toItem:nil
                                                            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">attribute</span>:NSLayoutAttributeHeight
                                                           multiplier:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">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>

参数的的意义

参数 意义
format NSString类型的可视语言描述
opts 描述可视化语言中对象的layout方向
metrics 描述可视化语言中String代表的常量值，字典类型，key为String，value为NSNumber类型
views 描述可视化语言中String代表的对象，字典类型，key为String，value为layout约束的对象

举个例子就懂了，例如，惰性初始化下面一个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 = [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:NSLayoutAttributeCenterX
                               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;">.imageview</span>
                               attribute:NSLayoutAttributeCenterX
                               multiplier:<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:NSLayoutAttributeCenterY
                                                           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;">.imageview</span>
                                                           attribute:NSLayoutAttributeCenterY
                                                          multiplier:<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:NSLayoutAttributeWidth
                                                               relatedBy:NSLayoutRelationEqual
                                                                  toItem:<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:NSLayoutAttributeHeight
                                                               relatedBy:NSLayoutRelationEqual
                                                                  toItem:<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:NSLayoutAttributeTop
                                                                   relatedBy:NSLayoutRelationEqual
                                                                      toItem:<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.button_1</span>
                                                                   attribute:NSLayoutAttributeBottom
                                                                  multiplier:<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:NSLayoutAttributeLeft
                                                                   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;">.imageview</span>
                                                                   attribute:NSLayoutAttributeLeft
                                                                  multiplier:<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:NSLayoutAttributeTop
                                                                   relatedBy:NSLayoutRelationEqual
                                                                      toItem:<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.imageview</span>
                                                                   attribute: NSLayoutAttributeBottom
                                                                  multiplier:<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:NSLayoutAttributeRight
                                                                   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;">.imageview</span>
                                                                   attribute:NSLayoutAttributeRight
                                                                  multiplier:<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:NSLayoutFormatAlignAllCenterX
                                                          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;">"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:NSLayoutFormatAlignAllCenterY
                                                          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;">"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:NSLayoutFormatAlignAllLeft
                                                                   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;">"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:NSLayoutFormatAlignAllRight
                                                                   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;">"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

卑微的戏子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iOS AutoLayout的代码实现
03-02
在本教程中，我们将专注于使用Visual Format Language (VFL)进行AutoLayout的代码实现。 Visual Format Language是一种用字符串来描述界面布局约束的方法，它可以简洁地表达视图之间的对齐方式、大小和间距。VFL...
关于ios的autoLayout的一些简单介绍以及使用方法
weixin_33690367的博客
04-07 116
2019独角兽企业重金招聘Python工程师标准>>> ...
【转】IOS AutoLayout详解（三）用代码实现(附Demo下载)
weixin_30376509的博客
07-22 52
转载自：blog.csdn.net/hello_hwc IOS SDK详解 前言： 在开发的过程中，有时候创建View没办法通过Storyboard来进行，又需要AutoLayout，这时候用代码创建就派上用场了，这篇文章我会详解用代码实现的两个主要函数，然后讲解一个Demo，最后Demo我会附上下载链接。 用代码实现的函数一 第一个函...
iOS开发之 Autolayout 详解
极客学伟的技术分享社区
05-24 3909
iOS开发之 Autolayout 详解 1. 概述 Autolayout 是 Apple 自 iOS6 开始引入的旨在解决不同屏幕之间布局适配的技术 苹果官方推荐开发者使用 Autolayout 进行UI界面的布局 Autolayout 有两个核心概念：1. 参照。 2. 约束 使用Autolayout的注意点： 添加约束之前需要保证控件已被添加到父控件中 不需要再给View设置...
iOS用AutoLayout实现分页滚动功能
08-25
总之，利用AutoLayout实现iOS应用中的分页滚动功能，需要理解ScrollView的pagingEnabled属性，掌握容器视图与页视图的布局策略，以及如何通过AutoLayout的约束设置来实现分页效果。这个过程既涉及到布局设计，也涉及...
ios_autolayout_demo:iOS 自动布局
06-28
本项目“ios_autolayout_demo”旨在通过编程方式演示如何使用NSLayoutConstraint来实现AutoLayout。下面将详细阐述AutoLayout的核心概念以及如何使用NSLayoutConstraint。 1. AutoLayout简介： AutoLayout是Apple...
ios demo,Masonry的使用，一个在ios中可以替代autoLayout的布局，代码控制，弹性高
03-31
然而，AutoLayout的代码实现相对复杂，对新手来说可能不太友好。这就是Masonry的用武之地。Masonry是一个流行的第三方库，它为iOS开发者提供了更简洁、灵活的方式来实现自动布局，尤其适合代码控件的开发者。 ...
用代码AutoLayout的Demo
03-02
这个"用代码AutoLayout的Demo"提供了通过编程方式使用AutoLayout的实例，帮助开发者更好地理解和掌握这一技术。 在iOS应用开发中，AutoLayout主要通过NSLayoutConstraint对象来定义视图（UIView）之间的关系，这些...
计算机系统结构(02325)自考真题(201704)
07-28
计算机系统结构(02325)自考真题(201704) 计算机系统结构（Computer Architecture）也称为计算机体系结构，它是由计算机结构外特性，内特性，微外特性组成的。经典的计算机系统结构的定义是指计算机系统多级层次结构中机器语言机器级的结构，它是软件和硬件/固件的主要交界面，是由机器语言程序、汇编语言源程序和高级语言源程序翻译生成的机器语言目标程序能在机器上正确运行所应具有的界面结构和功能。 计算机系统结构指的是什么? 是一台计算机的外表? 还是是指一台计算机内部的一块块板卡安放结构? 都不是，那么它是什么? 计算机系统结构就是计算机的机器语言程序员或编译程序编写者所看到的外特性。所谓外特性，就是计算机的概念性结构和功能特性。用一个不恰当的比喻一，比如动物吧，它的"系统结构"是指什么呢? 它的概念性结构和功能特性，就相当于动物的器官组成及其功能特性，如鸡有胃，胃可以消化食物。至于鸡的胃是什么形状的、鸡的胃部由什么组成就不是"系统结构"研究的问题了。
国家电零售业中上市公司融资问题研究—以国美电器为例.docx
07-28
国家电零售业中上市公司融资问题研究—以国美电器为例.docx
python + opencv 加载 onnx 人脸检测模型识别人脸测试使用的 人脸照片
07-28
python + opencv 加载 onnx 人脸检测模型识别人脸测试使用的 人脸照片
亲测运营版PHP汽车二手车拍卖网站源码事故车竞拍拍卖系统
07-28
PHP汽车二手车拍卖网站源码 事故车竞拍拍卖系统/内附安装教程 安装说明： 1、导入文件到数据库 2、配置数据库连接地址\include\conn.inc.php 3、后台地址 : 域名/manage
基于SpringCloud微服务架构的B2C电子商务系统-可执行内含文档代码-可执行内含文档代码.zip
07-28
基于SpringCloud微服务架构的B2C电子商务系统-可执行内含文档代码-可执行内含文档代码.zip
【2022】2022巨量引擎汽车后市场行业洞察报告-巨量算数&途虎养车_70页.pdf
07-28
【2022】2022巨量引擎汽车后市场行业洞察报告-巨量算数&途虎养车_70页.pdf
chromedriver-mac-arm64_126.0.6423.2.zip
07-28
chromedriver-mac-arm64_126.0.6423.2.zip
考勤表模板-自动统计.xlsx
07-28
考勤表，Excel模版
提取文件名称.bat
07-28
提取文件名称
对Unet网络进行改进，python
最新发布
07-29
语言：python 任务：深度学习图像分割 网络：Unet网络进行改进 可实现自己的图像和标签进行训练和预测。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值