UIScrollView Item not moving from the background - swift

Question

I setup my constraints so that I would have a chart that takes up the screen when you load in, but you are able to scroll down to see more information. However, I can see the scroll bar moving, and the chart does not move!
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
}
So the scroll bar moves, but the content is not.

Answer 1

Unfortunately, you're doing a number of things wrong.
First, when you use this construct:
var scrollView: UIScrollView {
let scroll = UIScrollView()
self.view.addSubview(scroll)
scroll.snp.makeConstraints { (make) in
make.edges.equalTo(self.view)
}
return scroll
}
Every time you refer to scrollView you are creating another instance of the scroll view. Running your code, and using Debug View Hierarchy, this is what you get:
The red views are scrollViews and the blue views are contentViews. As you can see, that's definitely not what you want.
Here is an example of how you can do what you're trying to do:
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
}
}
I added a UILabel as the chart view, and another label below it to show how to use auto-layout to define the scroll content.
Initial view:
Scrolled up:
and, the resulting View Hierarchy:
The comments I've included in the code should clarify how and why it's done this way.