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

Posted 2023-03-15

【中文标题】在自动布局中方向更改为横向时隐藏视图

【英文标题】：Hiding a view when orientation changes to landscape in autolayouts

【发布时间】：2017-09-15 05:56:45

【问题描述】：

我正在创建一个示例应用程序，我在其中复制 Facebook 屏幕以练习自动布局。 当我以纵向模式运行登录屏幕时，它看起来很完美。

问题是一旦方向变为横向，所有视图都会因为标题图像而崩溃，as shown here

我想要的是，在横向模式下，标题图像会消失，以便其他视图获得它的空间。我不想使用滚动视图。

我试过了：

headerImageView.isHidden = true

但结果是this imageview 消失了，但没有离开它的空间。 谁能给我一个好的解决方案？

附注 对不起，由于我的声誉，图像是这样的。

【问题讨论】：

我认为......如果你使用约束......而不是隐藏headerImageview，请将headerImageView的高度约束设置为零，看看它是否有效。

它不工作。

【参考方案1】：

使用自动布局时，您可以利用大小类。 请参阅下面的说明或此处的示例：https://github.com/jonaszmclaren/AutolayoutExample

将紧凑型宽度和高度（wC hC - iPhone 横向）和 wR hC（iPhone Plus 横向）的图像视图设置为未安装：

没有为 wC hC 和 wR hC 启用文本字段和图像视图之间的约束：

最后，对于 wC hC 和 wR hC，您必须定义文本字段的顶部约束 - 我在视图顶部做了。

这样，肖像的图像视图将可见，文本视图固定到图像视图，横向图像视图将被隐藏，文本字段固定到视图顶部。

【讨论】：

我没有任何 wC hC 选项。 :( 我正在开发 Xcode 8。

是的，你有。选择所需的约束，然后在“已安装”旁边的大小检查器中，有一个小“+”，您可以在其中定义新的变体。

您的解决方案产生了一些变化，但现在的结果是这样 :(

AutoLayout 很难取悦，但这应该是公认的答案。

我会投票，但我不能，没有足够的声誉：/ @jonaszmclaren

【参考方案2】：

最好的方法是在这种类型的场景中使用scrollView。如果您不想拥有滚动视图，那么您必须为最后一个按钮提供底部约束，并将该特定约束的优先级设置为低。它适用于当前屏幕（横向和纵向），但是当您使用小屏幕（即 4s 或 5）时，自动布局的目的将失败。

【参考方案3】：

如果您隐藏图像，它只会不向用户显示，但屏幕上的图像将使用空间。更好的方法是当方向更改为横向时，您可以设置图像 0 的高度。您可以创建图像高度约束的出口并根据方向改变它。该方法在方向改变之前调用。您需要创建图像的高度约束。

@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
                
            

【讨论】：

仍然没有效果。图像仍然占用相同的空间。

尝试我在回答中更新的新代码，它可以工作。我已经检查过了。

imageview 的初始高度应该是多少？在故事板中？我应该对高度使用哪个约束？

您可以根据需要设置初始高度。在这里，我将 Port Trait 模式设置为 100，并在方向更改时将其更改为 0。在 Storybord 中，您可以在任何控件上添加高度约束，并将其设置为初始值的常量值。您只需要添加高度约束并将其过期以在视图控制器中使用。

现在完美运行。非常感谢你:)

【参考方案4】：

isHidden 只会改变视图的可见性。它不会将其从该位置移除。为了解决这个问题创建一个header view的高度约束出口，并在方向改变时将其更改为0。

例如：

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

并在纵向模式下恢复它再次设置高度。

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

【参考方案5】：

另一种选择是将您的视图放在堆栈视图中。然后隐藏 headerImageView 应该恢复未使用的空间。