UIStackView 在旋转时隐藏视图和不满意的布局

Question

我有一个视图控制器，我想在其中隐藏某些子视图、标签等，具体取决于特征集合是什么。例如，我在水平压缩时想要隐藏的侧面有标签，在垂直压缩时我想隐藏顶部和底部的标签。

因为我想隐藏界面的整个部分，所以听起来像 UIStackView 会让这更容易。同样，我正在尝试在 Interface Builder / Xcode (9.1 9B55) 中而不是在代码中尽可能多地做，以尽量保持简单。

设计的主要元素是棋盘，它：

• 长宽比始终为 1:1
• 在视图中尽可能大

然后我想根据当前的特征集合移动和隐藏它周围的标签和其他项目。

我首先构建了一个水平堆栈视图，对齐方式和分布设置为“填充”。其中有两个项目，boardView（紫色）和 labelView（黄色）。

labelView 中有几个标签，在视图本身中为这些标签的布局设置了约束。

boardView 具有纵横比 1:1 (@1000) 的约束：

我为 Stack View 设置了以下约束，将其固定到超级视图（底部除外）：

• Safe Area.trailing = Stack View.trailing(@1000)
• 安全区域.领先 = 堆栈视图.领先 (@1000)
• Safe Area.top = Stack View.top(@1000)
• Safe Area.bottom >= Stack View.bottom(@1000)

我设置了这些约束以确保 boardView 永远不会溢出超级视图：

• boardView.width <= 安全区域.width (@1000)
• boardView.height <= Safe Area.height (@1000)

然后我将这些约束设置为较低的优先级，以便在可能的情况下，宽度或高度将扩展以填充超级视图（但不会溢出，因为这些优先级低于上述优先级）：

• boardView.width = 安全区域.width (@250)
• boardView.height = 安全区域.height (@250)

这一切似乎都很好。Xcode 中没有错误，应用程序的行为与我预期的一样，无论是纵向还是横向（这些屏幕截图来自 iPhone 8 模拟器）：

当我试图隐藏正确的视图时，问题就来了。当我们垂直处于常规模式时，我试图通过隐藏 nameView 来做到这一点。我选择 nameView，单击 Installed 复选框旁边的 +，选择 hR：

然后取消选中 hR 的已安装框：

这在 Xcode 中看起来很棒。没有错误，IB 似乎在横向和纵向（隐藏名称标签）中都显示了我所期望的所有视图：

到现在为止还挺好。事实上，当我运行它时，它看起来就像我们最初预期的那样。如果我们在景观中启动模拟器，它看起来不错：

如果我们以纵向模式启动模拟器，它看起来不错：

所以有什么问题？好吧，一旦我们从纵向旋转到横向，布局就完全错误了：

同时，我们在控制台中得到一个 LayoutConstraints 错误：

2017-12-03 19:25:55.710381-0600 TestLayoutSIngleView[31439:3231004] [LayoutConstraints] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want. 
    Try this: 
        (1) look at each constraint and try to figure out which you don't expect; 
        (2) find the code that added the unwanted constraint or constraints and fixes it. 
