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.

I think.... If you are using constraints..... rather than hiding headerImageview, set height constraint of headerImageView to zero and see if it works. — Amit, Sep 15 '17 at 06:02

jonaszmclaren · Answer 1 · 2017-09-15T12:14:17.760

11

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.

edited Sep 15 '17 at 12:14

answered Sep 15 '17 at 06:15

jonaszmclaren

2,459
20
30

I am not having any wC hC options. :( I am working on Xcode 8. – kinza Sep 15 '17 at 06:21
3

Yes, you have. Select desired constraint, and in the Size inspector next to "Installed" there's a little "+", where you define new variation. – jonaszmclaren Sep 15 '17 at 06:24
your solution has produced some change but the result is this now :( – kinza Sep 15 '17 at 06:49
2

AutoLayout is a hard beast to please but this should be the accepted answer. – Morpheu5 Sep 15 '17 at 12:17
I would have up voted but i cannot, don't have enough reputation :/ @jonaszmclaren – kinza Sep 18 '17 at 05:40
Best answer on this topic. Thank you. – Jeff Jan 10 '18 at 02:28

score 1 · Answer 2 · answered Sep 15 '17 at 06:45

The best way is to use scrollView in such type of scenarios. If you don't want to have the scrollView, then you must give the bottom constraint for last button, and set the priority low of that particular constraint. It will work fine for current screen(both landscape and portrait), but when you'll go for small screen i.e 4s or 5, then purpose of auto layout will fail.

Hiren · Accepted Answer · 2017-09-15T07:26:22.470

0

If you hide the image than it will only not show to user But Space will be used by Image on screen. Better Approach is you can set the Height Of Image 0 when orientation change to Landscape. You can create the Outlet of Height Constraint of Image and Change it according to Orientation.This method is called before orintation change. You need to Create outlat of Height constraint of Image.

@IBOutlet var heightConstraint : NSLayoutConstraint!


       override func willRotate(to toInterfaceOrientation: UIInterfaceOrientation, duration: TimeInterval)
            {
                if toInterfaceOrientation == .landscapeLeft || toInterfaceOrientation == .landscapeRight{
    // Imageview height constraint outlate
                    heightConstraint.constant = 0
                }
                else{
                    heightConstraint.constant = 100
                }
            }

edited Sep 15 '17 at 07:26

answered Sep 15 '17 at 06:04

Hiren

240
1
14

Still no effect. The image is still taking the same space. – kinza Sep 15 '17 at 06:09
Try the New code which i update in answer, Its working. i had check it. – Hiren Sep 15 '17 at 07:05
what should be the initial height of the imageview? in storyboard? And which constraint should I use for the height? – kinza Sep 15 '17 at 07:18
You can set initial height as per your requirement. Here i Set 100 for Port Trait mode and change it to 0 when orientation change. In Storybord, You can add the Height constraint on any control and also set it constant value for initial value. You just need to Add height constraint and mack it outlate for use in view controller. – Hiren Sep 15 '17 at 07:20
1

Working perfectly now. Thankyou so much :) – kinza Sep 15 '17 at 07:26
Note that Apple has deprecated willRotateToInterfaceOrientation:duration:. It should be replaced with viewWillTransitionToSize:withTransitionCoordinator: . – Smartcat Mar 12 '21 at 23:08
Also, be sure to see @jonaszmclaren better solution below if you're using storyboard or xib. – Smartcat Mar 12 '21 at 23:34

score 0 · Answer 4 · answered Sep 15 '17 at 06:24

isHidden will just changed the visibility of the view. It will not remove it from that position. To solve this issue create a outlet of height constraint of header view and changed it to 0 on orientation change.

ex:

headerViewHeightConstraint.constant = 0.0
self.view.layoutIfNeeded()

and to restore it on portrait mode set height again.

headerViewHeightConstraint.constant = // height value which you want to set
self.view.layoutIfNeeded()

score 0 · Answer 5 · answered Sep 15 '17 at 14:04

0

Another option could be to place your view inside a stack view. Then hiding the headerImageView should recover the unused space.

answered Sep 15 '17 at 14:04

Alain T.

40,517
4
31
51

Hiding a view when orientation changes to landscape in autolayouts

5 Answers5