iOS autolayout使用

来源：互联网发布：制作语音广告软件编辑：程序博客网时间：2024/06/08 23:06

随着苹果机型越来越多，多机型适配成了一个问题，有的计算屏幕大小 ,有的用autoresize,个人感觉最好用的还是苹果提供的autolayout.当然，每个人的喜好不一样，这就要看自已的喜好了。autolayout实现多机型适配主是用用到约束，通过约束能够定位控件的位置，前提是父视图的大小确定。

下面从最简单的开始说起，在视图中添加Button,父视图占整个屏幕大小是可以确定的

竖屏横屏

下面看看代码的实现：如下

- (void)viewDidLoad {      [super viewDidLoad];      // Do any additional setup after loading the view, typically from a nib.            UIButton *TopLeftBtn=[UIButton buttonWithType:UIButtonTypeRoundedRect];      [TopLeftBtn setTitle:@"TopLeftBtn" forState:UIControlStateNormal];      [TopLeftBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];      [TopLeftBtn setBackgroundColor:[UIColor greenColor]];     //关闭autoresize      [TopLeftBtn setTranslatesAutoresizingMaskIntoConstraints:NO];      [self.view addSubview:TopLeftBtn];      //前约束  也叫左约束   离父视图self.view的左边间距为10像素      NSLayoutConstraint *topLeftBtnleadingConstraint=[NSLayoutConstraint constraintWithItem:TopLeftBtn attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1 constant:10];      [self.view addConstraint:topLeftBtnleadingConstraint];      //上约束   离父视图self.view的上边间距为10像素      NSLayoutConstraint *topLeftBtntopConstraint=[NSLayoutConstraint constraintWithItem:TopLeftBtn attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1 constant:10];      [self.view addConstraint:topLeftBtntopConstraint];            //右约束  离父视图self.view的右边间距为10像素      NSLayoutConstraint *topLeftBtnRightConstraint=[NSLayoutConstraint constraintWithItem:TopLeftBtn attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1 constant:-10];      [self.view addConstraint:topLeftBtnRightConstraint];            //下约束  离父视图self.view的下边间距为10像素      NSLayoutConstraint *topRightBtnBottomConstraint=[NSLayoutConstraint constraintWithItem:TopLeftBtn attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1 constant:-10];      [self.view addConstraint:topRightBtnBottomConstraint];  }

添加上面4个约束就可以确定Button的大小了，好了就这么简单，这是一个简单的，如果来点复杂的呢，那好就看下面的了

竖屏横屏

上面两个按钮，下面一个按钮，上面两按钮宽度一样，所有Button高度一样，所有间距都是10像素，下面上代码：

- (void)viewDidLoad {      [super viewDidLoad];      // Do any additional setup after loading the view, typically from a nib.            UIButton *TopLeftBtn=[UIButton buttonWithType:UIButtonTypeRoundedRect];      [TopLeftBtn setTitle:@"TopLeftBtn" forState:UIControlStateNormal];      [TopLeftBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];      [TopLeftBtn setBackgroundColor:[UIColor greenColor]];      [TopLeftBtn setTranslatesAutoresizingMaskIntoConstraints:NO];      [self.view addSubview:TopLeftBtn];                  UIButton *TopRightBtn=[UIButton buttonWithType:UIButtonTypeRoundedRect];      [TopRightBtn setTitle:@"TopRightBtn" forState:UIControlStateNormal];      [TopRightBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];      [TopRightBtn setBackgroundColor:[UIColor redColor]];      [TopRightBtn setTranslatesAutoresizingMaskIntoConstraints:NO];      [self.view addSubview:TopRightBtn];            UIButton *BottomBtn=[UIButton buttonWithType:UIButtonTypeRoundedRect];      [BottomBtn setTitle:@"BottomBtn" forState:UIControlStateNormal];      [BottomBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];      [BottomBtn setBackgroundColor:[UIColor blueColor]];      [BottomBtn setTranslatesAutoresizingMaskIntoConstraints:NO];      [self.view addSubview:BottomBtn];              //TopLeftBtn相对于self.view的左约束  距父视图self.view的左间距是10像素      NSLayoutConstraint *topLeftBtnleadingConstraint=[NSLayoutConstraint constraintWithItem:TopLeftBtn attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1 constant:10];      [self.view addConstraint:topLeftBtnleadingConstraint];            //TopLeftBtn相对于self.view的上约束   距父视图self.view的上间距是 10像素      NSLayoutConstraint *topLeftBtntopConstraint=[NSLayoutConstraint constraintWithItem:TopLeftBtn attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1 constant:10];      [self.view addConstraint:topLeftBtntopConstraint];            //TopRightBtn相对于TopLeftBtn的约束 TopRightBtn与TopLeftBtn的上平齐      NSLayoutConstraint *topRightBtnTopConstraint=[NSLayoutConstraint constraintWithItem:TopRightBtn attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:TopLeftBtn attribute:NSLayoutAttributeTop multiplier:1 constant:0];      [self.view addConstraint:topRightBtnTopConstraint];          //TopRightBtn相对于TopLeftBtn的约束 TopRightBtn的左边与TopLeftBtn的右边相差10像素      NSLayoutConstraint *topRightBtnLeadConstraint=[NSLayoutConstraint constraintWithItem:TopRightBtn attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:TopLeftBtn attribute:NSLayoutAttributeTrailing multiplier:1 constant:10];      [self.view addConstraint:topRightBtnLeadConstraint];            //TopRightBtn相对于self.view的约束 TopRightBtn的右边与父视图的右边间距是10像素      NSLayoutConstraint *topRightBtnTrailConstraint=[NSLayoutConstraint constraintWithItem:TopRightBtn attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1 constant:-10.0];      [self.view addConstraint:topRightBtnTrailConstraint];            //TopRightBtn与TopLeftBtn宽度相等      NSLayoutConstraint *topRightAndLeftBtnWidthEqualConstraint=[NSLayoutConstraint constraintWithItem:TopRightBtn attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:TopLeftBtn attribute:NSLayoutAttributeWidth multiplier:1 constant:0];      [self.view addConstraint:topRightAndLeftBtnWidthEqualConstraint];            //TopRightBtn与TopLeftBtn高度相等      NSLayoutConstraint *topRightAndLeftBtnHeightEqualConstraint=[NSLayoutConstraint constraintWithItem:TopRightBtn attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:TopLeftBtn attribute:NSLayoutAttributeHeight multiplier:1 constant:0];      [self.view addConstraint:topRightAndLeftBtnHeightEqualConstraint];            //TopLeftBtn与BottomBtn左对齐      NSLayoutConstraint *bottomBtnleadingConstraint=[NSLayoutConstraint constraintWithItem:TopLeftBtn attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:BottomBtn attribute:NSLayoutAttributeLeading multiplier:1 constant:0];      [self.view addConstraint:bottomBtnleadingConstraint];            //TopRightBtn与BottomBtn右对齐      NSLayoutConstraint *bottomBtnTrailConstraint=[NSLayoutConstraint constraintWithItem:TopRightBtn attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:BottomBtn attribute:NSLayoutAttributeTrailing multiplier:1 constant:0];      [self.view addConstraint:bottomBtnTrailConstraint];            //BottomBtn的上边距约束离TopLeftBtn的底部为10像素      NSLayoutConstraint *bottomBtnTopConstraint=[NSLayoutConstraint constraintWithItem:BottomBtn attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:TopLeftBtn attribute:NSLayoutAttributeBottom multiplier:1 constant:10];      [self.view addConstraint:bottomBtnTopConstraint];            //BottomBtn的上边距约束离self.view的底部是10像素      NSLayoutConstraint *bottomBtnBottomConstraint=[NSLayoutConstraint constraintWithItem:BottomBtn attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1 constant:-10];      [self.view addConstraint:bottomBtnBottomConstraint];            //TopLeftBtn的高度与BottomBtn的高度相同      NSLayoutConstraint *bottomBtnHeightConstraint=[NSLayoutConstraint constraintWithItem:TopLeftBtn attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:BottomBtn attribute:NSLayoutAttributeHeight multiplier:1 constant:0];      //multiplier百度是乘数  constant 常数            [self.view addConstraint:bottomBtnHeightConstraint];            //更新约束  //    [self.view setNeedsUpdateConstraints];  //      //    [self.view updateConstraintsIfNeeded];  }

就这么多是不是很方便，那我们现在来看哈约束是怎么实现定位的，如果手机是5s的话，像素就是640*1136 缩小一倍就是320*568

竖屏时：设三个Button的高度是x未知数，三个Button高度一样，10+x+10+x+10=568 --->x=269，三个按钮高度都是269像素。BottomBtn的宽度是10+y+10=320--->y=300,BottomBtn的宽就是300像素。现在主是计算TopLeftBtn TopRightBtn的宽了，TopLeftBtn与TopRightBtn的宽相等，那么10+z+10+z+10=320-->z=145,他们的宽就是145像素了，现在一切就好说了

TopLeftBtn的frame 就是（10,10,145,269） TopRightBtn的frame为（10+145+10,10,145,269）

BottomBtn的frame就是(10,10+269+10,145,269)

横屏一样，只不过是宽度换过来了，其他的一样。

如果是4s或者6 6plus只不过是屏幕尺寸不一样而已都按上面的公式计算，得出的frame也不一样，所以说只要你的约束加得好，就会控制控件的位置，实现多屏配适配。是不是觉得很好学，有些人会觉得代码写得太多了，确实这样一个一个加约束确实挺麻烦的，如果又想代码写得少，又想效果好，请听下回分解

0 0