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

听起来像您想要这样：

我们将像这样设置它：

我们需要配置堆栈视图以在标签和按钮之间留出一定数量的空白空间。我们可以通过将堆栈视图的“分布”设置为“相等间距”来实现。然后将堆栈视图的“间距”设置为标签和按钮之间所需的最小填充量。我将其演示设置为12。

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

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

我们还需要告诉堆栈视图有多大。我们不能使用堆栈视图和滚动视图之间的约束来执行此操作，因为这些约束只会影响滚动视图的contentSize。相反，我们将堆栈视图限制为根视图。

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

我们希望堆栈视图的高度至少等于屏幕的高度，但我们希望允许其更高，因此我们将堆栈视图的高度限制为大于或等于屏幕的高度。根视图安全区域的高度。这是“堆栈View.height≥安全区域.height”约束。

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

要确保标签正确包装其文本，请将标签的宽度限制为等于堆栈视图的宽度。这是屏幕截图中的“ Label.width = 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)
    }

}