自动布局方法1
/**
创建约束
@param view1 被约束视图view1
@param attr1 被约束视图的布局属性
@param relation 关系属性
@param view2 参照视图view2
@param attr2 参照视图view2的布局属性
@param multiplier 倍数
@param c 常数
@return 约束
*/
+(instancetype)constraintWithItem:(id)view1
attribute:(NSLayoutAttribute)attr1
relatedBy:(NSLayoutRelation)relation
toItem:(nullable id)view2
attribute:(NSLayoutAttribute)attr2
multiplier:(CGFloat)multiplier
constant:(CGFloat)c;
依据的公式是:view1.attr1 = view2.attr2 * multiplier + constant
NSLayoutAttribute(布局属性)
| NSLayoutAttribute的类型 | 含义 |
|---|---|
| NSLayoutAttributeLeft | 视图的左边 |
| NSLayoutAttributeRight | 视图的右边 |
| NSLayoutAttributeTop | 视图的上边 |
| NSLayoutAttributeBottom | 视图的下边 |
| NSLayoutAttributeLeading | 视图的前边 |
| NSLayoutAttributeTrailing | 视图的后边 |
| NSLayoutAttributeWidth | 视图的宽度 |
| NSLayoutAttributeHeight | 视图的高度 |
| NSLayoutAttributeCenterX | 视图的中点的X值 |
| NSLayoutAttributeCenterY | 视图中点的Y值 |
| NSLayoutAttributeBaseline | 视图的基准线 |
| NSLayoutAttributeNotAnAttribute | 无属性 |
NSLayoutRelation(关系属性)
| NSLayoutRelation的类型 | 含义 |
|---|---|
| NSLayoutRelationLessThanOrEqual | 视图关系小于或等于 |
| NSLayoutRelationEqual | 视图关系等于 |
| NSLayoutRelationGreaterThanOrEqual | 视图关系大于或等于 |
代码提示
<#被约束视图#>.translatesAutoresizingMaskIntoConstraints = NO;
[<#view的父视图#> addConstraint:[NSLayoutConstraint constraintWithItem:<#被约束视图#> attribute:(NSLayoutAttribute<#被约束视图的布局属性#>) relatedBy:(NSLayoutRelation<#布局属性的布局关系#>) toItem:<#参照视图#> attribute:NSLayoutAttribute<#参照视图的布局属性#> multiplier:<#倍数#> constant:<#常数#>]];
代码示例
- (void)codeLayoutConstraint {
//创建背景图
UIView *backgroundView = [[UIView alloc] init];
backgroundView.backgroundColor = [UIColor yellowColor];
[self.view addSubview:backgroundView];
backgroundView.translatesAutoresizingMaskIntoConstraints = NO;
//和父视图等宽
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:backgroundView attribute:(NSLayoutAttributeWidth) relatedBy:(NSLayoutRelationEqual) toItem:self.view attribute:NSLayoutAttributeWidth multiplier:1 constant:0]];
//二分之一高
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:backgroundView attribute:(NSLayoutAttributeHeight) relatedBy:(NSLayoutRelationEqual) toItem:self.view attribute:NSLayoutAttributeHeight multiplier:0.5 constant:0]];
//垂直对齐
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:backgroundView attribute:(NSLayoutAttributeCenterX) relatedBy:(NSLayoutRelationEqual) toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0]];
//水平对齐
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:backgroundView attribute:(NSLayoutAttributeCenterY) relatedBy:(NSLayoutRelationEqual) toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1 constant:0]];
//创建橙色视图
UIView *orangeView = [[UIView alloc] init];
orangeView.backgroundColor = [UIColor orangeColor];
[backgroundView addSubview:orangeView];
orangeView.translatesAutoresizingMaskIntoConstraints = NO;
//上边距离父视图上边20
[backgroundView addConstraint:[NSLayoutConstraint constraintWithItem:orangeView attribute:(NSLayoutAttributeTop) relatedBy:(NSLayoutRelationEqual) toItem:backgroundView attribute:NSLayoutAttributeTop multiplier:1 constant:20]];
//下边距离父视图下边减20
[backgroundView addConstraint:[NSLayoutConstraint constraintWithItem:orangeView attribute:(NSLayoutAttributeBottom) relatedBy:(NSLayoutRelationEqual) toItem:backgroundView attribute:NSLayoutAttributeBottom multiplier:1 constant:-20]];
if (/* DISABLES CODE */ (YES)) {//if和else效果一样
//前边距离父视图前边20
[backgroundView addConstraint:[NSLayoutConstraint constraintWithItem:orangeView attribute:(NSLayoutAttributeLeading) relatedBy:(NSLayoutRelationEqual) toItem:backgroundView attribute:NSLayoutAttributeLeading multiplier:1 constant:20]];
//后边距离父视图后边减100
[backgroundView addConstraint:[NSLayoutConstraint constraintWithItem:orangeView attribute:(NSLayoutAttributeTrailing) relatedBy:(NSLayoutRelationEqual) toItem:backgroundView attribute:NSLayoutAttributeTrailing multiplier:1 constant:-100]];
} else {
//左边距离父视图前边20
[backgroundView addConstraint:[NSLayoutConstraint constraintWithItem:orangeView attribute:(NSLayoutAttributeLeft) relatedBy:(NSLayoutRelationEqual) toItem:backgroundView attribute:NSLayoutAttributeLeft multiplier:1 constant:20]];
//右边距离父视图后边减100
[backgroundView addConstraint:[NSLayoutConstraint constraintWithItem:orangeView attribute:(NSLayoutAttributeRight) relatedBy:(NSLayoutRelationEqual) toItem:backgroundView attribute:NSLayoutAttributeRight multiplier:1 constant:-100]];
}
//创建红色视图
UIView *redView = [[UIView alloc] init];
redView.backgroundColor = [UIColor redColor];
[backgroundView addSubview:redView];
redView.translatesAutoresizingMaskIntoConstraints = NO;
//上边距离父视图上边20
[backgroundView addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:(NSLayoutAttributeTop) relatedBy:(NSLayoutRelationEqual) toItem:backgroundView attribute:NSLayoutAttributeTop multiplier:1 constant:20]];
//高度44
[backgroundView addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:44]];
//自身宽高比1:1
[backgroundView addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:(NSLayoutAttributeHeight) relatedBy:(NSLayoutRelationEqual) toItem:redView attribute:NSLayoutAttributeWidth multiplier:1 constant:0]];
if (/* DISABLES CODE */ (NO)) {//if和else效果一样
//左边距离橙色视图右边20
[backgroundView addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:(NSLayoutAttributeLeft) relatedBy:(NSLayoutRelationEqual) toItem:orangeView attribute:NSLayoutAttributeRight multiplier:1 constant:20]];
} else {
//前边距离橙色视图后边20
[backgroundView addConstraint:[NSLayoutConstraint constraintWithItem:redView attribute:(NSLayoutAttributeLeading) relatedBy:(NSLayoutRelationEqual) toItem:orangeView attribute:NSLayoutAttributeTrailing multiplier:1 constant:20]];
}
}
自动布局方法2(了解即可)
@param format 使用VFL格式化的字符串,可以参见官方的帮助文档;
@param opts 指定VFL中所有对象的布局属性和方向。举例:有2个视图使用VFL进行布局,可以使用NSLayoutFormatAlignAllLeft,就让两个视图左对齐;
@param metrics 度量或者指标的字典,字典里面有相关的键值对来控制相关的度量指标,通过key获取;
@param views 指定约束的视图:一个或多个。
+ (NSArray<__kindof NSLayoutConstraint *> *)constraintsWithVisualFormat:(NSString *)format
options:(NSLayoutFormatOptions)opts
metrics:(nullable NSDictionary<NSString *,id> *)metrics
views:(NSDictionary<NSString *, id> *)views;
VFL字符串说明:

