将UIStackView保持在正下方，顶部UIStackView位于比例UIStackView内

Question

我有一个很大的CustomView，我在它上定位了一个父UIStackView来包含两个UIStackView。

这些UIStackView中的每一项都被设置为包含两个项，每个项都要相同地填充。

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

我的目标是让底部的UIStackView，这是一个包含UIImageViews的位置，以保持它的位置直接对齐在UITextView的顶部有最高的高度。

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

这是我的CustomView.xib的截图。

​

它应该研究这样的事情：

​

​

或者像这样：

​

​

Answer 1

你很接近你想要的-只是一些改变.

堆栈视图很棒，只不过在Storyboard / Interface中进行设计时，它们的行为并不总是很好。在这种情况下，要获得所需的结果，文本视图必须禁用滚动。不幸的是，当你这么做的时候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在设计期间，但不会阻止文本视图自动调整到其内容。

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

​

​

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

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

}

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

​

注意：在这里，您甚至可以编辑文本视图，当您添加/删除足够的文本以更改行包装时，它们的高度将自动调整！

Answer 2

您将从上、上、左、右向上堆栈添加0，0，0，0，以及从底部和左、右添加0，0，0。

​

两个堆栈之间的约束将是

​

，也可以使用宽度相等的4 4uiview。