UIScrollView Элемент не движется от фона

Question

Я настроил свои ограничения таким образом, чтобы при загрузке у меня была диаграмма, которая занимает экран, но вы можете прокрутить вниз, чтобы увидеть больше информации.Тем не менее, я вижу, как полоса прокрутки движется, а диаграмма не движется!

var scrollView: UIScrollView {
    let scroll = UIScrollView()
    self.view.addSubview(scroll)
    scroll.snp.makeConstraints { (make) in
        make.edges.equalTo(self.view)
    }
    return scroll

}
var contentView: UIView {
    let content = UIView()
    self.scrollView.addSubview(content)
    content.snp.makeConstraints { (make) in
        make.top.bottom.equalTo(self.scrollView)
        make.left.right.equalTo(self.view)
        make.width.equalTo(self.scrollView)
    }
    // self.scrollView.contentSize = content.frame.size
    return content
}
override func viewDidLoad() {
    super.viewDidLoad()
    self.contentView.addSubview(self.chart)

    self.chart.snp.makeConstraints { (make) in
        // http://snapkit.io/docs/
        // https://github.com/SnapKit/SnapKit/issues/448
        make.top.equalTo(self.contentView)
        make.left.right.equalTo(self.contentView)
        make.height.equalTo(self.view).offset(-(self.tabBarController?.tabBar.frame.height)!)
    }
    self.scrollView.contentSize = CGSize(width: self.view.frame.width, height: 3000) // Testing

}

Таким образом, полоса прокрутки перемещается, а содержимое - нет.

Answer 1

К сожалению, вы делаете несколько вещей неправильно.

Во-первых, когда вы используете эту конструкцию:

var scrollView: UIScrollView {
    let scroll = UIScrollView()
    self.view.addSubview(scroll)
    scroll.snp.makeConstraints { (make) in
        make.edges.equalTo(self.view)
    }
    return scroll
}

Каждый раз вы ссылаетесь на scrollView вы создаете другой экземпляр представления прокрутки.Запустив ваш код и используя Debug View Hierarchy, вы получите следующее:

Представления red - это scrollViews и представления blueявляются contentViews.Как видите, это определенно не , что вы хотите.

Вот пример того, как вы можете делать то, что вы пытаетесь сделать:

class ViewController: UIViewController {

    var scrollView: UIScrollView = {
        let scroll = UIScrollView()
        scroll.backgroundColor = .red
        return scroll

    }()

    var contentView: UIView  = {
        let content = UIView()
        content.backgroundColor = .blue
        return content
    }()

    var chart: UILabel = {
        let v = UILabel()
        v.numberOfLines = 0
        v.text = "This is the\nChart View"
        v.backgroundColor = .cyan
        v.textAlignment = .center
        return v
    }()

    var bottomLabel: UILabel = {
        let v = UILabel()
        v.text = "The Bottom Label"
        v.backgroundColor = .yellow
        v.textAlignment = .center
        return v
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        // add scrollView
        self.view.addSubview(scrollView)

        // constrain to safe area (so it doesn't extend below the tab bar)
        scrollView.snp.makeConstraints { (make) in
            make.edges.equalTo(self.view.safeAreaLayoutGuide)
        }

        // add contentView to scrollView
        self.scrollView.addSubview(contentView)

        // constrain all 4 edges to scrollView
        // this will allow auto-layout to control / define the .contentSize
        contentView.snp.makeConstraints { (make) in
            make.edges.equalTo(self.scrollView)
        }

        // constrain contentView's width to scrollView's width
        // but we *don't* constrain its height
        contentView.snp.makeConstraints { (make) in
            make.width.equalTo(self.scrollView)
        }

        // add the chart to contentView
        self.contentView.addSubview(self.chart)

        // constrain chart to top, left and right of contentView
        // constrain its height to scrollView's height (so it initially fills the visible area
        chart.snp.makeConstraints { (make) in
            make.top.equalTo(self.contentView)
            make.left.right.equalTo(self.contentView)
            make.height.equalTo(self.scrollView)
        }

        // now, we'll add a label to scrollView
        self.contentView.addSubview(self.bottomLabel)

        // constrain the label left and right with 20-pts, and a height of 40
        bottomLabel.snp.makeConstraints { (make) in
            make.left.equalTo(self.contentView).offset(20)
            make.right.equalTo(self.contentView).offset(-20)
            make.height.equalTo(40)
        }

        // constrain the label's TOP 20-pts below the BOTTOM of chart view
        bottomLabel.snp.makeConstraints { (make) in
            make.top.equalTo(self.chart.snp.bottom).offset(20)
        }

        // constrain the BOTTOM of the label 20-pts from the bottom of contentView
        bottomLabel.snp.makeConstraints { (make) in
            make.bottom.equalTo(self.contentView).offset(-20)
        }

        // with those constraints, contentView's height is now:
        // chart's height + 20 + label's height + 20
        // and because contentView's bottom is constrained to scrollView's bottom,
        // that becomes scrollView's contentSize

    }

}

Я добавил UILabel в качестве вида chart и еще одну метку под ним, чтобы показать, как использовать автоматическую разметку для определения содержимого прокрутки.

Исходное представление:

Прокрутка вверх:

и результирующая иерархия просмотра:

Комментарии, которые я включил в код, должны прояснить, как и почему это делается таким образом.