UIScrollview不显示所有的子视图，并且不能滚动。

Question

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

我按照这个例子来做 IOS快速滚动视图编程 但不知为何，我的代码无法工作。下面是我的例子

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) 添加与外部视图相关的前导和尾部约束，而不是添加与滚动视图相关的约束。

以下是更新后的代码：-

class StatisticsViewController.UIViewController 类 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)
    ])
}

}