Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

The following code (called in viewDidLoad) results in a fully red screen. I would expect it to be a fully green screen. Why is it red? And how can I make it all green?

UIScrollView* scrollView = [UIScrollView new];
scrollView.translatesAutoresizingMaskIntoConstraints = NO;
scrollView.backgroundColor = [UIColor redColor];
[self.view addSubview:scrollView];

UIView* contentView = [UIView new];
contentView.translatesAutoresizingMaskIntoConstraints = NO;
contentView.backgroundColor = [UIColor greenColor];
[scrollView addSubview:contentView];

NSDictionary* viewDict = NSDictionaryOfVariableBindings(scrollView,contentView);

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[scrollView]|" options:0 metrics:0 views:viewDict]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[scrollView]|" options:0 metrics:0 views:viewDict]];

[scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[contentView]|" options:0 metrics:0 views:viewDict]];
[scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[contentView]|" options:0 metrics:0 views:viewDict]];
share|improve this question
up vote 8 down vote accepted

Constraints with scroll views work slightly differently than it does with other views. The constraints between of contentView and its superview (the scrollView) are to the scrollView's contentSize, not to its frame. This might seem confusing, but it is actually quite useful, meaning that you never have to adjust the contentSize, but rather the contentSize will automatically adjust to fit your content.

If you want to define the contentView size to the screen or something like that, you'd have to add a constraint between the contentView and the main view, for example. That's, admittedly, antithetical to putting content into the scrollview, so I probably wouldn't advise that, but it can be done.


To illustrate this concept, that the size of contentView will be driven by its content, not by the bounds of the scrollView, add a label to your contentView:

UIScrollView* scrollView = [UIScrollView new];
scrollView.translatesAutoresizingMaskIntoConstraints = NO;
scrollView.backgroundColor = [UIColor redColor];
[self.view addSubview:scrollView];

UIView* contentView = [UIView new];
contentView.translatesAutoresizingMaskIntoConstraints = NO;
contentView.backgroundColor = [UIColor greenColor];
[scrollView addSubview:contentView];

UILabel *randomLabel = [[UILabel alloc] init];
randomLabel.text = @"this is a test";
randomLabel.translatesAutoresizingMaskIntoConstraints = NO;
randomLabel.backgroundColor = [UIColor clearColor];
[contentView addSubview:randomLabel];

NSDictionary* viewDict = NSDictionaryOfVariableBindings(scrollView, contentView, randomLabel);

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[scrollView]|" options:0 metrics:0 views:viewDict]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[scrollView]|" options:0 metrics:0 views:viewDict]];

[scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[contentView]|" options:0 metrics:0 views:viewDict]];
[scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[contentView]|" options:0 metrics:0 views:viewDict]];

[contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[randomLabel]-|" options:0 metrics:0 views:viewDict]];
[contentView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[randomLabel]-|" options:0 metrics:0 views:viewDict]];

Now you'll see that the contentView (and, therefore, the contentSize of the scrollView) are adjusted to fit the label with standard margins. And because I didn't specify the width/height of the label, that will adjust based upon the text you put into that label.


If you want the contentView to also adjust to the width of the main view, you could do redefine your viewDict like so, and then add these additional constraints (in addition to all the others, above):

UIView *mainView = self.view;

NSDictionary* viewDict = NSDictionaryOfVariableBindings(scrollView, contentView, randomLabel, mainView);

[mainView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[contentView(==mainView)]" options:0 metrics:0 views:viewDict]];

There is a known issue (bug?) with multiline labels in scrollviews, that if you want it to resize according to the amount of text, you have to do some slight of hand, such as:

dispatch_async(dispatch_get_main_queue(), ^{
    randomLabel.preferredMaxLayoutWidth = self.view.bounds.size.width;
});
share|improve this answer
I can't seem to get the label to expand vertically if the text is too long to fit on one line. I've set the number of lines to 0, and the lineBreakMode to NSLineBreakByWordWrapping. Am I missing something? – rdelmar May 30 at 20:08
Additionally, I added the last line in your answer to pin the width of the contentView to the width of the screen (otherwise the contentView's width is wide enough to accommodate the long text). If I explicitly set the height of the label with a height constraint, then it works. – rdelmar May 30 at 20:13
Yeah, Matt discovered a couple of work-arounds for this issue/bug of multiline labels. I've added one of them to the bottom of my answer. A thoroughly dissatisfying solution. Looks like you have to choose between hardcoding values or this kludgy workaround. – Rob May 30 at 20:41
1  
Thanks for that link. I tried out Matt's work-arounds, and I think I like his other approach of subclassing the label better -- seems less kludgy. Especially if you're adding multiple labels, you can move the numberOfLines and setTranslates... methods into there as well as the layoutSubviews to make the code cleaner. I also noticed that I didn't get the proper heights of the labels on rotation using the dispatch_async method unless that code is put in viewWillLayoutSubviews (as Matt suggested), which means you need to create properties for your labels as well. – rdelmar May 30 at 23:37
@rdelmar Agreed. Still too bad that auto layout doesn't handle this fairly simple use case more gracefully. – Rob May 30 at 23:42

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.