用代码实现的函数一
第一个函数通过描述两个view的参考线之间的约束来创建约束，例如有一个label和一个textfield。约束这样描述
label的右边参考线和textfield的右边参考线距离恒定为10
函数
+(instancetype)constraintWithItem:(id)view1
attribute:(NSLayoutAttribute)attr1
relatedBy:(NSLayoutRelation)relation
toItem:(id)view2
attribute:(NSLayoutAttribute)attr2
multiplier:(CGFloat)multiplier
constant:(CGFloat)c
参数的意义：
参数 意义
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的一半，则
[NSLayoutConstraint
constraintWithItem:self.view1 attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:self.view2 attribute:NSLayoutAttributeWidth
multiplier:0.5
constant:0.0]];
这里有个计算公式
attribute1 == multiplier × attribute2 + constant
也就是说，在这里
view1.width = view2.width * 0.5 + 0.0
这样，更能够理解上述函数中两个参数的含义了吧。
再举个例子：
我想让一个View距离右上角（30，30）并且保持自己的长宽不变。实现代码
NSLayoutConstraint*h_c =[NSLayoutConstraintconstraintWithItem:self.view attribute:NSLayoutAttributeRight
relatedBy:NSLayoutRelationEqual
toItem:self.testview attribute:NSLayoutAttributeRight
multiplier:1.0
constant:30];
NSLayoutConstraint*v_c =[NSLayoutConstraintconstraintWithItem:self.testview attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:self.view attribute:NSLayoutAttributeTop
multiplier:1.0
constant:30];
NSLayoutConstraint*e_w =[NSLayoutConstraintconstraintWithItem:self.testview attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeWidth
multiplier:1.0constant:CGRectGetWidth(self.testview.frame)];
NSLayoutConstraint*e_h =[NSLayoutConstraintconstraintWithItem:self.testview attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeHeight
multiplier:1.0constant:CGRectGetHeight(self.testview.frame)];
[self.view addConstraints:@[h_c,v_c,e_h,e_w]];
效果如图
技术分享
技术分享查看大图
用代码实现的方法二
方法二使用可视化语言VFL
可视化语言的Apple文档链接如下
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/VisualFormatLanguage/VisualFormatLanguage.html
利用到的函数为
+(NSArray*)constraintsWithVisualFormat:(NSString*)format
options:(NSLayoutFormatOptions)opts
metrics:(NSDictionary*)metrics
views:(NSDictionary*)views
参数的的意义
参数 意义
format NSString类型的可视语言描述
opts 描述可视化语言中对象的layout方向
metrics 描述可视化语言中String代表的常量值，字典类型，key为String，value为NSNumber类型
views 描述可视化语言中String代表的对象，字典类型，key为String，value为layout约束的对象
点击放大查看
举个例子就懂了，例如，惰性初始化下面一个View，不难看出，这个View我没有指定大小，大小我要用约束来创建
-(UIView*)testview{
if(!_testview){
_testview =[[UIViewalloc]init];
_testview.backgroundColor=[UIColorblueColor];
}
return_testview;
}
-(void)viewDidLoad {
[superviewDidLoad];
[self.viewaddSubview:self.testview];
}
然后，我用约束的方式，让View的大小恒定为100＊100
NSArray*c_v =[NSLayoutConstraintconstraintsWithVisualFormat:@"V:[testview(==100)]"
options:0
metrics:nil
views:@{@"testview":self.testview}];
NSArray*c_h =[NSLayoutConstraintconstraintsWithVisualFormat:@"H:[testview(==100)]"
options:0
metrics:nil
views:@{@"testview":self.testview}];
[self.viewaddConstraints:c_h];
[self.viewaddConstraints:c_v];
然后，我再把View约束到距离右上角（30＊30）的位置
NSArray*l_v =[NSLayoutConstraintconstraintsWithVisualFormat:@"V:|-hdistance-[testview]"
options:0
metrics:@{@"hdistance":@(30)}
views:@{@"testview":self.testview}];
NSArray*l_h =[NSLayoutConstraintconstraintsWithVisualFormat:@"H:[testview]-vdistance-|"
options:0
metrics:@{@"vdistance":@(30)}
views:@{@"testview":self.testview}];
这样，约束后的效果如图
技术分享查看大图
技术分享
关于可视化语言的建议
个人而言，比较喜欢用可视化语言的方式来出创建约束。而且也不用刻意去学，一开始使用的时候打开一个链接放在旁边，不会的时候参考下。多用几次，自然就会了。
三 一个Demo
我用上述两种方式实现类似的同一组约束，效果如下
技术分享查看大图
技术分享
这里，ImageView的中心始终在view的中心，两个button分别距离ImageView距离为标准距离8，并且分别左右对齐。
用方式一实现的代码
[self.viewaddSubview:self.imageview];
[self.imageviewsetTranslatesAutoresizingMaskIntoConstraints:NO];
NSLayoutConstraint*hc =[NSLayoutConstraint
constraintWithItem:self.view
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:self.imageview
attribute:NSLayoutAttributeCenterX
multiplier:1.0
constant:0.0];
NSLayoutConstraint*vc =[NSLayoutConstraintconstraintWithItem:self.view
attribute:NSLayoutAttributeCenterY
relatedBy:NSLayoutRelationEqual
toItem:self.imageview
attribute:NSLayoutAttributeCenterY
multiplier:1.0
constant:0.0];
NSLayoutConstraint*equalW =[NSLayoutConstraintconstraintWithItem:self.imageview
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:0
multiplier:1.0
constant:CGRectGetWidth(self.imageview.frame)];
NSLayoutConstraint*equalH =[NSLayoutConstraintconstraintWithItem:self.imageview
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:0
multiplier:1.0
constant:CGRectGetHeight(self.imageview.frame)];
[self.viewaddConstraints:@[hc,vc,equalH,equalW]];
[self.viewaddSubview:self.button_1];
[self.button_1setTranslatesAutoresizingMaskIntoConstraints:NO];
NSLayoutConstraint*b1_image_v =[NSLayoutConstraintconstraintWithItem:self.imageview
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:self.button_1
attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:8.0];
NSLayoutConstraint*b1_image_h =[NSLayoutConstraintconstraintWithItem:self.button_1
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:self.imageview
attribute:NSLayoutAttributeLeft
multiplier:1.0
constant:0.0];
[self.viewaddConstraints:@[b1_image_h,b1_image_v]];
[self.viewaddSubview:self.button_2];
[self.button_2setTranslatesAutoresizingMaskIntoConstraints:NO];
NSLayoutConstraint*b2_image_v =[NSLayoutConstraintconstraintWithItem:self.button_2
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:self.imageview
attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:8.0];
NSLayoutConstraint*b2_image_h =[NSLayoutConstraintconstraintWithItem:self.button_2
attribute:NSLayoutAttributeRight
relatedBy:NSLayoutRelationEqual
toItem:self.imageview
attribute:NSLayoutAttributeRight
multiplier:1.0
constant:0.0];
[self.viewaddConstraints:@[b2_image_h,b2_image_v]];
用可视化语言VFL的代码
[self.imageviewsetTranslatesAutoresizingMaskIntoConstraints:NO];
NSArray*v =[NSLayoutConstraintconstraintsWithVisualFormat:@"V:[superview]-(<=1)-[imageview]"
options:NSLayoutFormatAlignAllCenterX
metrics:nil
views:@{@"superview":self.view,@"imageview":self.imageview}];
NSArray*h =[NSLayoutConstraintconstraintsWithVisualFormat:@"H:[superview]-(<=1)-[imageview]"
options:NSLayoutFormatAlignAllCenterY
metrics:nil
views:@{@"superview":self.view,@"imageview":self.imageview}];
NSArray*ew =[NSLayoutConstraintconstraintsWithVisualFormat:@"V:[imageview(==imageviewWidth)]"
options:0
metrics:@{@"imageviewWidth":@(CGRectGetHeight(self.imageview.frame))}
views:@{@"imageview":self.imageview}];
NSArray*eh =[NSLayoutConstraintconstraintsWithVisualFormat:@"H:[imageview(==imageviewHeight)]"
options:0
metrics:@{@"imageviewHeight":@(CGRectGetWidth(self.imageview.frame))}
views:@{@"imageview":self.imageview}];
[self.viewaddConstraints:v];
[self.viewaddConstraints:h];
[self.viewaddConstraints:ew];
[self.viewaddConstraints:eh];
[self.viewaddSubview:self.button_1];
[self.button_1setTranslatesAutoresizingMaskIntoConstraints:NO];
NSArray*b1_image =[NSLayoutConstraintconstraintsWithVisualFormat:@"V:[button1]-[imageview]"
options:NSLayoutFormatAlignAllLeft
metrics:nil
views:@{@"button1":self.button_1,
@"imageview":self.imageview}];
[self.viewaddConstraints:b1_image];
[self.viewaddSubview:self.button_2];
[self.button_2setTranslatesAutoresizingMaskIntoConstraints:NO];
NSArray*b2_image =[NSLayoutConstraintconstraintsWithVisualFormat:@"V:[button2]-[imageview]"
options:NSLayoutFormatAlignAllRight
metrics:nil
views:@{@"button2":self.button_2,
@"imageview":self.imageview}];
[self.viewaddConstraints:b2_image];
网友评论