XCode自动布局无法与UIScrollView一起使用以进行水平分页

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.

Answer 1

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.