iOS 布局约束 : pin to bottom or flow with content when content reaches bottom

Question

我有一个带有垂直堆栈 View 的 UIScrollView，它有一个标签和一个按钮，我希望按钮停留在屏幕底部，一旦标签的文本增加并到达按钮，按钮将保留在标签下方，并且它们一起滚动。

我在想:

let lableFit = self.label.systemLayoutSizeFitting(targetSize)
let buttonFit = self.button.systemLayoutSizeFitting(targetSize)

if labelFit.height + buttonFit.height > contentHeight {
    button.bottomAnchor.constrain(equalTo:scrollView.contentLayoutGuide.bottomAnchor)
} else {
    button.bottomAnchor.constrain(equalTo:scrollView.frameLayoutGuide.bottomAnchor)
}

这行得通吗？适合标签和按钮的目标尺寸应该是多少？

谢谢!

Answer 1

听起来你想要这个:

我们要这样设置:

我们需要配置堆栈 View 以在标签和按钮之间留出可变数量的空白空间。我们可以通过将堆栈 View 的“Distribution”设置为“Equal Spacing”来做到这一点。然后将堆栈 View 的“间距”设置为标签和按钮之间所需的最小填充量。我在演示中将其设置为 12。

一旦我们有了 View 层次结构，我们就需要创建适当的约束。让我们以不同的方式重申您的目标:我们希望堆栈 View (包含标签和按钮)至少与屏幕一样高。我们需要什么约束？

ScrollView 总是需要在它的所有四个边缘和它的 child 之间有约束，因为这些约束告诉 ScrollView 如何设置它的contentSize。在这种情况下，我们可以将 ScrollView 的四个边缘约束到堆栈 View 的相应边缘。这些是屏幕截图中的“Stack View.xxx = xxx”和“xxx = Stack View.xxx”约束。

我们还需要告诉堆栈 View 有多大。我们不能通过堆栈 View 和 ScrollView 之间的约束来做到这一点，因为它们只会影响 ScrollView 的 contentSize。相反，我们将堆栈 View 限制为 Root View 。

我们希望堆栈 View 与屏幕一样宽，因此我们将堆栈 View 的宽度限制为等于 Root View 安全区域的宽度。这是“Stack View.width = Safe Area.width”约束。

我们希望堆栈 View 至少与屏幕一样高，但我们希望允许它更高，因此我们将堆栈 View 的高度限制为大于或等于根查看安全区域的高度。这就是“Stack View.height ≥ Safe Area.height”约束。

我们希望 ScrollView 填满屏幕，因此我们将其边缘限制在 Root View 安全区域的边缘。这些是屏幕截图中的“Safe Area.xxx = Scroll View.xxx”约束。

为确保标签适本地包装其文本，请将标签的宽度限制为等于堆栈 View 的宽度。这是屏幕截图中的“Label.width = width”约束。

您还应该设置标签和按钮的内容大小优先级，如下所示:

Content Hugging Priority
    Horizontal: 800
    Vertical: 800
Content Compression Resistance Priority
    Horizontal: 1000
    Vertical: 1000

这将确保标签和按钮都不会被不当拉伸(stretch)或挤压。

为了演示，我将 Storyboard连接到这个 View Controller :

import UIKit

class ViewController: UIViewController {

    @IBOutlet var label: UILabel!
    @IBOutlet var scrollView: UIScrollView!

    @IBAction func buttonWasTapped() {
        label.text = (label.text ?? "") + "\n\nhere is\nmore text\nfor demo\npurposes"
        scrollView.layoutIfNeeded()
        scrollView.scrollRectToVisible(CGRect(x: 0, y: scrollView.contentSize.height - 1, width: 1, height: 1), animated: true)
    }

}