ios - 保持 UIStackView 位于比例 UIStackView 内的正下方、顶部 UIStackView

Question

我有一个很大的 CustomView，我在上面放置了一个父 UIStackView 以包含两个 UIStackView。

每个 UIStackView 都设置为包含两个项目，每个项目均等填充。

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

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

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

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

它应该是这样的:

或者像这样:

Answer 1

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

Stack Views 很棒，除了在 Storyboard/Interface Builder 中设计它们时它们并不总是表现良好。在这种情况下，为了获得您想要的结果， TextView 必须禁用滚动。不幸的是，当您这样做时，IB 会发疯。

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

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

包含 TextView 的水平 UIStackView 应该是 Alignment: Fill、Distribution: Fill Equally 和 Spacing: 8.

包含 ImageView 的水平 UIStackView 应该是 Alignment: Top，Distribution: Fill Equally，Spacing: 8。为每个 ImageView 提供适当的宽高比约束 - 在下图中，图像为 200x300 像素，因此我将宽高比设置为 2:3。

IB 还会提示堆栈 View 需要 Y 位置或高度的约束。这并不完全正确，但 IB 在这方面让我们失望了。因此，给左侧 TextView 一个高度约束 - 使用什么并不重要(我使用的高度为 160)。关键是将该约束的优先级设置为低 (250)。这将在设计过程中将其固定到位并满足 IB，但不会阻止 TextView 根据其内容自动调整大小。

您的 Storyboard现在应该如下所示(我将 View 背景设置为蓝色，以便我们可以看到布局):

现在，在您的 View Controller 代码中，您需要:

class StackTVViewController: UIViewController {

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

    override func viewDidLoad() {
        super.viewDidLoad()

        textViewLeft.isScrollEnabled = false
        textViewRight.isScrollEnabled = false

    }

}

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

现在，在 viewDidLoad() 中添加两行来更改 TextView 中的文本:

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

}

并且，如果您正确设置了约束，您将看到以下内容:

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