Making a simple user interface work with Autolayout

Question

I just started learning autolayout and swift. I am trying to make the following user interface work.

However, on iPhone 4s Simulator it looks like this after adding the constraints (which are described later). I have taken the screenshot of the entire simulator.

On other devices, like iPhone 6 plus, it looks different. I read that you should add constraints, which you think, are enough to define the object's position. I added these constraints:

Constraint for UIImageView

1. Image is "aspect fit".
2. Width constraint.
3. Aspect ratio.
4. Leading and top space to superview (I also tried removing "leading space" constraint and instead adding "horizontal center in container" constraint)

I think above constraints should be sufficient to define the object's size and position.

Constraints for UITextField

1. Width constraint.
2. Aspect ratio.
3. Leading space to superview.
4. Vertical spacing to the UIImageView.

Again, should be enough to define the textfield's position. It seems that XCode thinks otherwise. How do I make this simple interface work? What am I missing?

EDIT

Letting XCode infer the constraints works best. I set the width and aspect ratio constraints for both. Other constraints were inferred by XCode (top space, bottom space and horizontal center of image view to superview and horizontal center of textfield with respect to image view).

My question is, do you see a fault in my original constraints? If I can understand that, then I can move on to complex interfaces. Letting XCode infer constraints doesn't always work.

Answer 1

You could try removing the width constraint. Instead, add trailing edge to superview. With Aspect ratio, that should fit the image into the screen.