为什么需要代码实现 AutoLayout
- 实际开发中我们经常需要通过代码来添加控件，此时创建的控件是无法通过 storyboard 设置约束的
- 通过 storyboard 添加的约束本质上是会转成代码的。
添加约束的规则
- 对于两个同层级的 View 的约束。添加到他们的父控件上
- 对于两个不同层级的view之间的约束，添加到他们最近层次的父控件上
- 对于有层次关系的 view 添加到较高级的父控件上
- 对于跟其他没有关系的view 约束添加到他自己本身
总结：添加到能够管理到需要约束控件的最近父级控件上。就像在族谱上找两个人的共同祖先一样。
下面我们通过简单的图示帮助理解上述的几个规则
两个同层级的 View 的约束
两个不同层级的 View 的约束
两个有层次关系的 view 的约束
注：不同颜色表示不同组，箭头所指的元素为添加约束的元素，如三个蓝色元素，两个没有箭头指向的表示需要添加约束的元素，箭头指向的元素为约束添加到该元素身上。其他不同颜色组也是如此。
代码实现
假设有这样一个简单需求：有一个 UIView 宽高均为 100，在不同屏幕尺寸下，均位于屏幕右下角，距右边框和下边框均为 10。示意图如下：
需求示意图
在开始代码之前我们先来了解一下关键的方法
1.创建约束对象
+(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： 约束的类型（如：高度约束）
-
relation：与参照之间的关系（如：等于，大于）
-
view2：参照的控件
-
attr2：约束的类型（如： view2 的宽度）
-
multiplier：乘数
-
c：减去的常量
举个例子
要约束的对象（通过 view1 指定）的高度（通过 attr1 指定）等于（通过 relation 指定） 所参照的控件（通过 view2 指定）的宽度（通过 attr2 指定）的 2 倍（通过 multiplier 指定）减去 20（通过 c 指定）
2.添加约束
- (void)addConstraint:(NSLayoutConstraint *)constraint
核心代码
- (void)viewDidLoad {
[super viewDidLoad];
//添加一个视图
UIView * greenView = [[UIView alloc] init];
greenView.backgroundColor = [UIColor greenColor];//设置背景颜色
[self.view addSubview:greenView];//先添加控件再添加约束
//注意点，系统默认会将 autoresizingMask 转成约束,这种情况下会与我们设置的Autolayout 约束冲突，下面指令告诉系统不要自动转换。
greenView.translatesAutoresizingMaskIntoConstraints = NO;
//创建约束
//宽度约束
NSLayoutConstraint *widthConstraint = [NSLayoutConstraint constraintWithItem:greenView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:100];
//添加宽度约束
[greenView addConstraint:widthConstraint];
//高度约束
NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:greenView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:100];
//添加宽度约束
[greenView addConstraint:heightConstraint];
//距离屏幕右边约束
NSLayoutConstraint *rightMargin = [NSLayoutConstraint constraintWithItem:greenView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-10];
//添加距离屏幕右边约束
[self.view addConstraint:rightMargin];
//距离屏幕底部约束
NSLayoutConstraint *bottomMargin = [NSLayoutConstraint constraintWithItem:greenView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-10];
//添加屏幕底部约束
[self.view addConstraint:bottomMargin];
}
程序运行图
运行效果
运行效果
注意点总结：
- 每一个约束都是一个约束对象
- 添加约束的规则，添加到约束涉及到的控件的最近一父级控件身上
- translatesAutoresizingMaskIntoConstraints = NO 避免冲突
- 先添加控件再添加约束
- 不参照第二个控件的时候 attr2 属性传 NSLayoutAttributeNotAnAttribute
网友评论