iOS 相对布局 NSLayoutConstraint 初次尝试

自从iOS6 出来了NSLayoutConstraint 以后，一直没有没有尝试，其实一直诟病每次布局UI控件都是绝对布局方式，因为很多情况下，比如UILabel多行模式，因为不知道文字多少，不能提前预知多高的UILabel出来，如果下面有其他控件，那么只能通过[text.sizeFontwhith:]方式取得文字大小，在手动调整下面视图frame，每次都很麻烦。今天看了一下相对布局，这样相对布局就发挥优势了，所以自己今天决定尝试一下，果然，效果不错，不多说了，请看案例：

要实现如下效果图：

图片在描述文字的下面，然后name,cell addr，三个label并排显示，地址过长省略。

要实现图片在描述文字下面，用相对布局很容易实现，代码如下：

UILabel *descLabel = [[UILabel alloc] init];    descLabel.translatesAutoresizingMaskIntoConstraints =NO;    descLabel.text =@"创建两个限制条件:一个是将目标视图的 center.x 位置排列在其父视图的 center.x 位置,并且另外一个是为了让我们的应用在不容尺寸的屏幕下都能 “正常”的表示，我们尽量不要把数据写死。大多数可视元素都是一个矩形区域，当然这个矩形区域有坐标的，我们有了这个区域坐标就能确定可视元素的现实位置了。";    descLabel.backgroundColor = [UIColor clearColor];    descLabel.numberOfLines = 0;    descLabel.font = [UIFont systemFontOfSize:14];    [self.view addSubview:descLabel];    <p>    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:descLabel <span style="font-family: Arial, Helvetica, sans-serif;">attribute:NSLayoutAttributeLeft </span><span style="font-family: Arial, Helvetica, sans-serif;">relatedBy:NSLayoutRelationEqual </span><span style="font-family: Arial, Helvetica, sans-serif;">toItem:self.view </span><span style="font-family: Arial, Helvetica, sans-serif;">attribute:NSLayoutAttributeLeft </span><span style="font-family: Arial, Helvetica, sans-serif;">multiplier:1 </span><span style="font-family: Arial, Helvetica, sans-serif;">constant:10]];</span></p>

            [self.view addConstraint:[NSLayoutConstraint constraintWithItem:descLabel <span style="font-family: Arial, Helvetica, sans-serif;">attribute:NSLayoutAttributeTop  </span><span style="font-family: Arial, Helvetica, sans-serif;">relatedBy:NSLayoutRelationEqual  </span><span style="font-family: Arial, Helvetica, sans-serif;">toItem:self.view  </span><span style="font-family: Arial, Helvetica, sans-serif;">attribute:NSLayoutAttributeTop  </span><span style="font-family: Arial, Helvetica, sans-serif;">multiplier:1  </span><span style="font-family: Arial, Helvetica, sans-serif;">constant:30]];</span>

        [self.view addConstraint:[NSLayoutConstraint constraintWithItem:descLabel  <span style="font-family: Arial, Helvetica, sans-serif;">attribute:NSLayoutAttributeWidth  </span><span style="font-family: Arial, Helvetica, sans-serif;">relatedBy:NSLayoutRelationEqual  </span><span style="font-family: Arial, Helvetica, sans-serif;">toItem:self.view </span><span style="font-family: Arial, Helvetica, sans-serif;">attribute:NSLayoutAttributeWidth  </span><span style="font-family: Arial, Helvetica, sans-serif;">multiplier:(appWidth-20)/appWidth  </span><span style="font-family: Arial, Helvetica, sans-serif;">constant:0]];</span>

        UIImageView *myimageview = [[UIImageView alloc] init];    myimageview.backgroundColor = [UIColor clearColor];    myimageview.image = [UIImage imageNamed:@"许开伟名片"];    [self.view addSubview:myimageview];    myimageview.translatesAutoresizingMaskIntoConstraints = NO;        [self.view addConstraint:[NSLayoutConstraint constraintWithItem:myimageview  <span style="font-family: Arial, Helvetica, sans-serif;">attribute:NSLayoutAttributeLeft  </span><span style="font-family: Arial, Helvetica, sans-serif;">relatedBy:NSLayoutRelationEqual  </span><span style="font-family: Arial, Helvetica, sans-serif;">toItem:descLabel  </span><span style="font-family: Arial, Helvetica, sans-serif;">attribute:NSLayoutAttributeLeft </span><span style="font-family: Arial, Helvetica, sans-serif;">multiplier:1 </span><span style="font-family: Arial, Helvetica, sans-serif;">constant:0]];</span>

            [self.view addConstraint:[NSLayoutConstraint constraintWithItem:</span><span style="color:#3366ff;">myimageview</span><span style="color: rgb(52, 149, 175);"> </span>

<span style="color:#ff9966;"><span style="white-space:pre"></span>attribute:NSLayoutAttributeTop</span><span style="color:#3495af;"> </span>

<span style="color:#3495af;"><span style="white-space:pre"></span>relatedBy:NSLayoutRelationEqual </span>

<span style="color:#3495af;"><span style="white-space:pre"></span>toItem:</span><span style="color:#3366ff;">descLabel</span><span style="color:#3495af;"> </span>

<span style="color:#ff9966;"><span style="white-space:pre"></span>attribute:NSLayoutAttributeBottom</span><span style="color:#3495af;"> </span>

<span style="color:#3495af;"><span style="white-space:pre"></span>multiplier:1 </span>

<span style="color:#ff9966;"><span style="white-space:pre"></span>constant:10</span><span style="color:#3495af;">]];        [self.view addConstraint:[NSLayoutConstraint constraintWithItem:myimageview </span>

<span style="color:#3495af;"><span style="white-space:pre"></span>attribute:NSLayoutAttributeWidth </span>

<span style="color:#3495af;"><span style="white-space:pre"></span>relatedBy:NSLayoutRelationEqual </span>

<span style="color:#3495af;"><span style="white-space:pre"></span>toItem:self.view </span>

<span style="color:#3495af;"><span style="white-space:pre"></span>attribute:NSLayoutAttributeWidth </span>

<span style="color:#3495af;"><span style="white-space:pre"></span>multiplier:(appWidth-20)/appWidth </span>

<span style="color:#3495af;"><span style="white-space:pre"></span>constant:0]];        [self.view addConstraint:[NSLayoutConstraint constraintWithItem:myimageview </span>

<span style="color:#3495af;"><span style="white-space:pre"></span>attribute:NSLayoutAttributeHeight </span>

<span style="color:#3495af;"><span style="white-space:pre"></span>relatedBy:NSLayoutRelationEqual </span>

<span style="color:#3495af;"><span style="white-space:pre"></span>toItem:nil attribute:NSLayoutAttributeHeight </span>

<span style="color:#3495af;"><span style="white-space:pre"></span>multiplier:1 </span>

<span style="color:#3495af;"><span style="white-space:pre"></span>constant:200]];</span>

