Interface Builder Y U no like auto layout?!

OK, a simple idea in auto layout terms...

I have a view, it has several buttons on it.

All buttons will have equal widths.
All buttons will have default spacing (between adjacent buttons and the superview).

Width of buttons therefore specified by width of super view.

In code it would go something like this...

// make all button widths equal
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:button2
                                                      attribute:NSLayoutAttributeWidth
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:button1
                                                      attribute:NSLayoutAttributeWidth
                                                     multiplier:1.0
                                                       constant:0.0]];

[self.view addConstraint:[NSLayoutConstraint constraintWithItem:button3
                                                      attribute:NSLayoutAttributeWidth
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:button1
                                                      attribute:NSLayoutAttributeWidth
                                                     multiplier:1.0
                                                       constant:0.0]];

// set spacing between buttons and subview to default
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|-[button1]-[button2]-[button3]-|"
                                                                  options:NSLayoutFormatAlignAllCenterY
                                                                  metrics:nil
                                                                    views:NSDictionaryOfVariableBindings(button1, button2, button3)]];

This is not ambiguous along the horizontal and has no conflicts at all. i.e. it's a perfectly acceptable auto-layout setup. Obviously it would also need vertical layout but I'm not talking about them at the moment.

So, setting this up in interface builder...

I started out by making all the buttons width 20 (not as a user constraint, just a system constraint).
I then added "widths equally" between button1-button2 and button1-button3.
I then added the spacing constraints to this point... @"|-[button1]-[button2]-[button3]".

This all worked fine. I was almost there. I added the final spacing constraint which was button3 trailing edge to superview. It added the constraint with the current value which happened to be 14.

This was all fine.

However, I found it had added a user constraint to the width of button1.

I deleted this which is fine.

I then selected the superview constraint I just added to button3 and ticked the "standard" check box. Now, what should happen is all the buttons should resize (slightly smaller widths) to accommodate the new constraint. Instead the constraint just deleted itself and I'm left in the same situation... WTF!?

If I can do this in code so easily why is it not even possible at all to do it in Interface Builder?

If anyone wants to try this I'm actually using 6 buttons in my project and they are spaced on a view of width 320.

Let me know if you get any further than I did...

2 Comments

  1. Hi there just wanted to give you a brief heads up and let you know a
    few of the images aren't loading correctly. I'm not sure why but I think its
    a linking issue. I've tried it in two different browsers
    and both show the same results.

    Feel free to visit my blog post youtube.com (Alexander)

Leave a Reply

Your email address will not be published. Required fields are marked *