保持 UIStackView 准确定位在 UIStackView 下方，按比例 UIStackView 内的顶部 UIStackView

Question

我有一个大的 CustomView，我在其上定位了一个父 UIStackView 以包含两个 UIStackViews。

这些UIStackView 中的每一个都设置为包含两个项目，每个项目均等填充。

第一个UIStackView 包含两个UITextView，而第二个包含两个UIImageView。

我的目标是让底部 UIStackView 包含 UIImageViews 以保持其位置从顶部直接对齐到 UITextView 下方最高的高度。

无论UITextView 的高度增长多久，我都希望它是这样的。

这是我的 CustomView.xib 的屏幕截图。

它应该看起来像这样：

或者像这样：

Answer 1

您将添加到上堆栈约束 0 , 0 , 0 从顶部和左侧和右侧，底部堆栈 0, 0 ,0 从底部和左侧和右侧

和 2 堆栈之间的约束将是

，或者你可以使用等宽的 4uiview

Answer 2

您已经接近您想要的 - 只需进行一些更改...

堆栈视图很棒，但在 Storyboard / Interface Builder 中设计它们时它们并不总是表现良好。在这种情况下，要获得您想要的结果，文本视图必须禁用滚动。不幸的是，当你这样做时，IB 会发疯。

因此，您必须在设计视图时开始启用滚动，然后在加载视图时通过代码禁用它。

对于您的“父”垂直UIStackView，将其限制为前缘、顶部和后缘 - 没有底部或高度限制。将其设置为Alignment: Fill、Distribution: Fill，这样在文本和图像之间就有了一点垂直缓冲区Spacing: 10。

包含您的文本视图的水平UIStackView 应该是Alignment: Fill、Distribution: Fill Equally 和Spacing: 8。

包含您的图像视图的水平UIStackView 应该是Alignment: Top、Distribution: Fill Equally 和Spacing: 8。给每个图像视图一个适当的纵横比约束——在下图中，图像是200x300 像素，所以我将比率设置为2:3。

IB 还会抱怨堆栈视图需要对 Y 位置或高度进行约束。这不是真的正确，但 IB 在这里让我们失望了。所以，给左侧文本视图一个高度约束——你使用什么并不重要（我使用了 160 的高度）。关键是将该约束的优先级设置为低 (250)。这将在设计期间将其固定到位并满足 IB，但不会阻止文本视图根据其内容自动调整大小。

您的故事板现在应该如下所示（我将视图背景设置为蓝色，以便我们可以看到布局）：

现在，在您的视图控制器代码中，您需要这个：

class StackTVViewController: UIViewController {

    @IBOutlet var textViewLeft: UITextView!
    @IBOutlet var textViewRight: UITextView!

    override func viewDidLoad() {
        super.viewDidLoad()

        textViewLeft.isScrollEnabled = false
        textViewRight.isScrollEnabled = false

    }

}

当您运行应用程序时，您将看到以下结果：

现在，在viewDidLoad() 中再添加两行以更改文本视图中的文本：

class StackTVViewController: UIViewController {

    @IBOutlet var textViewLeft: UITextView!
    @IBOutlet var textViewRight: UITextView!

    override func viewDidLoad() {
        super.viewDidLoad()

        textViewLeft.isScrollEnabled = false
        textViewRight.isScrollEnabled = false

        textViewLeft.text = "The left-side text field now has short text."
        textViewRight.text = "Lorem ipsum dolor sit er elit lamet, consectetaur cillium adipisicing pecu, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
    }

}

并且，如果您正确设置了约束，您将看到：

注意：此时，您甚至可以编辑文本视图，当您添加/删除足够多的文本以更改换行时，它们的高度会自动调整！