Using snapkit / autolayout with UIScrollView

Question

I have an app that will have a

scrollView
- contentView
  - chart
  - buttons
  - other stuff

I tried constraining it like shown below, but I am missing a constraint and I can't find out what I need.

    self.view.addSubview(self.scrollView)
    self.scrollView.snp.makeConstraints { (make) in
        make.edges.equalTo(self.view)
    }
    let contentView = UIView()

    self.scrollView.addSubview(contentView)
    contentView.snp.makeConstraints { (make) in
        make.top.bottom.equalTo(self.scrollView)
        make.left.right.equalTo(self.view)
    }
    contentView.addSubview(self.chart)
    self.chart.snp.makeConstraints { (make) in
        // http://snapkit.io/docs/
        make.edges.equalTo(contentView).inset(UIEdgeInsets(top: 30, left: 0, bottom: 50, right: 0))
    }

where scrollView = UIScrollView()

score 7 · Accepted Answer · answered Oct 17 '18 at 13:23

7

You need to add width/height or alignment constraints for contentView. Try this:

contentView.snp.makeConstraints { (make) in
    make.top.bottom.equalTo(self.scrollView)
    make.left.right.equalTo(self.view)
    make.width.equalTo(self.scrollView)
    make.height.equalTo(self.scrollView)
    // or:
    // make.centerX.equalTo(self.scrollView)
    // make.centerY.equalTo(self.scrollView)
}

answered Oct 17 '18 at 13:23

Ilya Kharabet

4,203
3
15
29

1

thanks. How can I set the scrollView content height based on `contentView`? – Peter S Oct 17 '18 at 13:25
Content height will be calculated automatically – Ilya Kharabet Oct 17 '18 at 15:34

score 3 · Answer 2 · answered Dec 17 '19 at 07:41

@Ilya Kharabet's answer for short:

contentView.snp.makeConstraints { (make) in
    make.left.right.equalTo(self.view)
    make.width.height.top.bottom.equalTo(self.scrollView)
}

PS:

ususally we use make.leading.trailing, instead of make.left.right, for RTL Support .

Using snapkit / autolayout with UIScrollView

2 Answers2