UIScrollView自动布局 - 内容大小未正确设置

Question

我看到了很多关于这个主题的Stack Overflow线程（和iOS 6发布说明），但似乎没有一个能帮助我，或者我不理解它们。我有一个大小为（244,46）的滚动视图，我想用分页将其滚动到两倍宽度。

在我的storyboard中，我已经布置了scrollView及其子视图（一排UIButtons）-我设置了它们的起点，但删除了所有约束条件，称为“Leading space to superview”。我用“Leading space to button”替换了它们-即相邻按钮之间的水平间距。在代码中，我将buttons的translatesAutoresizingMaskIntoConstraints设置为NO。

然而，我无法使scrollView滚动。它只是反弹以显示scrollview边界右侧有某些东西，但无法到达。我做错了什么，或者还需要尝试其他事情才能使它工作吗？

哦，还有一个“Trailing space to superview”约束条件在Interface Builder中最后一个可见按钮上（不是行中的最后一个按钮），还有一个“Leading space to superview”约束条件在第一个按钮上，无法保持删除（请参见图像中的紫色约束）。他们令人恼火地在列表的不同位置突然出现！为什么会发生这种情况，为什么内容大小没有正确设置？

感谢您的时间！

- architectpianist

---

请查看Tech Note TN 2154“UIScrollView和Autolayout”。 - rob mayoff

@rob 谢谢你提供的链接，但我还是有些不清楚- "滚动视图子视图的约束必须导致填充大小" 是什么意思？此外，在纯自动布局方法中（我正在使用IB），它说“确保约束绑定到滚动视图的所有边缘。”在IB中这是什么意思-将前导和尾随空间固定到父视图上吗？ - architectpianist

您必须在滚动视图和其子视图之间设置约束，以强制滚动视图在两个方向上具有非零大小。这个大小将是运行时滚动视图的内容大小；它不会影响滚动视图的框架。 - rob mayoff

@rob 我想我开始明白了。但是当我将前导和尾随空间固定到父视图时，我得到“前导空间等于432”，“尾随空间等于-226”，这样做正确吗？我需要为所有子视图都这样做，还是只需要对最远离可见区域的那个子视图这样做？ - architectpianist

@rob 好的，我对NSLayoutConstraint不是很熟悉（或者说不太熟练），所以请原谅我。除了我已经有的约束条件之外，我还需要写什么才能让它工作？我的按钮在IBOutletCollection中。 - architectpianist

Answer 1

我采纳了@robmayoff的建议，将我的按钮创建移动到代码中，它神奇地起作用了。（我仍然不太懂自动布局，但我设法做到了。）如果将来有人需要创建一个滚动按钮列表，这里有一种方法可以实现，而不需要显式设置contentSize，虽然比IB略微丑陋一些。

self.toolbarScrollView.translatesAutoresizingMaskIntoConstraints = NO;

NSMutableArray *toolbarItems = [NSMutableArray array];

//Unfortunately, you'll have to set the contentWidth manually - in viewDidLoad
// the frames aren't set yet. 47.0 is the size (38) + margin (9) of one of my
// buttons.
CGFloat x = contentWidth - 47.0;

//This code lets you page the scroll view with more spacing between items on 
//different pages.
int itemCountPerPage = 5;
NSArray *images = @[/*...titles of images...*/];
SEL selectors[10] = {
    //button selectors
};

UIButton *lastButton = nil;

for (int i = 0; i < [images count]; i++)
{
    NSString *imageName = [images objectAtIndex:i];

    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    button.translatesAutoresizingMaskIntoConstraints = NO;
    [button setImage:[UIImage imageNamed:imageName maskedWithColor:[UIColor whiteColor]] forState:UIControlStateNormal];
    button.showsTouchWhenHighlighted = YES;
    if (selectors[i] != NULL)
        [button addTarget:self action:selectors[i] forControlEvents:UIControlEventTouchUpInside];
    [self.toolbarScrollView addSubview:button];
    [toolbarItems addObject:button];

    if (lastButton)
    {
        NSDictionary *dict = NSDictionaryOfVariableBindings(lastButton, button);
        [self.toolbarScrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:[NSString stringWithFormat:@"H:[lastButton(==38)]-%g-[button(==38)]-%g-|", (i % itemCountPerPage == 0 ? 18.0 : 9.0), x] options:NSLayoutFormatAlignAllCenterY metrics:nil views:dict]];
        [self.toolbarScrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-4-[button(==38)]-4-|" options:NSLayoutFormatAlignAllCenterY metrics:nil views:dict]];
    }
    else
    {
        NSDictionary *dict = NSDictionaryOfVariableBindings(button);
        [self.toolbarScrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:[NSString stringWithFormat:@"H:|-9-[button(==38)]-%g-|", x] options:NSLayoutFormatAlignAllCenterY metrics:nil views:dict]];
        [self.toolbarScrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-4-[button(==38)]-4-|" options:NSLayoutFormatAlignAllCenterY metrics:nil views:dict]];          
    }

    x -= (i % itemCountPerPage == itemCountPerPage - 1 ? 56.0 : 47.0);  //Extra space to allow for paging
    lastButton = button;
}

希望这能帮助到某些人，因为一个简单的滚动视图确实会带来很多麻烦！感谢你的帮助。

- architectpianist

---

你基本上只是在你的回答中倾泻代码。如果你描述一下你是如何解决它的话，这可能是一个有帮助的答案。 - Niklas Berglund