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

Question

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

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

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

我的目标是让包含 UIImageViews 的底部 UIStackView 保持在 [= 下方直接对齐的位置14=] 从高度最高的顶部开始。

无论UITextView身高长多长，我都希望它是那样。

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

它应该调查这样的事情：

或者像这样：

Answer 1

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

2 个堆栈之间的约束将是

，或者您可以使用宽度相等的 4uiview

Answer 2

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

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

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

对于您的 "parent" 垂直 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 在这里让我们失望了。因此，给 left-side 文本视图一个高度约束——你使用什么并不重要（我使用的高度为 160）。关键是将该约束的优先级设置为低 (250)。这将在设计期间将其固定并满足 IB，但不会阻止文本视图从 auto-sizing 到其内容。

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

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

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

}

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

注意：此时，您甚至可以编辑文本视图，当您编辑它们时，它们的高度将auto-adjust添加/删除足够的文本以更改换行！

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

Keep UIStackView to be positioned exactly below, top UIStackView inside a proportional UIStackView

uitextview

uiimageview

ios

autolayout

uistackview