iOS 常用布局方式之Constraint

级别： ★★☆☆☆
标签：「iOS AutoLayout」「iOS 自动布局」「NSLayoutConstraint」
作者： Xs·H
审校： QiShare团队

在沐灵洛线下分享iOS UIButton根据内容自动布局时，有和前端同学讨论到iOS的常用布局方式。讨论过程十分热闹，不容易记录，但作者认为讨论结果有必要记录一下，希望能帮助到一些同学。作者将iOS常用布局方式归纳为Frame、Autoresizing、Constraint、StackView和Masonry五种，并将逐一介绍。本篇文章介绍Constraint。

Constraint相较于Autoresizing要更加灵活和强大，可以说是一种替代方案。Constraint的全称是NSLayoutConstraint，也常被称作AutoLayout，配合着Storyboard可以非常方便地构建页面。比如作者在上篇文章中没有实现的同级视图之间约束问题，使用NSLayoutConstraint将迎刃而解，并且不需要编写代码。在Storyboard中构建的约束关系如下。

当然，开发者也可以使用代码的形式利用NSLayoutConstraint布局视图。比如，作者在4等分视图的基础上，在浅灰色contentView上添加一个藏青色（cyanColor）的subView5，使其始终以固定的宽高居中显示，也就是实现下图中的效果。

实现上述效果的代码如下。

- (void)viewDidLoad {
    
    [super viewDidLoad];
    
    UIView *subView5 = [[UIView alloc] initWithFrame:CGRectZero];
    subView5.backgroundColor = [[UIColor cyanColor] colorWithAlphaComponent:.6];
    subView5.translatesAutoresizingMaskIntoConstraints = NO;
    [_contentView addSubview:subView5];
    
    NSLayoutConstraint *widthConstraint = [NSLayoutConstraint constraintWithItem:subView5 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:100.0];
    NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:subView5 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:200.0];
    NSLayoutConstraint *centerXConstraint = [NSLayoutConstraint constraintWithItem:subView5 attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:_contentView attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:.0];
    NSLayoutConstraint *centerYConstraint = [NSLayoutConstraint constraintWithItem:subView5 attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:_contentView attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:.0];
    
    [_contentView addConstraints:@[widthConstraint, heightConstraint, centerXConstraint, centerYConstraint]];
}

通过上述代码，看一下NSLayoutConstraint的用法。首先，在使用代码利用NSLayoutConstraint布局视图时，要先指明该视图不被Autoresizing所控制（代码如下）。否则，会出现约束冲突的情况。

subView5.translatesAutoresizingMaskIntoConstraints = NO;

然后，约束视图是通过“设定约束”和“添加约束”两个步骤来完成的。

设定约束

NSLayoutConstraint有标准的API来设定约束，如下。

/* Create constraints explicitly.  Constraints are of the form "view1.attr1 = view2.attr2 * multiplier + constant" 
 If your equation does not have a second view and attribute, use nil and NSLayoutAttributeNotAnAttribute.
 */
+ (instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(nullable id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;

通俗地解释一下上面的API：对view1的attr1属性和view2的attr2属性以relation这种关系和multiplier这种倍数进行c数值的约束。 比如，约束view1和view2等宽可以这样写：

[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:view2 attribute:NSLayoutAttributeWidth multiplier:1.0 constant:.0];

其中，attr1和attr2都是从NSLayoutAttribute枚举中取值。

typedef NS_ENUM(NSInteger, NSLayoutAttribute) {
    NSLayoutAttributeLeft = 1,
    NSLayoutAttributeRight,
    NSLayoutAttributeTop,
    NSLayoutAttributeBottom,
    NSLayoutAttributeLeading,
    NSLayoutAttributeTrailing,
    NSLayoutAttributeWidth,
    NSLayoutAttributeHeight,
    NSLayoutAttributeCenterX,
    NSLayoutAttributeCenterY,
    NSLayoutAttributeLastBaseline,
    NSLayoutAttributeBaseline NS_SWIFT_UNAVAILABLE("Use 'lastBaseline' instead") = NSLayoutAttributeLastBaseline,
    NSLayoutAttributeFirstBaseline NS_ENUM_AVAILABLE_IOS(8_0),
    
    NSLayoutAttributeLeftMargin NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeRightMargin NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeTopMargin NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeBottomMargin NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeLeadingMargin NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeTrailingMargin NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeCenterXWithinMargins NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeCenterYWithinMargins NS_ENUM_AVAILABLE_IOS(8_0),
    
    NSLayoutAttributeNotAnAttribute = 0
};

relation是从NSLayoutRelation枚举中取值。

typedef NS_ENUM(NSInteger, NSLayoutRelation) {
    NSLayoutRelationLessThanOrEqual = -1,
    NSLayoutRelationEqual = 0,
    NSLayoutRelationGreaterThanOrEqual = 1,
};

综上，在理解API各参数含义的基础上将会更容易读懂上述subView5的4个约束。

添加约束

先看一下例子中添加约束的代码，如下。

[_contentView addConstraints:@[widthConstraint, heightConstraint, centerXConstraint, centerYConstraint]];

作者将4个约束都添加到了contentView上面，当然，运行效果证明这样添加没有问题。但有的同学问道：“ 因为subView5的位置被约束到了contentView上，所以centerXConstraint和centerYConstraint被添加到contentView上是容易被理解的，但是widthConstraint和heightConstraint只和subView5有关系，为什么也添加到了contentView上，不是应该添加到subView5上吗？”。是的，按照这种说法，widthConstraint和heightConstraint添加到subView5的确更容易理解，于是作者做了如下修改。

[subView5 addConstraints:@[widthConstraint, heightConstraint]];
[_contentView addConstraints:@[centerXConstraint, centerYConstraint]];

从修改后的运行效果看也是没有问题的。之所以将4个constraint都添加到了contentView上，是因为**不管是对哪个视图的约束，只要添加到该视图或者该视图的父视图以及更高层级的父视图上，都是没有问题的。**所以，在编程中，开发者常常会将多个约束统一添加到某个比较靠近用户的父视图上。

关于本篇文章的具体实现细节可以在QiLayoutDemo中查看。

推荐文章：
iOS UIButton根据内容自动布局
 iOS 指定初始化方法
 UIView中的hitTest方法
 奇舞周刊