NSAutoLayoutConstraints crashing app

Question

I've followed a handful of tutorials, but I can't seem to get my app to accept the rules I've set out for NSAutoLayoutConstraints.

*** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: 'Unable to parse constraint format: 
Unable to interpret '|' character, because the related view doesn't have a superview 
V:|-[signupBtn][signupWithFacebookBtn]-| 

In my viewLoad method:

-(void)loadView
{
    [super loadView];



    //Create the background view
    [self.view setBackgroundColor:[UIColor whiteColor]];


    //Set up the buttons, labels, and textfields
    signupBtn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    [signupBtn setTitle:@"Sign Up!" forState:UIControlStateNormal];
    [signupBtn setTranslatesAutoresizingMaskIntoConstraints:NO];
    [signupBtn setFrame:CGRectMake(50, 350, 220, 40)];
    signupWithFacebookBtn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    [signupWithFacebookBtn setTitle:@"Sign Up with Facebook" forState:UIControlStateNormal];
    [signupWithFacebookBtn setTranslatesAutoresizingMaskIntoConstraints:NO];
    [signupWithFacebookBtn setFrame:CGRectMake(50, 400, 320, 40)];



    //A dictionary of all subviews
    NSDictionary* m_viewsDictionary = NSDictionaryOfVariableBindings(signupBtn, signupWithFacebookBtn);

    //Constraints
    NSArray* verticalConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[signupBtn][signupWithFacebookBtn]-|" options:0 metrics:nil views:m_viewsDictionary];
    NSArray* horizontalConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[signupBtn][signupWithFacebookBtn]-|" options:0 metrics:nil views:m_viewsDictionary];



    //Add the buttons, labels and textfields
    [self.view addSubview:signupBtn];
    [self.view addSubview:signupWithFacebookBtn];

    //Add constraints
    [self.view addConstraints:verticalConstraints];
    [self.view addConstraints:horizontalConstraints];


    NSLog(@"Hello world");
}

I'm not sure why it is crashing. The subviews exist, and are getting added before the constraints are added. Additionally, both buttons have their setTranslatesAutoresizeMaskIntoConstraints set to NO. What am I missing?

Answer 1

You should add the buttons as subviews before you define the constraints -- the parser doesn't understand what "|" is because your buttons have no superview at the time you create the constraints.