UIScrollview не показывает все подпредставления и не прокручивается

Question

У меня проблемы с просмотром прокрутки. Я добавил ScrollView в свой ViewController с помощью простых UIView. Но ScrollView не прокручивается и не отображает все мои подвиды.

Я последовал этому примеру IOS программно * swift scrollview , но почему-то мой код не работает. Вот мой пример

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) Всегда добавляйте ограничения, относящиеся к каждому виду сверху, снизу, впереди и в конце, вместо того, чтобы определять верхнее ограничение для всех представлений в scrollview.

2) Не рекомендуется добавлять и ведущую, и конечную привязку, когда вы уже определяете привязку ширины.

3) Добавьте нижнее ограничение, связанное с нижней частью прокрутки, чтобы сделать ее прокручиваемой.

4) Добавьте ведущее и конечное ограничение, связанное с outerView, вместо добавления его, связанного с scrollview.

Вот обновленный код: -

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

}