Cannot create UIScrollerView with pure auto layout constraints - ios

Question

I stripped down my code so that its easy to understand.
Say you have a controller and you want to add a simple scroller using pure auto layout.
You can invoke my function tool (provided below) as follows:
// Create scroll view
let strip = addStripCategoryTo(view)
// Attach it to the view, vertically and horizontally
strip.topAnchor.constraintEqualToAnchor(view.topAnchor).active = true
strip.leftAnchor.constraintEqualToAnchor(view.leftAnchor).active = true
// The function
func addStripCategoryTo(parent: UIView) -> UIView {
let h:CGFloat = 128
let w = 2*h/3
let n = 5
let width = w * CGFloat(n)
let height = h
// Scroll view
let scrollview = UIScrollView()
parent.addSubview(scrollview)
scrollview.scrollEnabled = true
scrollview.translatesAutoresizingMaskIntoConstraints = false
scrollview.widthAnchor .constraintEqualToAnchor(parent.widthAnchor).active = true
scrollview.heightAnchor.constraintEqualToConstant(h).active = true
scrollview.layer.borderWidth = 2
scrollview.layer.borderColor = UIColor.greenColor().CGColor
scrollview.backgroundColor = UIColor.brownColor()
// Scroll view content
let contentView = UIView() //frame:CGRect(origin: CGPointZero, size:CGSize(width: width, height: height)))
scrollview.addSubview(contentView)
contentView.backgroundColor = UIColor.redColor()
contentView.layer.borderWidth = 10
contentView.layer.borderColor = UIColor.blueColor().CGColor
contentView.translatesAutoresizingMaskIntoConstraints = false
contentView.centerYAnchor.constraintEqualToAnchor(scrollview.centerYAnchor).active = true
contentView.widthAnchor .constraintEqualToConstant(width).active = true
contentView.heightAnchor.constraintEqualToConstant(height).active = true
return scrollview
}
Unfortunately, I cannot scroll it horizontally, see screenshot as follows:
What am I missing?

Answer 1

Your constraints should be like this,
Scrollview - top,bottom,leading,trailing
ContentView - top,bottom,leading,trailing, fixed width, vertically center in container (center y)
and your content view's width should be large than screen width then also you can scroll horizontally
Hope this will help :)

Answer 2

Going to give this a try and answer this, see if it helps.
EDIT
Answering question better, old answer deleted:
Adding these two lines should make to scroll horizontally:
contentView.leadingAnchor.constraintEqualToAnchor(scrollview.leadingAnchor).active = true contentView.trailingAnchor.constraintEqualToAnchor(scrollview.trailingAnchor).active = true
The problem is that without these two constraint, the scrollView doesn't know its contentSize, therefor not scrolling, even though you gave the contentView a specific width. You need to let know the scrollView where does that contentView start and end, and these two constraints will help the scrollView know how big is the contentsView width. If not the scrollView's contentSize is going to stay the same as the device's width, and the contentView is just going to show offscreen since it's width is larger than the device's screen.
Hope this helped better.
Full code of the function
func addStripCategoryTo(parent: UIView)-> UIView {
let h:CGFloat = 128
let w = 2*h/3
let n = 5
let width = w * CGFloat(n)
let height = h
// Scroll view
let scrollview = UIScrollView()
parent.addSubview(scrollview)
scrollview.scrollEnabled = true
scrollview.translatesAutoresizingMaskIntoConstraints = false
scrollview.leadingAnchor.constraintEqualToAnchor(parent.leadingAnchor).active = true
scrollview.trailingAnchor.constraintEqualToAnchor(parent.trailingAnchor).active = true
scrollview.widthAnchor .constraintEqualToAnchor(parent.widthAnchor).active = true
scrollview.heightAnchor.constraintEqualToConstant(h).active = true
scrollview.layer.borderWidth = 2
scrollview.layer.borderColor = UIColor.greenColor().CGColor
scrollview.backgroundColor = UIColor.brownColor()
// Scroll view content
let contentView = UIView() //frame:CGRect(origin: CGPointZero, size:CGSize(width: width, height: height)))
scrollview.addSubview(contentView)
contentView.backgroundColor = UIColor.redColor()
contentView.layer.borderWidth = 10
contentView.layer.borderColor = UIColor.blueColor().CGColor
contentView.translatesAutoresizingMaskIntoConstraints = false
contentView.centerYAnchor.constraintEqualToAnchor(scrollview.centerYAnchor).active = true
contentView.leadingAnchor.constraintEqualToAnchor(scrollview.leadingAnchor).active = true
contentView.trailingAnchor.constraintEqualToAnchor(scrollview.trailingAnchor).active = true
contentView.widthAnchor.constraintEqualToConstant(width).active = true
contentView.heightAnchor.constraintEqualToConstant(height).active = true
return scrollview
}

Answer 3

Here is the solution of my issue. I provided a tool function that solve the issue as follow:
func setScrollViewConstraints(scrollView: UIScrollView, contentView:UIView, multiplier m:(width:CGFloat, height:CGFloat)=(1, 1)) {
guard let scrollViewParent = scrollView.superview else {
assert(false, "setScrollViewConstraints() requires the scrollview to have a superview")
return
}
guard let contentViewParent = contentView.superview else {
assert(false, "setScrollViewConstraints() requires the contentView to have a superview")
return
}
guard contentViewParent == scrollView else {
assert(false, "setScrollViewConstraints() requires the contentView to have a superview being the scrollView")
return
}
scrollView.translatesAutoresizingMaskIntoConstraints = false
scrollView.widthAnchor .constraintEqualToAnchor(scrollViewParent.widthAnchor, multiplier: m.width ).active = true
scrollView.heightAnchor .constraintEqualToAnchor(scrollViewParent.heightAnchor, multiplier: m.height).active = true
contentView.translatesAutoresizingMaskIntoConstraints = false
contentView.leftAnchor .constraintEqualToAnchor(contentViewParent.leftAnchor ).active = true
contentView.rightAnchor .constraintEqualToAnchor(contentViewParent.rightAnchor ).active = true
contentView.topAnchor .constraintEqualToAnchor(contentViewParent.topAnchor ).active = true
contentView.bottomAnchor.constraintEqualToAnchor(contentViewParent.bottomAnchor ).active = true
/*
// Pre-iOS 9 version
let views = [
"scrollView":scrollview,
"contentView":contentView
]
parent.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[scrollView]|", options:[], metrics: [:], views:views))
parent.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[scrollView]|", options:[], metrics: [:], views:views))
scrollview.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[contentView]|", options:[], metrics: [:], views:views))
scrollview.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[contentView]|", options:[], metrics: [:], views:views))
*/
}
Use it like this for having the scroll view 100% width the super view and 1/4th of its height:
func addStripCategoryTo(parent: UIView) -> UIView {
// Scroll view
let scrollview = UIScrollView()
parent.addSubview(scrollview)
scrollview.backgroundColor = UIColor.brownColor()
scrollview.layer.borderWidth = 2
scrollview.layer.borderColor = UIColor.greenColor().CGColor
// Scroll view content
let contentView = UIImageView()
contentView.image = UIImage(named: "cover-0.jpeg")
scrollview.addSubview(contentView)
contentView.backgroundColor = UIColor.redColor()
contentView.layer.borderWidth = 10
contentView.layer.borderColor = UIColor.blueColor().CGColor
// Apply constraints
setScrollViewConstraints(scrollview, contentView:contentView, multiplier: (1, 0.25))
return scrollview
}