IOS学习 autolayout 自动布局 代码与界面设置截图

- (void)viewDidLoad {

    [super viewDidLoad];

    // Do any additional setup after loading the view.

    

    UIView *blueView = [[UIView alloc]init]; //不用设置Frame

    blueView.backgroundColor = [UIColor blueColor];

    [self.view addSubview:blueView];

    

    //一定要把View的autoresizing属性禁掉

    blueView.translatesAutoresizingMaskIntoConstraints = NO;

    

    /*

     constraintWithItem: 被约束的view

     attribute:          被约束的view的属性

     relatedBy:设置与参考View的关系

     NSLayoutRelationLessThanOrEqual = -1,  小于等于

     NSLayoutRelationEqual = 0,  等于

     NSLayoutRelationGreaterThanOrEqual = 1,大于等于

     

     toItem: 参照的view

     attribute: 参照的view的属性**/

    

    //添加blueView的顶部约束

    NSLayoutConstraint *blueTop = [NSLayoutConstraint

                                   constraintWithItem:blueView

                                   attribute:NSLayoutAttributeTop

                                   relatedBy:NSLayoutRelationEqual

                                   toItem:self.view

                                   attribute:NSLayoutAttributeTop

                                   multiplier:1

                                   constant:20];

    //把约束添加到控制的父view上

    [self.view addConstraint:blueTop];

    

    //添加blueView的左侧约束

    NSLayoutConstraint *blueLeft = [NSLayoutConstraint

                                    constraintWithItem:blueView

                                    attribute:NSLayoutAttributeLeft

                                    relatedBy:NSLayoutRelationEqual

                                    toItem:self.view

                                    attribute:NSLayoutAttributeLeft

                                    multiplier:1

                                    constant:20];

    [self.view addConstraint:blueLeft];

    

    //添加blueView的右侧约束

    NSLayoutConstraint *blueRight = [NSLayoutConstraint

                                     constraintWithItem:blueView

                                     attribute:NSLayoutAttributeRight

                                     relatedBy:NSLayoutRelationEqual

                                     toItem:self.view attribute:NSLayoutAttributeRight

                                     multiplier:1

                                     constant:-20];

    [self.view addConstraint:blueRight];

    

    //添加blueView的高度约束

    NSLayoutConstraint *blueHeight = [NSLayoutConstraint

                                      constraintWithItem:blueView

                                      attribute:NSLayoutAttributeHeight

                                      relatedBy:NSLayoutRelationEqual

                                      toItem:nil //没有参照

                                      attribute:NSLayoutAttributeNotAnAttribute

                                      multiplier:1

                                      constant:50];

    //高和宽没有参照的约束添加到父view和本身blueView上，都可以

    [self.view addConstraint:blueHeight];

//    [blueView addConstraint:blueHeight];

    

    

    UIView *redView = [[UIView alloc]init];

    redView.backgroundColor = [UIColor redColor];

    [self.view addSubview:redView];

    redView.translatesAutoresizingMaskIntoConstraints = NO;

    

    //添加redView的顶部约束

    NSLayoutConstraint *redTop = [NSLayoutConstraint

                                   constraintWithItem:redView

                                   attribute:NSLayoutAttributeTop  //顶部

                                   relatedBy:NSLayoutRelationEqual

                                   toItem:blueView

                                   attribute:NSLayoutAttributeBottom //底部

                                   multiplier:1

                                   constant:20];

    //把约束添加到控制的父view上

    [self.view addConstraint:redTop];

    

    //添加redView的右侧约束

    NSLayoutConstraint *redRight= [NSLayoutConstraint

                                    constraintWithItem:redView

                                    attribute:NSLayoutAttributeTrailing //尾部对齐

                                    relatedBy:NSLayoutRelationEqual

                                    toItem:blueView

                                    attribute:NSLayoutAttributeTrailing //尾部对齐

                                    multiplier:1

                                    constant:0];

    [self.view addConstraint:redRight];

    

    //添加redView的高度约束

    NSLayoutConstraint *redHeight = [NSLayoutConstraint

                                      constraintWithItem:redView

                                      attribute:NSLayoutAttributeHeight

                                     relatedBy:NSLayoutRelationEqual

                                      toItem:blueView

                                      attribute:NSLayoutAttributeHeight

                                      multiplier:1

                                      constant:0];

    [self.view addConstraint:redHeight];

    //添加redView的宽度约束

    NSLayoutConstraint *redWidth = [NSLayoutConstraint

                                     constraintWithItem:redView

                                     attribute:NSLayoutAttributeWidth

                                     relatedBy:NSLayoutRelationEqual

                                     toItem:blueView

                                     attribute:NSLayoutAttributeWidth

                                     multiplier:0.5

                                     constant:0];

    [self.view addConstraint:redWidth];

}