iOS 布局约束：固定到底部或内容到达底部时随内容流动

Question

我有一个带有垂直堆栈视图的 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

听起来你想要这个：

我们要这样设置：

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

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

滚动视图始终需要在其所有四个边及其子项之间进行约束，因为这些约束告诉滚动视图如何设置其 contentSize。在这种情况下，我们可以将滚动视图的四个边缘约束到堆栈视图的相应边缘。这些是屏幕截图中的“Stack View.xxx = xxx”和“xxx = Stack View.xxx”约束条件。

我们还需要告诉堆栈视图有多大。我们不能用堆栈视图和滚动视图之间的约束来做到这一点，因为它们只会影响滚动视图的 contentSize。相反，我们将堆栈视图限制为根视图。

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

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

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

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

您还应该按如下方式设置标签和按钮的内容大小优先级：

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

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

为了演示，我将故事板连接到这个视图控制器：

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)
    }

}

iOS 布局约束：固定到底部或内容到达底部时随内容流动

iOS layout constraint: pin to bottom or flow with content when content reaches bottom

uiscrollview

ios

nslayoutconstraint