将两个 ViewController 容器约束在一起以填满屏幕答案

【问题标题】：Constraining two ViewController containers together to fill the screen将两个 ViewController 容器约束在一起以填满屏幕
【发布时间】：2020-04-01 01:59:53
【问题描述】：

我想在父视图中有两个视图。一个视图应该是其内容的确切大小，然后第二个视图填充剩余的空间。

我在 iOS 故事板中有以下设置：

我的主 ViewController 有两个 ViewController 容器，一个在另一个之上。

底部的 ViewController 旨在具有由其内容确定的静态高度。在这种情况下，它有一个带有顶部、底部和尾随约束的按钮。因此，如果您知道按钮的高度，您应该能够确定底部 ViewController 的高度。

顶部的 ViewController 旨在是可变的 - 它有一个按钮被限制在其父视图的中间中心。无论父视图的高度或宽度如何，内部按钮都将始终居中。

在主 ViewController 中，顶视图控制器被限制在主视图的顶部和侧面，而底视图控制器被限制在主视图的底部和侧面。然后，顶视图的底部和底视图的顶部相互约束。这会中断，因为 iOS 会尝试在底部视图之前确定主视图的大小（或类似的东西）。

我怎样才能让底视图等于其内容的高度，并让顶视图填充剩余的空间？

【问题讨论】：

标签： ios swift uikit uistoryboard

【解决方案1】：

仅使用情节提要无法做到这一点...您需要添加一些代码。

首先，在 Storyboard/Interface Builder 中：

约束底部容器以查看（安全区域）前导/尾随/底部
给它一个高度约束——这个值在这一点上并不重要，只是为了让你看到大致的布局
给出高度约束Priority: Low (250)。这将允许它根据其嵌入视图的自动布局大小来增长/缩小。
约束顶部容器以查看（安全区域）顶部/前导/尾随
将顶部容器的底部约束到底部容器的顶部

当您添加容器视图时，IB 会自动为您提供“默认”视图控制器，并设置为容器的大小。使用 Attributes 和 Size 检查器窗格将“Simulated Metrics”和 Size 更改为 Freeform。这允许您以您想要的大小处理“子视图控制器”。

这是它的外观示例：

在UIContainerView 中嵌入视图控制器时，会自动创建“嵌入转场”，您可以在prepare(for segue: ...) 中获取对“子”视图控制器（及其视图）的引用。使用它来获取对视图的引用，以便您可以修改它们的约束。

所以您的 viewDidLoad() 函数将包含如下内容：

    // a View Controller's "root" view loads with
    //      .translatesAutoresizingMaskIntoConstraints = true
    // but we want to let auto-layout change it
    topVCView.translatesAutoresizingMaskIntoConstraints = false
    botVCView.translatesAutoresizingMaskIntoConstraints = false

    NSLayoutConstraint.activate([

        // constrain all 4 sides of top view to top container
        //  because the Top container view has a Priority: 1000 height constraint,
        //  this will "fit" the top VC's view into the auto-layout sized top container
        topVCView.topAnchor.constraint(equalTo: topContainerView.topAnchor),
        topVCView.bottomAnchor.constraint(equalTo: topContainerView.bottomAnchor),
        topVCView.leadingAnchor.constraint(equalTo: topContainerView.leadingAnchor),
        topVCView.trailingAnchor.constraint(equalTo: topContainerView.trailingAnchor),

        // constrain all 4 sides of bottom view to bottom container
        //  because the Bottom container view has a Priority: 250 height constraint,
        //  the auto-layout height of the Bottom VC's view will determine the height of the bottom container
        botVCView.topAnchor.constraint(equalTo: bottomContainerView.topAnchor),
        botVCView.bottomAnchor.constraint(equalTo: bottomContainerView.bottomAnchor),
        botVCView.leadingAnchor.constraint(equalTo: bottomContainerView.leadingAnchor),
        botVCView.trailingAnchor.constraint(equalTo: bottomContainerView.trailingAnchor),

    ])

这是一个如何看待运行时的示例：

在 GitHub 上有另一个“自动调整大小的容器视图”示例，所以我将您的布局添加到第二个示例中。你可以在这里得到它，所以你可以检查布局、约束和代码（并运行它来查看结果）：https://github.com/DonMag/AutosizeContainer

【讨论】：