注意：要手工代码用NSLayoutConstraint布局生效，必须把translatesAutoresizingMaskIntoConstraints = NO，才会生效

实现图片在描述文字下面，关键语句：让myimageview 的myimageview在descLabel myimageview 下面10个pt（代码种颜色标示的那句）

2.让三个并排label显示，并且根据文字自适应宽度。当然我们还是可以按照上述方式限制。但是这样代码会很冗长，iOS为我们提供了一种类似正则表达式的方式去实现效果，代码精简好多：

<span style="color:#3366ff;">NSDictionary *viewsDic = NSDictionaryOfVariableBindings(nameLabel,cellLabel,addrLabel,myimageview);    NSArray *constraints = nil;    constraints = [NSLayoutConstraint constraintsWithVisualFormat:                   @</span><span style="color:#ff9966;">"H:|-10-[nameLabel(100@700)]-(>=10)-[cellLabel(100@400)]-[addrLabel(100@500)]-10-|"</span><span style="color:#3366ff;">//水平 可视化格式语言                                                          options:NSLayoutFormatAlignAllTop //对齐功能                                                          metrics:nil//指标参数                                                            views:viewsDic];//参与约束的对象字典    [self.view addConstraints:constraints];        constraints = [NSLayoutConstraint constraintsWithVisualFormat:                   @</span><span style="color:#ff9966;">"V:[myimageview]-20-[nameLabel]"</span><span style="color:#3366ff;"> //垂直 可视化格式语言                                                          options:0 //无条件                                                            metrics:nil//不带指标参数                                                              views:viewsDic];//参与约束的对象字典          [self.view addConstraints:constraints];</span>

上面这种方式叫可视化限制布局语言，有点类似正则表达式。

上面颜色标注的第一句翻译：左右边距都为10，中间有三个Label，相隔不少于10宽度，每个控件宽度为100，约束优先级分别为700，400，500。优先级越高，表示优先生效。第二句翻译：垂直方向上，nameLabel 在myimageview的下面20像素。这样8行代码即可实现我们的效果，比上面约束代码精简好多。