在方向更改为自动布局中的横向时隐藏视图

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?

Ps 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.

Answer 2

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 ie 4s or 5, then purpose of auto layout will fail.

Answer 3

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
                }
            }

Answer 4

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()

Answer 5

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