ios - Swift:我无法使自动布局约束适用于我的 UIScrollView

Question

我正在尝试制作一个简单的布局，当 View 太多无法显示在屏幕上时应该垂直滚动。

这就是我目前所拥有的:

我创建了一个 ScrollView 和一个容器 View

let mainScrollView: UIScrollView = {

    let scrollView = UIScrollView()

    scrollView.isUserInteractionEnabled = true
    scrollView.translatesAutoresizingMaskIntoConstraints = false

    return scrollView
}()

let containerView: UIView = {

    let view = UIView()

    view.backgroundColor = .lightGray
    view.translatesAutoresizingMaskIntoConstraints = false

    return view
}()

然后我将 ScrollView 添加到主视图，将容器 View 添加到 ScrollView ，并将几个标签添加到容器 View

view.addSubview(mainScrollView)
mainScrollView.addSubview(containerView)

containerView.addSubview(firstLabel)
containerView.addSubview(secondLabel)

我将 ScrollView 固定到主视图，将容器 View 固定到 ScrollView 。之后我开始像这样在容器 View 中添加标签

mainScrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
mainScrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
mainScrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
mainScrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true

containerView.topAnchor.constraint(equalTo: mainScrollView.layoutMarginsGuide.topAnchor).isActive = true
containerView.bottomAnchor.constraint(equalTo: mainScrollView.layoutMarginsGuide.bottomAnchor).isActive = true
containerView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
containerView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true

firstLabel.centerXAnchor.constraint(equalTo: containerView.centerXAnchor).isActive = true
firstLabel.topAnchor.constraint(equalTo: containerView.topAnchor, constant: 30).isActive = true
firstLabel.widthAnchor.constraint(equalToConstant: 50).isActive = true
firstLabel.heightAnchor.constraint(equalToConstant: 20).isActive = true

secondLabel.centerXAnchor.constraint(equalTo: containerView.centerXAnchor).isActive = true
secondLabel.topAnchor.constraint(equalTo: firstLabel.bottomAnchor, constant: 750).isActive = true
secondLabel.widthAnchor.constraint(equalToConstant: 50).isActive = true
secondLabel.heightAnchor.constraint(equalToConstant: 20).isActive = true

问题是由于某种原因，scrollview 无法计算它的高度并且它不会垂直滚动。第二个标签仍然不可见，因为它在屏幕上太“低”了。

我尝试将容器 View 的底部约束设置为第二个标签的底部，但老实说我无处可去。

我错过了什么？如何设置约束以使 ScrollView 使用自动布局滚动(无需设置容器 View 的特定高度)？

Answer 1

Scrollview 向任一方向滚动。所以任何添加到它的 View 都需要一些额外的约束来让 Scrollview 计算它的内容大小。

您已将容器 View 固定到 ScrollView 。如果您正在查看像表格 View 这样的垂直 ScrollView ，那么您还需要将滚动的宽度设置为容器 View ，以便它可以计算宽度。

接下来是高度，它是根据容器 View 中添加的 UI 元素自动计算的。确保所有标签都具有前导、尾随容器和彼此之间以及容器 View 顶部的垂直间距。这将使 ScrollView 知道所需的高度。

    self.scrollView.translatesAutoresizingMaskIntoConstraints = false
    self.contentView.translatesAutoresizingMaskIntoConstraints = false
    self.label1.translatesAutoresizingMaskIntoConstraints = false
    self.label2.translatesAutoresizingMaskIntoConstraints = false
    self.label3.translatesAutoresizingMaskIntoConstraints = false

    self.contentView.addSubview(self.label1)
    self.contentView.addSubview(self.label2)
    self.contentView.addSubview(self.label3)

    self.scrollView.addSubview(self.contentView)
    self.view.addSubview(self.scrollView)

    NSLayoutConstraint.activate([
        self.scrollView.topAnchor.constraint(equalTo: self.view.topAnchor),
        self.scrollView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
        self.scrollView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor),
        self.scrollView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor)
    ])

    NSLayoutConstraint.activate([
        self.contentView.topAnchor.constraint(equalTo: self.scrollView.topAnchor),
        self.contentView.trailingAnchor.constraint(equalTo: self.scrollView.trailingAnchor),
        self.contentView.bottomAnchor.constraint(equalTo: self.scrollView.bottomAnchor),
        self.contentView.leadingAnchor.constraint(equalTo: self.scrollView.leadingAnchor),
        self.contentView.widthAnchor.constraint(equalTo: self.scrollView.widthAnchor)
    ])

    NSLayoutConstraint.activate([
        self.label1.leadingAnchor.constraint(equalTo: self.contentView.leadingAnchor),
        self.label2.leadingAnchor.constraint(equalTo: self.contentView.leadingAnchor),
        self.label3.leadingAnchor.constraint(equalTo: self.contentView.leadingAnchor),
        self.label1.trailingAnchor.constraint(equalTo: self.contentView.trailingAnchor),
        self.label2.trailingAnchor.constraint(equalTo: self.contentView.trailingAnchor),
        self.label3.trailingAnchor.constraint(equalTo: self.contentView.trailingAnchor)
    ])

    NSLayoutConstraint.activate([
        self.label1.topAnchor.constraint(equalTo: self.contentView.topAnchor),
        self.label2.topAnchor.constraint(equalTo: self.label1.bottomAnchor),
        self.label3.topAnchor.constraint(equalTo: self.label2.bottomAnchor),
        self.label3.bottomAnchor.constraint(equalTo: self.contentView.bottomAnchor)
    ])

并且在运行时，它也不会提示任何约束问题。水平滚动也可以这样做。