·您现在的位置： 云翼网络 >> 文章中心 >> 网站建设 >> app软件开发 >> IOS开发 >> AutoLayout自动布局,NSLayoutConstraint视图约束使用

【如有意向点此提交需求】关于我们

AutoLayout自动布局,NSLayoutConstraint视图约束使用

作者：佚名      IOS开发编辑：admin      更新时间：2022-07-23

一.方法

 NSLayoutConstraint *constraint =  [NSLayoutConstraint constraintWithItem:<#(id)#> attribute:<#(NSLayoutAttribute)#> relatedBy:<#(NSLayoutRelation)#> toItem:<#(id)#> attribute:<#(NSLayoutAttribute)#> multiplier:<#(CGFloat)#> constant:<#(CGFloat)#>]

 

Item:要约束的控件 attribute:要约束的控件约束的类型（做怎样的约束） relatedBy:与参照控件之间的关系 toItem:参照的控件 attribute:参照的控件约束的类型（做怎样的约束） multiplier:约束的控件和参照的控件关系倍数 constant:常量 最后两个参数计算关系： view1.PRoperty1 =（view2.property2 * multiplier）+ constant 

 

二.Autolayout的常见警告和错误

1.警告 控件的frame不匹配所添加的约束, 比如:约束控件的宽度为150, 而控件现在的宽度是160   2.错误 缺乏必要的约束, 比如:只约束了宽度和高度, 没有约束具体的位置 两个约束冲突,比如:1个约束控件的宽度为150, 1个约束控件的宽度为160

三.例子

1.代码实现：

ViewController.m

 1 #import "ViewController.h"
 2 
 3 @interface ViewController ()
 4 
 5 @end
 6 
 7 @implementation ViewController
 8 
 9 - (void)viewDidLoad {
10     [super viewDidLoad];
11     //创建添加blueview
12     UIView *blueView=[[UIView alloc] init];
13     blueView.backgroundColor = [UIColor blueColor];
14     blueView.translatesAutoresizingMaskIntoConstraints = NO;//禁止Autoresizing
15     [self.view addSubview:blueView];
16     
17     //创建添加redView
18     UIView *redView=[[UIView alloc] init];
19     redView.backgroundColor = [UIColor redColor];
20     redView.translatesAutoresizingMaskIntoConstraints = NO;
21     [self.view addSubview:redView];
22     
23     // 1.0父View左边 约束 blueView左边 30
24     NSLayoutConstraint *blueLeftCon=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:30.0];
25     [self.view addConstraint:blueLeftCon];
26     
27     // 1.1父View顶部 约束 blueView顶部 30
28     NSLayoutConstraint *blueTopCon=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:30.0 ];
29     [self.view addConstraint:blueTopCon];
30     
31      // 1.2父View右边 约束 blueView右边 30
32     NSLayoutConstraint *blueRightCon= [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-30 ];
33     [self.view addConstraint:blueRightCon];
34     
35     // 1.3 blueView 相当于 高度设置成50
36     NSLayoutConstraint *blueHeightCon=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:0 multiplier:0 constant:50];
37     [blueView addConstraint:blueHeightCon];
38 
39     //2.0 redView 顶部 和 blueView 底部 间距20
40     NSLayoutConstraint *redTopCon=[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:20];
41     [self.view addConstraint:redTopCon];
42 
43     //2.1 redView 左边 和 blueView 水平中心线对齐
44     NSLayoutConstraint *redLeftCon=[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual   toItem:blueView attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0];
45     [self.view addConstraint:redLeftCon];
46     
47     //2.2 redView 右边 参照 blueView 右边对齐
48     NSLayoutConstraint *redRightCon = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeRight multiplier:1.0 constant:0];
49     [self.view addConstraint:redRightCon];
50 
51     //2.3 redView 高度 参照 blueView 高度相等
52     NSLayoutConstraint *redHeightCon=[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0];
53     [self.view addConstraint:redHeightCon];
54     
55 }
56 
57 @end
View Code

 

2.storyboard实现：  

效果：