(
    "<NSLayoutConstraint:0x60400009b8a0 UIView:0x7fe920603e90.width == UIView:0x7fe920603e90.height   (active)>",
    "<NSLayoutConstraint:0x60000009ced0 UIStackView:0x7fe92050bd70.leading == UILayoutGuide:0x6000001b5d20'UIViewSafeAreaLayoutGuide'.leading   (active)>",
    "<NSLayoutConstraint:0x60000009d100 UIStackView:0x7fe92050bd70.top == UILayoutGuide:0x6000001b5d20'UIViewSafeAreaLayoutGuide'.top   (active)>",
    "<NSLayoutConstraint:0x60000009d150 UILayoutGuide:0x6000001b5d20'UIViewSafeAreaLayoutGuide'.trailing == UIStackView:0x7fe92050bd70.trailing   (active)>",
    "<NSLayoutConstraint:0x60000009d1a0 UILayoutGuide:0x6000001b5d20'UIViewSafeAreaLayoutGuide'.bottom >= UIStackView:0x7fe92050bd70.bottom   (active)>",
    "<NSLayoutConstraint:0x60000009e5a0 'UISV-canvas-connection' UIStackView:0x7fe92050bd70.leading == UIView:0x7fe920603e90.leading   (active)>",
    "<NSLayoutConstraint:0x60000009ce30 'UISV-canvas-connection' UIStackView:0x7fe92050bd70.top == UIView:0x7fe920603e90.top   (active)>",
    "<NSLayoutConstraint:0x60000009e5f0 'UISV-canvas-connection' V:[UIView:0x7fe920603e90]-(0)-|   (active, names: '|':UIStackView:0x7fe92050bd70 )>",
    "<NSLayoutConstraint:0x60000009cde0 'UISV-canvas-connection' H:[UIView:0x7fe920603e90]-(0)-|   (active, names: '|':UIStackView:0x7fe92050bd70 )>",
    "<NSLayoutConstraint:0x60000009e7d0 'UIView-Encapsulated-Layout-Height' UIView:0x7fe92050b8f0.height == 375   (active)>",
    "<NSLayoutConstraint:0x60000009e780 'UIView-Encapsulated-Layout-Width' UIView:0x7fe92050b8f0.width == 667   (active)>",
    "<NSLayoutConstraint:0x60000009d060 'UIViewSafeAreaLayoutGuide-bottom' V:[UILayoutGuide:0x6000001b5d20'UIViewSafeAreaLayoutGuide']-(0)-|   (active, names: '|':UIView:0x7fe92050b8f0 )>",
    "<NSLayoutConstraint:0x60000009d010 'UIViewSafeAreaLayoutGuide-left' H:|-(0)-[UILayoutGuide:0x6000001b5d20'UIViewSafeAreaLayoutGuide'](LTR)   (active, names: '|':UIView:0x7fe92050b8f0 )>",
    "<NSLayoutConstraint:0x60000009d0b0 'UIViewSafeAreaLayoutGuide-right' H:[UILayoutGuide:0x6000001b5d20'UIViewSafeAreaLayoutGuide']-(0)-|(LTR)   (active, names: '|':UIView:0x7fe92050b8f0 )>",
    "<NSLayoutConstraint:0x60000009cfc0 'UIViewSafeAreaLayoutGuide-top' V:|-(0)-[UILayoutGuide:0x6000001b5d20'UIViewSafeAreaLayoutGuide']   (active, names: '|':UIView:0x7fe92050b8f0 )>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x60400009b8a0 UIView:0x7fe920603e90.width == UIView:0x7fe920603e90.height   (active)>

我喜欢使用 UIStackView 使自动布局和隐藏视图更容易的想法。但是，如果我在 Xcode 中看到的内容在编译和运行时不起作用，那么这似乎会很棘手。

我做错了什么（或者我遇到了 Xcode 错误）？

我创建了一个演示上述内容的 GitHub 项目：https : //github.com/johnstewart/TestLayoutSIngleView

编辑....当我写完以上所有内容时，我突然想到，如果我们在横向模式下隐藏此视图，则布局将无法满足...但我并没有隐藏此视图在风景中，只有肖像。出于某种原因，iOS 在旋转之前对布局进行了更改。

如果我将优先级从 1000 设置为 750：

• Safe Area.trailing = Stack View.trailing(@1000)

...我在控制台上没有收到任何自动布局错误。但是，旋转后的风景视图根本没有在正确的位置上放置东西。

就好像堆栈视图在开始从纵向到横向的旋转时立即缩小，并在旋转完成后将堆栈视图留在缩小状态，即使现在有足够的空间：

我真诚地希望我在这里遗漏了一些明显的东西……否则我看不到使用 UIStackView 卸载基于特征集合的视图是如何可行的；这似乎是一个简单的例子（确实如此；我还有很多东西要添加！）

编辑：

我看到这种技术的 WWDC 视频来自 WWDC2017，Interface Builder 中的 Auto Layout Techniques ( https://developer.apple.com/videos/play/wwdc2017/412/ )。演示从 29:00 开始。

但是，我不正确的是，它是用于此目的的“已安装”属性。正如接受的答案所表明的那样，“隐藏”是这样做的方法。

Answer 1

我认为你可以在没有“已安装”属性的情况下实现你想要的：只需为纵向模式设置“隐藏”：