CODEWITHSUNDEEP
objective-cautolayoutconstraints
Frederick C. Lee
Frederick C. Lee

Reputation: 9513

How do I simply programmatically place a UIButton upon a host view via Constraints?

I want to programmatically generate an overview (UIButton) in the lower left-hand corner.

enter image description here This is currently being done using Interface Builder. However I need to repeat this for multiple host UIViews. So I decided to write a utility class method to do this.

+ (UIButton *)attachGreenPlusButtonTo:(UIView *)hostView {

    NSLog(@"--- {attachGreenPlusButtonTo} ---");

    // Green Button --------------------------------------------------------------------
    UIImage *greenPlusImage = [UIImage imageNamed:@"btn_plus"];
    UIButton *greenButton = [UIButton buttonWithType:UIButtonTypeCustom];
    [greenButton setImage:greenPlusImage forState:UIControlStateNormal];
    greenButton.tag = 22;

    [greenButton setTranslatesAutoresizingMaskIntoConstraints:NO];

    [hostView addSubview:greenButton];

   //  Positioning the Green '+' Button:

        // Button is 4 pts from superview right edge:
        NSArray *horizontalConstraints =
        [NSLayoutConstraint constraintsWithVisualFormat:@"H:[greenButton(==57)]-4-[hostView]"
                                                options:0
                                                metrics:nil
                                                  views:NSDictionaryOfVariableBindings(hostView,greenButton)];

        [hostView addConstraints:horizontalConstraints];

        NSArray *verticalConstraints =
        [NSLayoutConstraint constraintsWithVisualFormat: @"V:[greenButton(==57)]-34-[hostView]"
                                                options:0
                                                metrics:nil
                                                  views:NSDictionaryOfVariableBindings(hostView,greenButton)];

        [hostView addConstraints:verticalConstraints];

    [hostView layoutIfNeeded];

    return greenButton;
}

I'm getting close, but now the button is being positioned at (-61, -91).
What gives?

enter image description here

Upvotes: 0

Views: 61

Answers (2)

Frederick C. Lee
Frederick C. Lee

Reputation: 9513

I thought I had a problem using '|' for superview within the method due to a bug which eventually appeared to be due do something else. So...
Upon feedback, I return to the use of '|' as the superview vs the 'hostView':

//  Positioning the Green '+' Button:
    // Button is 4 pts from superview right edge:
    NSArray *horizontalConstraints =
    [NSLayoutConstraint constraintsWithVisualFormat:@"H:[greenButton(==57)]-4-|"
                                            options:0
                                            metrics:nil
                                              views:NSDictionaryOfVariableBindings(hostView,greenButton)];

    [hostView addConstraints:horizontalConstraints];

    NSArray *verticalConstraints =
    [NSLayoutConstraint constraintsWithVisualFormat: @"V:[greenButton(==57)]-34-|"
                                            options:0
                                            metrics:nil
                                              views:NSDictionaryOfVariableBindings(hostView,greenButton)];

    [hostView addConstraints:verticalConstraints];

    [hostView layoutIfNeeded];

This worked. All appears to be okay now.

Upvotes: 0

vacawama
vacawama

Reputation: 154651

Call this after creating the greenButton:

[greenButton setTranslatesAutoresizingMaskIntoConstraints:NO];

otherwise the system will create (unwanted) constraints for you.

Your visual layout doesn't look right either. Use vertical bar | to refer to the superview:

"H:[greenButton(==57)]-4-|"

and

"V:[greenButton]-34-|"

Upvotes: 1

Related Questions