Paging Scroll View constraints layout issue

Question

In the project I have created paging scroll view based on constraints. Most of the view is set up in xib (SlideViewController. and SlideView subclass of UIView to be added to scroll view). SlideViewController contains UIScrollView and UIView as content view that is bound to the scroll view with constraints. In the xib this is simple setup. The problem appears when I try to add multiple SlideView's to content view. Of course I want to add it with constraints. First of all it throws warning Unable to simultaneously satisfy constraints. with details:

"<NSLayoutConstraint:0x600001806b70 H:|-(0)-[UIView:0x7ffac0d0cb40]   (active, names: '|':UIScrollView:0x7ffac1842600 )>",
    "<NSLayoutConstraint:0x600001806d00 UIView:0x7ffac0d0cb40.centerX == UIScrollView:0x7ffac1842600.centerX   (active)>",
    "<NSLayoutConstraint:0x600001805400 UIScrollView:0x7ffac1842600.trailing == UILayoutGuide:0x6000002308c0'UIViewSafeAreaLayoutGuide'.trailing   (active)>",
    "<NSLayoutConstraint:0x6000018058b0 UIScrollView:0x7ffac1842600.leading == UILayoutGuide:0x6000002308c0'UIViewSafeAreaLayoutGuide'.leading   (active)>",
    "<NSLayoutConstraint:0x6000018065d0 H:|-(0)-[PagingScrollView.SlideView:0x7ffac380be10](LTR)   (active, names: '|':UIView:0x7ffac0d0cb40 )>",
    "<NSLayoutConstraint:0x600001806670 PagingScrollView.SlideView:0x7ffac380be10.width == UIScrollView:0x7ffac1842600.width   (active)>",
    "<NSLayoutConstraint:0x600001806760 H:[PagingScrollView.SlideView:0x7ffac380be10]-(0)-[PagingScrollView.SlideView:0x7ffac3814d10](LTR)   (active)>",
    "<NSLayoutConstraint:0x600001806ad0 PagingScrollView.SlideView:0x7ffac3814d10.width == UIScrollView:0x7ffac1842600.width   (active)>",
    "<NSLayoutConstraint:0x600001806d50 H:[PagingScrollView.SlideView:0x7ffac3814d10]-(0)-[PagingScrollView.SlideView:0x7ffac3805d20](LTR)   (active)>",
    "<NSLayoutConstraint:0x600001806e90 PagingScrollView.SlideView:0x7ffac3805d20.width == UIScrollView:0x7ffac1842600.width   (active)>",
    "<NSLayoutConstraint:0x6000018070c0 H:[PagingScrollView.SlideView:0x7ffac3805d20]-(0)-[PagingScrollView.SlideView:0x7ffac3801b10](LTR)   (active)>",
    "<NSLayoutConstraint:0x600001807200 PagingScrollView.SlideView:0x7ffac3801b10.width == UIScrollView:0x7ffac1842600.width   (active)>",
    "<NSLayoutConstraint:0x6000018072f0 PagingScrollView.SlideView:0x7ffac3801b10.right == UIView:0x7ffac0d0cb40.right   (active)>",
    "<NSLayoutConstraint:0x600001818ff0 'UIView-Encapsulated-Layout-Width' UIView:0x7ffac0d0fba0.width == 414   (active)>",
    "<NSLayoutConstraint:0x600001804460 'UIViewSafeAreaLayoutGuide-left' H:|-(0)-[UILayoutGuide:0x6000002308c0'UIViewSafeAreaLayoutGuide'](LTR)   (active, names: '|':UIView:0x7ffac0d0fba0 )>",
    "<NSLayoutConstraint:0x600001805130 'UIViewSafeAreaLayoutGuide-right' H:[UILayoutGuide:0x6000002308c0'UIViewSafeAreaLayoutGuide']-(0)-|(LTR)   (active, names: '|':UIView:0x7ffac0d0fba0 )>"

And it doesn't scroll at all. One last SlideView is shown only. It looks like contentView is not resized based on constraints.

The following code is responsible for adding each of the SlideView to ScrollView (precisely to content view):

private func setup() {
        var prevLeftAnchor = contentView.leftAnchor;

        for i in 0 ..< slides.count {
            slides[i].translatesAutoresizingMaskIntoConstraints = false
            contentView.addSubview(slides[i])

            slides[i].leftAnchor.constraint(equalTo: prevLeftAnchor).isActive = true
            slides[i].topAnchor.constraint(equalTo: contentView.topAnchor).isActive = true
            slides[i].widthAnchor.constraint(equalTo: scrollView.widthAnchor).isActive = true
            slides[i].heightAnchor.constraint(equalTo: scrollView.heightAnchor).isActive = true
            prevLeftAnchor = slides[i].rightAnchor;
        }

        slides.last?.rightAnchor.constraint(equalTo: contentView.rightAnchor).isActive = true;
}

After couple of hours I got stuck and can't see where the problem is. I appreciate any response.

You can take a look at the simple project in github https://github.com/sumofighter666/PageScroller

DonMag DonMag · Accepted Answer · 2019-10-12T15:41:43

In your SlideViewController.xib, you have a CenterX constraint on Content View...

Remove that constraint, and you should be able to scroll.

Note that you also have two Leading constraints. Since they are identical, it doesn't affect anything, but might as well delete one of them for clarity.

Paging Scroll View constraints layout issue

1 Answers