Autolayout的简单介绍和示例代码
1.Autolayout的2个核心概念
- 1.参照
- 2.约束
2.常见错误
-
1.缺乏必要的约束, 比如
只约束了宽度和高度, 没有约束具体的位置 -
2.两个约束冲突, 比如
1个约束控件的宽度为100, 1个约束控件的宽度为110
3.自动布局的核心计算公式
obj1.property1 =(obj2.property2 * multiplier)+ constant value
4.添加约束的规则
-
在创建约束之后,需要将其添加到作用的view上
-
在添加时要注意目标view需要遵循以下规则:
-
1.对于两个同层级view之间的约束关系,添加到它们的父view上
-
2.对于两个不同层级view之间的约束关系,添加到他们最近的共同父view上
-
3.对于有层次关系的两个view之间的约束关系,添加到层次较高的父view上
5.核心方法
/*
* 这个方法就是万能公式
* @param id 被约束控件对象
* @param attribute1: 被约束对象属性的那一边(上下左右)
* @param relatedBy 被约束对象与约束对象的关系(等于/大于等于/小于等于),比如等于NSLayoutRelationEqual
* @param toItem 参照对象
* @param attribute2 参照对象属性的那一边(上下左右)
* @param multiplier 乘数,相当于倍数;比如1,表示1倍;
* @param constant 常量;
* @return 约束好的对象的属性
*/
NSLayoutConstraint *blueViewLeft = [NSLayoutConstraint constraintWithItem:(id) attribute:(NSLayoutAttribute) relatedBy:(NSLayoutRelation) toItem:(id) attribute:(NSLayoutAttribute) multiplier:(CGFloat) constant:(CGFloat)];
6.开始代码示例
- 1.创建蓝色的View
UIView *blueView = [[UIView alloc] init];
blueView.backgroundColor = [UIColor blueColor];
// 禁止Autoresizing转为Autolayout的约束
blueView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:blueView];
- 2.创建红色的View
UIView *redView = [[UIView alloc] init];
redView.backgroundColor = [UIColor redColor];
// 禁止Autoresizing转为Autolayout的约束
redView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:redView];
- 3./*** 添加蓝色控件的约束 ***/
NSLayoutConstraint *blueLeftLc = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:20];
[self.view addConstraint:blueLeftLc];
NSLayoutConstraint *blueBottomLc = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-20];
[self.view addConstraint:blueBottomLc];
NSLayoutConstraint *blueRightLc = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeLeft multiplier:1.0 constant:-20];
[self.view addConstraint:blueRightLc];
NSLayoutConstraint *blueHeightLc = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:40];
[blueView addConstraint:blueHeightLc];
NSLayoutConstraint *blueHeightLc2 = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:100];
// 设置约束对象高度2的优先级为50;
blueHeightLc2.priority = 50;
[blueView addConstraint:blueHeightLc2];
NSLayoutConstraint *blueWidthLc = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0];
[self.view addConstraint:blueWidthLc];
- 4./*** 添加红色控件的约束 ***/
NSLayoutConstraint *redTopLc = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeTop multiplier:1.0 constant:0];
[self.view addConstraint:redTopLc];
NSLayoutConstraint *redBottomLc = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0];
[self.view addConstraint:redBottomLc];
NSLayoutConstraint *redRightLc = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-20];
[self.view addConstraint:redRightLc];
拥抱自动布局,忘掉frame吧!
新鲜出炉的菜鸟一枚,希望大家能互相切磋,互相琢磨,共同进步!