Constraints of Textfield conflicting with UIButton

Question

I am still in the learning process of learning constraints, so bear with me:

In xCode Interface Builder, my UI looks like the following:

The top TextField has the following constraints set up:

And the reverse button on the right has the following constraints:

When I run it in the debugger, I get a misconfigured UI:

What exactly is happening here? Why is my reverse button increasing to a huge size and displacing to a weird position and why is the first TextField shrunk?

Ideally, I want my debugger UI to look like my Interface Builder in the first image. I am setting this all up through the interface builder and not programmatically.

Answer 1

Without more information, my first guess is that the intrinsic size of the image is causing conflicts with the constraints you've set up on the button on the right. This is most likely causing the constraint engine to remove your specified priorities, as when there are conflicts at runtime, it just starts removing constraints semi-randomly until there are not more conflicts.

You have a lot of things specified against the superview. Try not to use superview relative constraints unless you're really specifying constraints against the superview, and not other components within that view.

Always be sure to check log messages at runtime about constraint conflicts that lead to conflicts being removed, as that's almost always the reason for bizarre layouts like this.

Answer 2

Top TextField should have as follows:

top space to superview, leading space to superview, width and height

Button should have as follows:

top space to superview, trailing space to superview, width and height

2nd TextField should have as follows:

top space to top TextField, leading space to superview, equal width and equal height with top TextField

Answer 3

As your button had no height and width...this may take a intrinsic size of image for button and you may get conflicting output...

Here is the image and constraints...may be work for you...

Answer 4

if you click on the

you have the option of simulating the device that you are working on while still in in interface builder by going into the attributes inspector of the game View Controller.

Simulate the device you are working on in interface builder and it should be certain that Ib matches the simulator(as long as a yellow error indicator is not showing next to the Game View controller title-- the error would say that ".... may be different at run time " or something like that).

The dimensions that are used in IB at the bottom in this case compact by compact determine the device and orientation(landscape or portraite) that the constraints made apply to. Regular by regular is universal constraints. Check my previous posts for more detail.