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

Posted 2023-03-15

【中文标题】如何使用水平滚动以编程方式执行 AutoLayout？

【英文标题】：How to do AutoLayout programmatically with Horizontal scrolling?

【发布时间】：2015-03-24 00:17:05

【问题描述】：

我正在尝试以编程方式使用 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)];

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

【参考方案1】：

您将蓝色视图设置为填充滚动视图并且具有固定宽度的约束，这会导致冲突。约束字符串两端的 |s 使 anotherNewsView 拥抱其父视图 (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]];

【讨论】：

感谢您的回复。我尝试了约束。他们工作，但我仍然不能滚动到左​​边。当我向左滚动时，我看到蓝色矩形粘在红色矩形的末尾，但我无法滚动到第二页。

另外，您似乎将 newsView 的宽度指定为 500。但是，我希望第一页会填满整个屏幕，而下一页（红色背景）会填满另一页.我以后会有更多页面。