AutoLayout 代码实现Ⅰ

为什么需要代码实现 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