Question

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

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

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

我想要瞄准的是，我想让底部UIImageViews成为包含UITextView的{{1}}，以保持其位置直接对齐{{1}以下从最高处的顶部开始。

无论UITextView身高增长多久，我希望它就像那样。

以下是我的CustomView.xib的屏幕截图。

它应该看起来像这样：

或者像这样：

Answer 1

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

堆栈视图非常棒，但在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."
    }

}

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

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

Answer 2

你将从顶部和左边和右边添加上层堆栈约束0,0,0，从底部和左边和右边添加底层堆栈0,0,0 enter image description here

并且约束2个堆栈 enter image description here

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

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

2 个答案: