CODEWITHSUNDEEP
iosswift
user5493412
user5493412

Reputation:

Auto layout constraints for text fields relative to an image?

I'm trying to locate my Text Fields with respect to the Image View in my Meme Editor View using Auto Layout.

I set a constraint from the top of the top text field to the top of the image view:

enter image description here

Then I set a constraint from the bottom of the bottom text field to the bottom of the image view:

enter image description here

When I test this out, it works fine in portrait orientation:

enter image description here

But not so well when rotated:

enter image description here

Apparently when rotated, the "bottom" and "top" of the image views change. How can I constrain my text fields to account for this? I want to constrain the text fields so that they remain in the image rather than floating outside the bounds.

Upvotes: 0

Views: 732

Answers (2)

Khaled Zayed
Khaled Zayed

Reputation: 316

It is because you set the constant of the constraint of the top at 125 and the bottom at -125. It looks like you set your image view constraints to cover the entire screen in portrait and in landscape.

So technically the top textfield is 125 from the top of the view controller and the bottom textfield is -125 from the bottom of the view controller.

The solution for this is to modify your image view constraints in the view controller's view and give it a fixed height.

Upvotes: 1

Rajan Maheshwari
Rajan Maheshwari

Reputation: 14571

Give one textfield TOP a top constraint with respect to imageView and another as BOTTOM as bottom constraint with respect to imageView and you are done

enter image description here

The constraints I have used

Top Textfield

1. top Constraint i.e Vertical Spacing to imageView
2. Center Horizontally to imageView
3. lock width


Bottom Textfield

1. bottom Constraint i.e Vertical Spacing to imageView
2. Center Horizontally to imageView
3. lock width

Upvotes: 1

Related Questions