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];

}

程序运行图

运行效果