Autolayout代码实现举例-01使用线性公式

Autolayout代码实现举例-01使用线性公式

1.例子1

　　需求: 令一个宽高都为200的view永远显示在屏幕的中央。

 　　// 1.创建蓝色view
    UIView *blueView =[[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
        // 使用Autolayout必须关闭下面这个属性, 意思是不要把AutoresizingMask应用到Contrainsts中
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
        // 使用Autolayout之前必须把view加到父视图上
    [self.view addSubview:blueView];
    
    
    // 2.对红色view添加约束
    // 2.1.约束宽度
    CGFloat width = 200;
        // 创建约束对象, 实际是就是在表述线性公式  y = ax + b;
    NSLayoutConstraint *widthConst = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:width];
        // 与其他view无关的约束只需加在自己的约束集合中
    [blueView addConstraint:widthConst];
    
    // 2.2.约束高度
    CGFloat height = 200;
    NSLayoutConstraint *heightConst = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:height];
    [blueView addConstraint:heightConst];
    
    // 2.3.约束中心位置
    NSLayoutConstraint *centerXConst = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0];
        // 与其他view有关的约束加在离自己最近的父视图上
    [self.view addConstraint:centerXConst];
    
    NSLayoutConstraint *centerYConst = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0];
    [self.view addConstraint:centerYConst];

           结果:  竖屏 :     横屏: 

2.例子2

　　需求: 创建两个View, 一个蓝色, 一个红色,  蓝色距离屏幕最上面、左边、右边的距离为20, 使红色view的顶部与蓝色view的底部的间距为20，且两者的右边缘对齐。

 

　　// 1.蓝色view
    UIView *blueView =[[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:blueView];
    
    // 2.红色view
    UIView *redView =[[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:redView];
    
    // 3.蓝色view的约束
    // 3.1.高度
    CGFloat height = 40;
    NSLayoutConstraint *blueHeight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:height];
    [blueView addConstraint:blueHeight];
    
    // 3.2.左边间距
    CGFloat margin = 20;
    NSLayoutConstraint *leftMargin = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:margin];
    [self.view addConstraint:leftMargin];
    
    // 3.3.右边间距
        // 注意constant的正负
    NSLayoutConstraint *rightMargin = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-margin];
    [self.view addConstraint:rightMargin];
    
    // 3.4.顶部间距
    NSLayoutConstraint *topMargin = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:margin];
    [self.view addConstraint:topMargin];
    
    // 4.红色view的约束
    // 4.1.高度
        // 注意这里redView的高度关联到blueView, 所以此约束必须加到他们共同的(且为最近的)父视图上, 否则引发崩溃
    NSLayoutConstraint *redHeight = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0.0];
    [self.view addConstraint:redHeight];
    
    // 4.2.左边缘
    NSLayoutConstraint *leftEadge = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0.0];
    [self.view addConstraint:leftEadge];
    
    // 4.3.右边间距 == blueView
    NSLayoutConstraint *rightMarginRed = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeRight multiplier:1.0 constant:0.0];
    [self.view addConstraint:rightMarginRed];
    
    // 4.4.顶部间距 == blueView底部 + 20
    NSLayoutConstraint *topMarginRed = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:margin];
    [self.view addConstraint:topMarginRed];

 

结果:  竖屏 :   横屏: