In this episode we take a look at how to set up auto layout constraints in code, rather than with Interface Builder / Storyboards. Whether you prefer to work in code or storyboards to lay you user interfaces, often times setting things up in code is required. You'll see how to use NSLayoutConstraint to fully specify a layout, and hopefully understand a bit more about how auto layout works.
Episode Links Episode Source Code NSLayoutConstraint Class Reference Creating the Top View UIView *headlineView = [[UIView alloc] init]; headlineView.backgroundColor = [UIColor colorWithRed:0.423 green:0.343 blue:0.804 alpha:1.000]; headlineView.translatesAutoresizingMaskIntoConstraints = NO; [self.view addSubview:headlineView]; NSLayoutConstraint *headlineHeight = [NSLayoutConstraint constraintWithItem:headlineView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:100]; [headlineView addConstraint:headlineHeight]; NSLayoutConstraint *headlineTop = [NSLayoutConstraint constraintWithItem:headlineView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:60]; [self.view addConstraint:headlineTop]; NSLayoutConstraint *headlineLeft = [NSLayoutConstraint constraintWithItem:headlineView attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:20]; [self.view addConstraint:headlineLeft]; NSLayoutConstraint *headlineRight = [NSLayoutConstraint constraintWithItem:headlineView attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-20]; [self.view addConstraint:headlineRight]; Creating the Left View UIView *leftView = [[UIView alloc] init]; leftView.backgroundColor = [UIColor colorWithRed:0.725 green:0.739 blue:1.000 alpha:1.000]; leftView.translatesAutoresizingMaskIntoConstraints = NO; [self.view addSubview:leftView]; NSLayoutConstraint *leftSide = [NSLayoutConstraint constraintWithItem:leftView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:headlineView attribute:NSLayoutAttributeLeft multiplier:1.0 constant:0]; [self.view addConstraint:leftSide]; // this is needed because.... NSLayoutConstraint *leftTop = [NSLayoutConstraint constraintWithItem:leftView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:headlineView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:20]; [self.view addConstraint:leftTop]; NSLayoutConstraint *leftBottom = [NSLayoutConstraint constraintWithItem:leftView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-20]; [self.view addConstraint:leftBottom]; NSLayoutConstraint *leftWidth = [NSLayoutConstraint constraintWithItem:leftView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:headlineView attribute:NSLayoutAttributeWidth multiplier:0.3 constant:0]; [self.view addConstraint:leftWidth]; Laying Out the Button UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect]; [button setTitle:@"Tap Me" forState:UIControlStateNormal]; button.translatesAutoresizingMaskIntoConstraints = NO; [self.view addSubview:button]; NSLayoutConstraint *buttonLeft = [NSLayoutConstraint constraintWithItem:button attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:leftView attribute:NSLayoutAttributeRight multiplier:1.0 constant:20]; [self.view addConstraint:buttonLeft]; NSLayoutConstraint *buttonY = [NSLayoutConstraint constraintWithItem:button attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:leftView attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0]; [self.view addConstraint:buttonY];