Hiding a view when orientation changes to landscape in autolayouts

Question

I am creating a sample application in which i am copying Facebook screens in order to practice auto layouts. When I run login screen in portrait mode, it looks perfect.

The problem is as soon as the orientation changes to landscape, all the views collapse because of header image, as shown here

What i want is that, in landscape mode, header image disappears so that other views get its space. I don't want to use scrollview.

I tried this:

headerImageView.isHidden = true

But the result came out to be this The imageview got disappeared but didn't leave its space. Can anyone suggest me a good solution?

P.s Sorry for the images being this way because of my reputation.

Answer 1

When using Auto Layout you can leverage Size Classes. See description below or example here: https://github.com/jonaszmclaren/AutolayoutExample

Set image view for compact width and height (wC hC - iPhone in landscape) and for wR hC (iPhone Plus in landscape) to not installed:

Constraint between text field and image view not enabled for wC hC and wR hC:

And finally for wC hC and wR hC you have to define text fields's top contraint - I did it to the top of the view.

This way, image view for portait will be visible and text view pinned to image view, and in landscape image view will be hidden and text field pinned to top of the view.