UIScrollview 不显示所有子视图且不可滚动

Question

我在使用滚动视图时遇到了一些问题。我用简单的 UIViews 向我的 ViewController 添加了一个 ScrollView。但是 ScrollView 不会滚动，也不会显示我所有的子视图。

我遵循了这个示例IOS swift scrollview programmatically，但不知何故我的代码不起作用。这是我的例子

import UIKit
class StatisticsViewController: UIViewController{ 

    let scrollView: UIScrollView = {
        let view = UIScrollView()
        view.backgroundColor = UIColor.lightGray.adjust(by: 28)
        view.translatesAutoresizingMaskIntoConstraints = false
        return view
    }()

    let topstatsView: UIView = {
        let view = UIView()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.backgroundColor = .red
        return view
    }()

    let resultsView: UIView = {
         let view = UIView()
         view.translatesAutoresizingMaskIntoConstraints = false
         view.backgroundColor = .systemPink
         return view
     }()

    let blue: UIView = {
        let view = UIView()
        view.backgroundColor = .blue 
        view.translatesAutoresizingMaskIntoConstraints = false
        return view
    }()

    let yellow: UIView = {
        let view = UIView()
        view.backgroundColor = .yellow
        view.translatesAutoresizingMaskIntoConstraints = false
        return view
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
    self.view.addSubview(scrollView)

    // constraints of scroll view
    scrollView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
    scrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
    scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
    scrollView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true


    scrollView.addSubview(topstatsView)
    scrollView.addSubview(resultsView)
    scrollView.addSubview(blue)
    scrollView.addSubview(yellow)

    NSLayoutConstraint.activate([
        topstatsView.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 40),
        topstatsView.leftAnchor.constraint(equalTo: scrollView.leftAnchor, constant: 30),
        topstatsView.heightAnchor.constraint(equalToConstant: 250),
        topstatsView.rightAnchor.constraint(equalTo: scrollView.rightAnchor)
    ])

    NSLayoutConstraint.activate([
        resultsView.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 330),
        resultsView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 30),
        resultsView.heightAnchor.constraint(equalToConstant: 400),
        resultsView.widthAnchor.constraint(equalToConstant: 450)
    ])

    NSLayoutConstraint.activate([
        blue.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 330),
        blue.leftAnchor.constraint(equalTo: resultsView.rightAnchor, constant: 20),
        blue.heightAnchor.constraint(equalToConstant: 400),
        blue.rightAnchor.constraint(equalTo: scrollView.rightAnchor, constant: -30)
    ])


     NSLayoutConstraint.activate([
         yellow.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 800),
         yellow.leadingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: 20),
         yellow.heightAnchor.constraint(equalToConstant: 400),
         yellow.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: -30)
     ]) 
}

这是我的示例的屏幕截图。

如您所见，红色视图 (topstatsView) 没有确认正确的锚点，您看不到黄色和蓝色的。而且它不可滚动。我无法看到我的错误。提前致谢！

Answer 1

在这里你定义了错误的约束。

1) 始终添加与每个视图顶部、底部、前导和尾随相关的约束，而不是将所有视图的顶部约束定义到滚动视图。

2) 当您已经定义了宽度锚时，添加前导和尾随锚并不是一个好习惯。

3) 添加与滚动视图底部相关的底部约束，使其可滚动。

4) 添加与 outerView 相关的前导和尾随约束，而不是添加与滚动视图相关的约束。

这是更新后的代码：-

类 StatisticsViewController: UIViewController{

let scrollView: UIScrollView = {
    let view = UIScrollView()
    view.backgroundColor = UIColor.lightGray
    view.translatesAutoresizingMaskIntoConstraints = false
    return view
}()

let topstatsView: UIView = {
    let view = UIView()
    view.translatesAutoresizingMaskIntoConstraints = false
    view.backgroundColor = .red
    return view
}()

let resultsView: UIView = {
    let view = UIView()
    view.translatesAutoresizingMaskIntoConstraints = false
    view.backgroundColor = .systemPink
    return view
}()

let blue: UIView = {
    let view = UIView()
    view.backgroundColor = .blue
    view.translatesAutoresizingMaskIntoConstraints = false
    return view
}()

let yellow: UIView = {
    let view = UIView()
    view.backgroundColor = .yellow
    view.translatesAutoresizingMaskIntoConstraints = false
    return view
}()

override func viewDidLoad() {
    super.viewDidLoad()
    self.view.addSubview(scrollView)

    // constraints of scroll view
    scrollView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
    scrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
    scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
    scrollView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true


    scrollView.addSubview(topstatsView)
    scrollView.addSubview(resultsView)
    scrollView.addSubview(blue)
    scrollView.addSubview(yellow)

    NSLayoutConstraint.activate([
        topstatsView.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 40),
        topstatsView.leftAnchor.constraint(equalTo: self.view.leftAnchor, constant: 30),
        topstatsView.heightAnchor.constraint(equalToConstant: 250),
        topstatsView.rightAnchor.constraint(equalTo: self.view.rightAnchor, constant: -30)
    ])

    NSLayoutConstraint.activate([
        resultsView.topAnchor.constraint(equalTo: topstatsView.bottomAnchor, constant: 30),
        resultsView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 30),
        resultsView.heightAnchor.constraint(equalToConstant: 400),
        resultsView.rightAnchor.constraint(equalTo: self.view.rightAnchor, constant: -30)
    ])

    NSLayoutConstraint.activate([
        blue.topAnchor.constraint(equalTo: resultsView.bottomAnchor, constant: 30),
        blue.leftAnchor.constraint(equalTo: self.view.leftAnchor, constant: 20),
        blue.heightAnchor.constraint(equalToConstant: 400),
        blue.rightAnchor.constraint(equalTo: self.view.rightAnchor, constant: -30)
    ])


    NSLayoutConstraint.activate([
        yellow.topAnchor.constraint(equalTo: blue.bottomAnchor, constant: 30),
        yellow.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 20),
        yellow.heightAnchor.constraint(equalToConstant: 400),
        yellow.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: -30),
        yellow.bottomAnchor.constraint(equalTo: self.scrollView.bottomAnchor, constant: -20)
    ])
}

}