VFL字符串说明.png
代码示例
- (void)codeLayoutConstraint2 {
UIView *yellowView = [[UIView alloc] init];
yellowView.backgroundColor = [UIColor yellowColor];
[self.view addSubview:yellowView];
yellowView.translatesAutoresizingMaskIntoConstraints = NO;
UIView *orangeView = [[UIView alloc] init];
orangeView.backgroundColor = [UIColor orangeColor];
[self.view addSubview:orangeView];
orangeView.translatesAutoresizingMaskIntoConstraints = NO;
UIView *redView = [[UIView alloc] init];
redView.backgroundColor = [UIColor redColor];
[self.view addSubview:redView];
redView.translatesAutoresizingMaskIntoConstraints = NO;
//创建VFL约束字符串
//水平顺序:父视图,space个距离,黄色宽100,5个距离,橙色视图,space1个距离,父视图
NSString *hVFL = @"H:|-space-[yellowView(100)]-5-[orangeView]-space1-|";
//水平顺序:父视图,space个距离,红色视图宽和橙色视图相等
NSString *hVFL1 = @"H:|-space-[redView(==orangeView)]";
//垂直顺序:父视图,100个距离,橙色视图高100
NSString *vVFL = @"V:|-100-[orangeView(==100)]";
//垂直顺序:父视图,100个距离,黄色视图高100,5个距离,红色视图和橙色视图高相等
NSString *vVFL1 = @"V:|-100-[yellowView(==100)]-5-[redView(==orangeView)]";
//度量值
NSDictionary *metircs = @{@"space":@15,@"space1":@30};
//views
NSDictionary *views = NSDictionaryOfVariableBindings(yellowView,orangeView,redView);
//创建约束
NSArray *hconstraint = [NSLayoutConstraint constraintsWithVisualFormat:hVFL options:NSLayoutFormatDirectionLeadingToTrailing metrics:metircs views:views];
NSArray *hconstraint1 = [NSLayoutConstraint constraintsWithVisualFormat:hVFL1 options:NSLayoutFormatAlignAllLeft | NSLayoutFormatAlignAllTop metrics:metircs views:views];
NSArray *vconstraint = [NSLayoutConstraint constraintsWithVisualFormat:vVFL options:NSLayoutFormatDirectionLeadingToTrailing metrics:metircs views:views];
NSArray *vconstraint1 = [NSLayoutConstraint constraintsWithVisualFormat:vVFL1 options:NSLayoutFormatDirectionLeadingToTrailing metrics:metircs views:views];
//添加约束
[self.view addConstraints:hconstraint];
[self.view addConstraints:hconstraint1];
[self.view addConstraints:vconstraint];
[self.view addConstraints:vconstraint1];
}