4

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.

Eric Aya
  • 69,473
  • 35
  • 181
  • 253
kinza
  • 535
  • 11
  • 31

5 Answers5

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:

enter image description here

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

enter image description here

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.

enter image description here

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.

jonaszmclaren
  • 2,459
  • 20
  • 30
1

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.

like I did

Vaibhav Parmar
  • 461
  • 4
  • 14
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
                }
            }

See in image, i point out for How set Height Constraint in image

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
0

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()
Martin
  • 846
  • 1
  • 9
  • 23
0

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

Alain T.
  • 40,517
  • 4
  • 31
  • 51