AutoLayout Overlapping Problem

I am trying to eliminate all warnings in my app to update it to the App Store. Warnings are deceptive because while they do not appear on one iPhone model, warnings can pop up when viewed on another iPhone model.

I have a label and a textField on the same line. The label contains “Food & Drink”. The textField is wide enough to contain “9,999,999.99”, if necessary. It simply holds a user entered currency string.

This app is portrait, iPhone only.

The label is anchored to the left view safe margin edge. The textField is anchored to the right side of view. I set my AutoLayout constraints like this because I always want the label anchored to the left-side of the view and I want the textField anchored to the right-side. When the user enters her currercy data the numerals appear right to left.

The app generates no warnings when viewed on all iPhones in the simulator except the iPhone SE . When the App is run on the SE, the label and the textField overlap each other. (I deliberately did not connect these views together because I feared doing so would create problems.)

So with neither view having any constraints between themselves, the warning I get is:
“Trailing constraint is missing, which may cause overlapping with other views.” This is in reference to the label. Oddly, the textField does not generate a " Leading … " warning.

If I connect the label to the textField, the warning goes away, but the overlapping behavior remains. ( I control-clicked from the label to the textField and selected “Horizontal spacing”.)

An ideal solution to this issue could be that both label and textField would compress equally so that both would be visible - not overlapped, on the SE. With the font size automatically downsized to fit the SE view this would work. This solution smells a lot like a autolayout coding solution and not so much of IB autolayout fix. I could be wrong.

Any help would be greatly appreciated.

@chicago. Thanks very much for your question!

Typically, each view needs 4 constraints in Auto Layout to be positioned correctly. If you choose a constraint like “center horizontally/vertically”, then this would count as two since it involves positioning from either side.

Having said that, what I would suggest is perhaps work backwards, and START from the iPhone SE, and make sure the spacing is correct on that device first. I’m saying this because it is your bottleneck. If you can essentially get it to work on the SE, then it should work on all others.

You have multiple choices now, to address the problem. One way is to actually set a constant width, and height for both the label, and the textField. The benefit of this is, by working with constant dimensions, you only have to worry now about maintaining a minimum space in between the two.

If you want to keep the distance between the two views constant, you can establish that in the SE screen. Since you’ve set the dimensions constant, the leading distance for the label will increase, and the trailing distance for the textfield will increase.

If however, you want to keep the views a constant distance from their respective margins, then the distance between them will increase with each larger iPhone size.

Another solution is to set minimum, and maximum values for your constraints. This means you can set limits on the dimensions, or the spacing between your views so that you allow them to grow dynamically with larger devices.

We do offer this tutorial on our site which should help you address your problem.

You might also want to check out this Beginner Tutorial on Auto Layout Video Course that we offer, as well as this Advanced Video Tutorial on Auto Layout.

I hope this helps!

All the best!

1 Like

This topic was automatically closed after 166 days. New replies are no longer allowed.