如何使用水平滚动以编程方式执行自动布局？

Question

我尝试使用AutoLayout以编程方式在iOS上进行水平滚动。这是我github的链接，我试图将另一个NewsSection添加到下一页，但我不知道该怎么做。这是我正在处理的代码。

- (void) setupNewsView
{
    UIView *newsView = [[NewsSection alloc] initWithFrame:CGRectZero];
    newsView.backgroundColor = [UIColor redColor];

    UIView *anotherNewsView = [[NewsSection 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];

    NSDictionary *viewsDict = @{ @"newsView": newsView, @"anotherNewsView": anotherNewsView };

    [self.scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[newsView]|"
                                                                            options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom
                                                                            metrics:nil
                                                                              views:viewsDict]];

    [self.scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[newsView]|"
                                                                            options:0
                                                                            metrics:nil
                                                                              views:viewsDict]];

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

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


    [self.scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[anotherNewsView(200)]|" options:0 metrics:nil views:viewsDict]];
    [self.scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[anotherNewsView(100)]|" options:0 metrics:nil views:viewsDict]];


    [self.scrollView setContentSize:CGSizeMake(self.scrollView.frame.size.width * 2, self.scrollView.frame.size.height)];

现在应用程序看起来像这样。我想要的是用户应该能够向右滚动并看到蓝屏。我需要添加什么约束？

Answer 1

您设置了蓝色视图以填充滚动视图并具有固定宽度的约束，这会导致冲突。约束字符串两端的| s使anotherNewsView拥抱其superview（scrollView）的边界。

尝试从约束中删除最终的| s。同时将anotherNewsView定位为与newsView左对齐而不是scrollView。

这些限制应该可以解决问题：

[self.scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[newsView(500)]" options:0 metrics:nil views:viewsDict]];
[self.scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[newsView(500)][anotherNewsView(100)]" options:0 metrics:nil views:viewsDict]];
[self.scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[anotherNewsView(200)]" options:0 metrics:nil views:viewsDict]];