XCode autolayout not working with UIScrollView for horizontal paging

Question

I'm trying to create a horizontal paging by using AutoLayout. Here's the code.

 UIView *newsView = [[UIView alloc] initWithFrame:CGRectZero];
    newsView.backgroundColor = [UIColor redColor];

    UIView *anotherNewsView = [[UIView alloc] initWithFrame:CGRectZero];
    anotherNewsView.backgroundColor = [UIColor blueColor];

    self.scrollView.translatesAutoresizingMaskIntoConstraints = NO;
    newsView.translatesAutoresizingMaskIntoConstraints = NO;
    anotherNewsView.translatesAutoresizingMaskIntoConstraints = NO;

    self.scrollView.pagingEnabled = YES;

    [self.scrollView addSubview:newsView];
    [self.scrollView addSubview:anotherNewsView];
 [self.scrollView addConstraint:[NSLayoutConstraint constraintWithItem:newsView
                                                                    attribute:NSLayoutAttributeTop
                                                                    relatedBy:NSLayoutRelationEqual
                                                                       toItem:self.scrollView
                                                                    attribute:NSLayoutAttributeTop
                                                                   multiplier:1.0f
                                                                     constant:0.0f]];

    [self.scrollView addConstraint:[NSLayoutConstraint constraintWithItem:newsView
                                                                attribute:NSLayoutAttributeBottom
                                                                relatedBy:NSLayoutRelationEqual
                                                                   toItem:self.scrollView
                                                                attribute:NSLayoutAttributeBottom
                                                               multiplier:1.0f
                                                                 constant:0.0f]];

    [self.scrollView addConstraint:[NSLayoutConstraint constraintWithItem:newsView
                                                                attribute:NSLayoutAttributeLeading
                                                                relatedBy:NSLayoutRelationEqual
                                                                   toItem:self.scrollView
                                                                attribute:NSLayoutAttributeLeading
                                                               multiplier:1.0f
                                                                 constant:0.0f]];
//
    [self.scrollView addConstraint:[NSLayoutConstraint constraintWithItem:newsView
                                                                attribute:NSLayoutAttributeTrailing
                                                                relatedBy:NSLayoutRelationEqual
                                                                   toItem:anotherNewsView
                                                                attribute:NSLayoutAttributeLeading
                                                               multiplier:1.0f
                                                                 constant:0.0f]];
//    
    [self.scrollView addConstraint:[NSLayoutConstraint constraintWithItem:anotherNewsView
                                                                attribute:NSLayoutAttributeTop
                                                                relatedBy:NSLayoutRelationEqual
                                                                   toItem:self.scrollView
                                                                attribute:NSLayoutAttributeTop
                                                               multiplier:1.0f
                                                                 constant:0.0f]];

    [self.scrollView addConstraint:[NSLayoutConstraint constraintWithItem:anotherNewsView
                                                                attribute:NSLayoutAttributeBottom
                                                                relatedBy:NSLayoutRelationEqual
                                                                   toItem:self.scrollView
                                                                attribute:NSLayoutAttributeBottom
                                                               multiplier:1.0f
                                                                 constant:0.0f]];

    [self.scrollView addConstraint:[NSLayoutConstraint constraintWithItem:anotherNewsView
                                                                attribute:NSLayoutAttributeTrailing
                                                                relatedBy:NSLayoutRelationEqual
                                                                   toItem:self.scrollView
                                                                attribute:NSLayoutAttributeTrailing
                                                               multiplier:1.0f
                                                                 constant:0.0f]];

    [self.scrollView addConstraint:[NSLayoutConstraint constraintWithItem:newsView
                                                                attribute:NSLayoutAttributeWidth
                                                                relatedBy:NSLayoutRelationEqual
                                                                   toItem:anotherNewsView
                                                                attribute:NSLayoutAttributeWidth
                                                               multiplier:0.99f
                                                                 constant:0.0f]];

But I only see the scrollView which I set the background to cyan.

enter image description here

possible duplicate of [Scroll View not functioning IOS 7](http://stackoverflow.com/questions/20502860/scroll-view-not-functioning-ios-7) — Rukshan, Mar 25 '15 at 06:06
I tried the approach from https://developer.apple.com/library/ios/technotes/tn2154/_index.html which is the answer but it didn't really work. I'm going with the pure code approach. — toy, Mar 25 '15 at 06:10
I had the same issue and above solution worked like a charm, with minimal effort. — Rukshan, Mar 25 '15 at 10:23

score 1 · Accepted Answer · edited May 23 '17 at 12:06

The problem is that your views have width and height zero as they are configured right now.

Try adding some with and height constraints to them like :

NSArray *heightConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[view(height)]" options:0 metrics:@{ @"height":@(CGRectGetHeight(self.scrollView.frame)) } views:@{ @"view":newsView }];
[self.scrollView addConstraints: heightConstraints];

[self.scrollView addConstraints: [NSLayoutConstraint constraintsWithVisualFormat:@"H:[newsView(width)]" options:0 metrics:@{ @"width":@(CGRectGetWidth(self.scrollView.frame)) } views:@{ @"newsView":newsView]];

[self.scrollView addConstraints: [NSLayoutConstraint constraintsWithVisualFormat:@"H:[anotherNewsView(width)]" options:0 metrics:@{ @"width":@(CGRectGetWidth(self.scrollView.frame)) } views:@{ @"anotherNewsView":anotherNewsView }]];

You can also check one of my other answers here.

The important thing is that the views inside the scrollview must have their own width and height. This is how the scrollView calculates it's contentSize. If you don't have that, the contentSize will be CGSizeZero and you won't see your views.

Hope this helps! Let me know if you need more help.

Sorry one quick question. After I applied your code , the red box's width is way longer than the screen size. I want the red box to be the first page and the blue box to be the second page. Not sure how to fit that perfectly. I updated the code here in case you want to look at the code https://github.com/noppanit/UIScrollViewAutoLayout — toy, Mar 27 '15 at 22:43
I changed to viewDidLayoutSubviews and it works perfectly! Thanks again. — toy, Mar 28 '15 at 00:50

XCode autolayout not working with UIScrollView for horizontal paging

1 Answers1