Autolayout、VFL、Masonry的简单使用

Autolayout、VFL、Masonry的简单使用

本文将通过多种方式实现同一个例子（设置TableVellCell中的TextField加左右边距各25，高度30，垂直居中），最终显示效果如图。

最终效果图

公用代码

self.tagTitle = [[UITextField alloc]init];
[self.tagTitle setEnabled:NO];
[self.tagTitle setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.contentView addSubview:self.tagTitle];

Autolayout

Interface Builder实现

pic1.gif

代码实现

[self.contentView addConstraints:
@[
//设置左边距25
[NSLayoutConstraint constraintWithItem:self.tagTitle
                             attribute:NSLayoutAttributeLeading
                             relatedBy:NSLayoutRelationEqual
                                toItem:self.contentView
                             attribute:NSLayoutAttributeLeading
                            multiplier:1.0 constant:25],
//设置右边距25
[NSLayoutConstraint constraintWithItem:self.tagTitle
                             attribute:NSLayoutAttributeTrailing
                             relatedBy:NSLayoutRelationEqual
                                toItem:self.contentView
                             attribute:NSLayoutAttributeTrailing
                            multiplier:1.0 constant:-25],
//设置高度30
[NSLayoutConstraint constraintWithItem:self.tagTitle
                             attribute:NSLayoutAttributeHeight
                             relatedBy:NSLayoutRelationEqual
                                toItem:nil
                             attribute:NSLayoutAttributeNotAnAttribute
                            multiplier:0.0 constant:30],
//设置垂直居中
[NSLayoutConstraint constraintWithItem:self.tagTitle
                             attribute:NSLayoutAttributeCenterY
                             relatedBy:NSLayoutRelationEqual
                                toItem:self.contentView
                             attribute:NSLayoutAttributeCenterY
                            multiplier:1 constant:0]
]];

VFL

NSDictionary *dic = NSDictionaryOfVariableBindings(_tagTitle);
NSString *vflh= @"H:|-25-[_tagTitle]-25-|";
NSString *vflv= @"V:[_tagTitle(30)]";

//设置左右边距25
[self.contentView addConstraints:
 [NSLayoutConstraint constraintsWithVisualFormat:vflh options:0 metrics:nil views:dic]
  ];
//设置高度30
 [self.contentView addConstraints:
 [NSLayoutConstraint constraintsWithVisualFormat:vflv options:0 metrics:nil views:dic]
 ];
//设置垂直居中
[self.contentView addConstraint:
 [NSLayoutConstraint constraintWithItem:self.tagTitle
                              attribute:NSLayoutAttributeCenterY
                              relatedBy:NSLayoutRelationEqual
                                 toItem:self.contentView
                              attribute:NSLayoutAttributeCenterY
                             multiplier:1 constant:0]];

Masonry

[self.tagTitle makeConstraints:^(MASConstraintMaker *make) {
    make.leading.equalTo(@25);
    make.trailing.equalTo(@(-25));
    make.height.equalTo(@30);
    make.centerY.equalTo(self.contentView.centerY);
}];

总结

从方便的角度来说，果然还是Interface Builder最为简便，但是它又是出了名的难以协同操作，所以使用的时候需要谨慎。

Autolayout自带添加约束的方法，功能强大而又啰嗦。VFL简洁却功能缺失（多次尝试，无法实现垂直居中的功能）。在使用过程中都没有一个良好的体验。

最后引入的Masonry第三方库，在使用中极大的减少了代码添加约束的篇幅，同时代码易于阅读，名副其实的好用。

00000005