Autolayout clears my button text

Question

Every time I try to use autolayout the button text on one row of my button becomes crammed until its no longer visible.

I dont know what to do to fix this, I tried removing the offending buttons and adding them again but that usually migrates the problem to another row.

here is what it looks like in interface builder.

and here is what it looks like when run on the device.

This is extremely frustrating and I have found no information about it. As if Im the only person this is affecting.

If anyone has any insights into this, I would really appreciate it.

Answer 1

just dropping your items into the view is no longer an option.

I had to remove all my buttons, and lay them out one at a time promoting all my constraints to user constraints along the way.

I created the first item and promoted width and height. then promoted the connections to the superview.

I then copied that button (and its held constraints of width and height) and connected it to the button to the left as well as the top.

Then I connected the next button completing the full row.

After I had a row, I copied the row and connected it to the bottom of the row above it and so on until all my items were complete.

I spent quite a while trying to get rid of random baseline connections such as button 7 to button 3. The automatically selected constraints are not only completely inaccurate and un-usable. they are a pain to get rid of as well.

Clearly the autolayout will force you to build your interface with much more care in mind. Which will not be a bad thing, but does hamper rapid development as you have to be extremely careful not to let the interface builder attach constrains you dont want.